React Native and Firebase: Authentication
How to set up your React Native app to work with Firebase
Also available as a video lesson on egghead.io!
Authenticate a User in React with Firebase
https://next.egghead.io/lessons/react-authenticate-a-user-in-react-with-firebase
Hi! I’m Faraz. Here’s a quick guide that will get us up and running with Firebase’s Authentication in React Native!
Firebase provides a lot of great products that allow us to develop mobile apps quickly; Realtime Database, Authentication, Cloud Firestore, Cloud Functions, Crashlytics…Just to name a few.
We’re going to be building a simple authentication flow using an email and password.
All we need is a way to use the Firebase SDK with a React Native app…and thanks to the lovely people at Invertase, who created react-native-firebase, we have just that! It’s an awesome open-source project for linking React Native apps with Firebase.
Setting Up Our App
Since we’re starting from scratch, we can go ahead and use the basic starter kit provided by react-native-firebase.
(If you already have an existing application, you can head over to React Native Firebase and follow the manual installation instructions.)
Go ahead and follow their instructions (they’re great) to get our app up and running, and then come back when you’re ready.
Enable Email and Password Authentication in Firebase
After following the instructions linked above, you should be ready to get started.
Here’s a diagram of what we’re going to be building:
To allow users to use an email and password combo, we need to enable this provider in our Firebase console.
To do this, head on over to your Firebase Project → Authentication → Sign-in Method. Click on Email/Password and set to enabled and save. Your dashboard should look like this:
Creating the Screens
If we take a look at our diagram, you can see that we have four screens: Loading, SignUp, Login, and Main.
A Loading screen that displays until we determine the auth state of a user, a SignUp screen where the user can create an account, a Login screen where an existing user can log in, and a Main screen of our application that we only show to an authenticated user.
We’re going to be using react-navigation for our app’s navigation, so let’s set up our navigator and create our screens.
yarn add react-navigationLet’s create our screens.
Loading.js
SignUp.js
Login.js
Main.js
Now that we have all our screens created, let’s wire up our navigation inside our App.js file.
App.js
If we start up our app, you should see our Loading screen with the ActivityIndicator spinning forever. This is what we expected, because we need to determine if the user is authenticated or not to determine where to route them.
If the user is authenticated, route them to the Main screen. Otherwise, send them to the SignUp screen.
Determining if a User Is Authenticated
We can use Firebase to determine the authentication state of a user. Let’s add a check on our Loading screen that determines if a user is logged in or not.
We are using Firebase’s onAuthStateChanged listener to get the current auth state of the user. If they are authenticated, we route them to the Main screen. Otherwise, we send them to the SignUp screen.
Now, since we’re not logged in, you should see the Loading screen for a brief moment, and then be routed to the SignUp screen.
Signing a User Up
We need to create a new user, so we can log them in! Let’s head on over to the SignUp screen and wire up our handleSignUp method.
When a user submits the form, we createUserWithEmailAndPassword and then navigate them to the Main screen. If there is an error we catch it and display it.
Displaying the Current User on the Main Screen
With our current implementation, we will only see the Main screen if a user is logged in. We need to grab the currentUser from Firebase so that we can display their email. Let’s update our Main screen do handle this.
Now, when we see the Main screen, we should see the user’s email address. If we refresh the app, we should be automatically routed to the Main screen because are already authenticated.
The last step is that we should be able to log in a user after we have already created an account!
Logging an Already Existing User In
Homestretch! Let’s update our Login screen so that we can log in with an existing account.
Sweet!
We now have a simple authentication flow set up with React Native and Firebase. If you would like access to the entire source code, I’ve uploaded it to GitHub.
Thanks for reading!
