Email Authentication with React Native and Firebase

Learn how to set up an email authentication in your React Native app using Firebase

There are various ways to authenticate a user might be by using Facebook, Google, Twitter, LinkedIn & Email, etc. But Email authentication is still the most popular authentication method. In this tutorial, I will walk you through to create Email authentication with React Native and Firebase.

Firebase provides a lot of great products that allow us to develop mobile apps quickly; Realtime Database, Authentication, Cloud Firestore, Cloud Functions, etc.

Authentication flow using an email and password

Work Flow

Create new react native project with the expo

In this post, we are using expo for without touching Xcode or Android studio. Open up your terminal or command line and type in:

expo init firebaseAuth

After you press enter, you will be asked to choose a template select “blank” for now.

We will be developing this project using VS Code. In VSC, open a new terminal, cd to your app’s folder and run npm start .

The Expo will open a new window in the browser, as shown below. In this tutorial, we will use an android emulator.

Now start your emulator and use it to open the expo app

Cool! we are okay with our application now let’s start to code.

Creating Screens

Loading.js

SignUp.js

Login.js

Home.js

Drawer.js

App.js

Now if you start your app, you should see the Loading screen with an activity indicator.

Adding Firebase

Go to the firebase console and create one project and enable Email/password authentication.

Now grab configuration API key which is very important to access the data from the database.

Adding firebase to our App

Create a firebase.js file.

Loading.js

Using onAuthStateChanged to get the current status of the user if the user is authenticated we will be redirected to the Home screen otherwise we will be redirected to the Signup screen.

Login.js

Updated Login.js so that we can log in to the existing account

Signup.js

We use createUserWithEmailAndPassword to create a new user and then navigate them to the Home screen. If there comes any error we display it.

Home.js

After updating the Home screen we are getting the details of current logged in user and displaying their email.

Conclusion

In this tutorial, you have learned how to setup react native project with expo and firebase. Then after that, you have learned how to create a basic email authentication app using React Native and Firebase.

If you want to have the source code of the application, I’ve uploaded it to Github.

I hope you have got something from this. If yes then do leave a clap.