In this article i will explain you step by step how you can add firebase to your react native application and authenticate with email

Step 1: Create a new project

• Go to this link https://console.firebase.google.com/u/0/ and create a new project

• Once project is created on dashboard you will see the following screen click on android icon to create new android app

  

• You will see below screen

  

• You can find the package name in the AndroidManifest.xml file which is located in android/app/src/main/.

• You will also need the Debug signing certificate SHA-1. You can get that by running the following command in the project directory.

   cd android && ./gradlew signingReport

  Copy the SHA1 value and paste it into the Firebase console.

• Now, proceeding to the next step, you will have to download the google-services.json file. You should place this file in the android/app directory.

  

• After adding the file, proceed to the next step. It will ask you to add some configurations to Root-level (project-level) Gradle file (/build.gradle).

buildscript {
  repositories {
    // Make sure that you have the following two repositories
    google()  // Google's Maven repository
    mavenCentral()  // Maven Central repository

  }
  dependencies {
    ...
    // Add the dependency for the Google services Gradle plugin
    classpath 'com.google.gms:google-services:4.3.13'

  }
}

allprojects {
  ...
  repositories {
    // Make sure that you have the following two repositories
    google()  // Google's Maven repository
    mavenCentral()  // Maven Central repository

  }
}

• Add the configuration to the Module (app-level) Gradle file (//build.gradle):

plugins {
  id 'com.android.application'

  // Add the Google services Gradle plugin
  id 'com.google.gms.google-services'

  ...
}

dependencies {
  // Add these lines
  implementation platform('com.google.firebase:firebase-bom:30.4.1')
  implementation 'com.google.firebase:firebase-auth'
}

• As a next step install the following package in your application

npm install @react-native-firebase/app

Step 2: Setting up firebase email authentication

• Go to the Authentication section in the dashboard and click on the Get Started button. This will enable the authentication module in your project.

• Next, you should enable email authentication in the sign-in methods. Once you’ve enabled it, press Save.

• Install the @react-native-firebase/auth in your project.

  npm install @react-native-firebase/auth --save

Step 3: Email authentication in our react native application

• You can add following piece of code inside function in any component your prefer to have create user using email and password

import auth from "@react-native-firebase/auth";
const createUser = (email, password) => {
  try {
    auth().createUserWithEmailAndPassword(email, password);
  } catch (error) {
    alert(error);
  }
};

• Add following piece of code for signin

import auth from "@react-native-firebase/auth";
const signin = (email, password) => {
  try {
    auth().signInWithEmailAndPassword(email, password);
  } catch (error) {
    alert(error);
  }
};

• Once you are authenticated you can check whether user is authenticated by following piece of code

import auth from "@react-native-firebase/auth";

auth().onAuthStateChanged((user) => {
  if (user) {
    console.log("Authenticated");
  } else {
    console.log("Not authenticated");
  }
});

• You can logout from your application using following code

import auth from "@react-native-firebase/auth";

auth().signOut();