Firebase Authentication Using React Native 0.60+ And React Native Firebase

Today we have a very exciting technical article to help developers with firebase authentication using Firebase Authentication. We hope you learn a thing or two. To start with, create a new react-native project using the command: react-native init example. Now we have created a new project with the latest react-native version. STEP 1: Configure the […]

Today we have a very exciting technical article to help developers with firebase authentication using Firebase Authentication. We hope you learn a thing or two.

To start with, create a new react-native project using the command: react-native init example.

Now we have created a new project with the latest react-native version.

STEP 1: Configure the Firebase console

Go to the Firebase Console and create a new project with the name of your choice as shown below:

step 2 of the process, you can either proceed with Google analytics or just skip it by disabling the option to enable Google analytics for your project.

Select Create Project and wait for some seconds, then you have created a new project in the Firebase console. Click the continue button to proceed to the Project view. On the right side of the Project View, you will see a sidebar. Select Authentication, then choose the Sign-in method under the Authentication options and enable Email/Password from the list.

Now, open the Project Settings by clicking on the Gear button from the sidebar near to Project Overview and then choosing Project Settings. At the bottom, you will see something like this:

Click on the android logo and proceed with creating a new App in the project by giving the android app package name matches the project you created. In the next step, you will get a config file, Download the file and place it in the file path like this:

{ProjectDirectory}/android/app/google-services.json

STEP 2: Install and setup the dependencies 

Start with the installation of react-native-firebase dependency by opening up your terminal to run this command:

npm i react-native-firebase or yarn add react-native-firebase

After installation, you need to manually configure the android files to make it work. Having added the google-service.json file inside the android/app/  directory, in order for Android to parse this filem add the google-services gradle plugin as a dependency to your project in the project level build.gradle file:

buildscript {

// …

dependencies {

// …

classpath ‘com.google.gms:google-services:4.2.0’

}

}

 

To apply the plugin to your project, add the following to the VERY BOTTOM of your app:

android/app/build.gradle file: apply plugin: ‘com.google.gms.google-services’ 

Now, we need to add the firebase modules. In the android/app/build.gradle file, add the following:

Dependencies {

// This should be here already

Implementation project(‘:react-native-firebase’)

 

//Firebase dependencies

implementation “com.google.android.gms:play-services-base:16.1.0”

Implementation “com.google.firebase:firebase-core:16.0.9”

Implementation “com.google.firebase:firebase-auth:17.0.0”

 

Now, add the RNFirebaseAuthPackage to your:

android/app/src/main/java/com/[appname]/MainApplication.java :

 

//…

import com.facebook.react.ReactApplication;

Import io.invertase.firebase.auth.RNFirebaseAuthPackage;  // Add this line

 

Public class MainApplication extends Application implements ReactApplication {

//…

 

@Override

Protected List<ReactPackage> getPackages(){

@SuppressWarnings(“UnnecessaryLocalVariavle”)

List<ReactPackage> packages = new PackageList(this).getPackages();

//Packages that cannot be autolinked yet can be added manually here, for example:

//packages.add(new MyReactNativePackage());

packages.add(new RNFirebaseAuthPackage()); //Add this line 

}

};

//…

}

 

STEP 3: Writing the code to communicate with Firebase

We will create four screens for our app, these four screens are  SplashScreen, SignUp, Login and Home.

A SplashPage page gives a loading feel to the user until we determine the auth state of the user, a SignUp screen – for the user account creation, a Home screen to show the details of an authenticated user.

We’re going to be using react-navigation and react-navigation-stack for our app’s navigation, so let’s set up our navigator and create our screens with yarn or npm.

yarn add react-navigation

yarn add react-navigation-stack

And then follow the instructions for completing the installation.

Assuming you have completed all the steps till now, we’ll proceed with the creation of the screens.

SplashPage/index.js

Signup/index.js

Login/index.js

Home/index.js

We have created all the basic screens and so, now we can create the navigation of our app inside the App.js.

Now let’s proceed to add firebase authentication to the codes we have just created. First, we need to check whether the user is authenticated or not from the SplashPage. If the user is authenticated, navigate the user to Home screen, else route him to the Signup page. Here is the new SplashPage code:

We are using Firebase’s onAuthStateChanged listener to get the current authentication state of the user. If the user is authenticated, we route them to the Home screen, and if not, we send them to the SignUp screen. Since we’re not logged in at the moment, you should see the loading screen for a brief moment, and then routed to the SignUp screen at first.

Now we need to create a new user. For that we use the createUserWithEmailAndPassword(email, password) method and pass the email and password we stored in our states. If there are any errors, it will be displayed or else, after validations the user will be navigated to the Home screen, which shows a successful signup.

Here is the new Signup page:

We are on the Home page and is logged in. However, we don’t have any information about the logged-in user, do we? Answer: We get the current user details from firebase.

Now, even after reloading the app, it stays at the Home page instead of Signup page as the user is already authenticated.

The last thing we need to do is to make the already signed-up users login to our app. The Login process is almost the same. We are using the signInWithEmailAndPassword(email, password) to sign in the user.

Finally, here are the screens after everything is done right.

That’s it! We have created a simple Firebase authentication app using react-native. Thank you for reading!

[button size=’medium’ style=” text=’WANT TO BUILD SOFTWARE? TALK TO US’ icon=” icon_color=” link=’https://astract.com/getstarted/’ target=’_blank’ color=” hover_color=” border_color=” hover_border_color=” background_color=” hover_background_color=” font_style=” font_weight=” text_align=” margin=”]


Author: Bello Ibrahim Damilola

Read More From Our Blog

Location

7a Milverton Rd, Eti-Osa, Lagos, Nigeria.

Email Address

hello@astract.com

Phone Number

07016504685

Connect With Us