How to set up Email Authentication using React Native + Firebase Auth + React Navigation

You must be aware that with the help of React Native, you can make smooth and flexible native applications. So here we will take advantage of this and build an application using react native + firebase. With this tutorial's help, you will learn how you can implement email authentication by using React Native+firebase+react navigation. So let's get started.

This app consists of options like

Sign up

Login/Logout

Forgot password

User Profile.

Steps for building React Native app by implementing firebase authentication:

Creating a React Native app: the first and the most basic step is to create the react native app with the help of code mentioned below:

react-native init FirebaseAuth

Installing dependencies for navigation: to help users navigate to different screens there is a requirement of stack navigation.

npm install react-native-gesture-handler react-native-safe-area-context @react-navigation/native @react-navigation/stack

After this step is done react native firebase auth library has to be installed so that implementation of authentication with firebase can be done smoothly.

npm install @react-native-firebase/auth

Set up firebase project: for creation of firebase project go to the website’s official page and click on get started. When you will click on get started you will be able to start the new project. After this step is completed you will be redirected to dashboard immediately and there you can use the authentication service. For understanding the process you can have a look at the images.

Now for setting up the authentication for your email/password you need to follow some steps as mentioned below:

Click on the authentication on the side menu

Select Sign-in Methods

Select email and passwords

Enable Email and Password Authentication by toggling the button

Provide the support mail

Save

// FirebaseInfo.js

import firebase from @react-native-firebase/auth

const firebaseInfo={

apiKey:'Your API Key',

appId:'Your App Id',

messagingSenderId:'Your Sender Id',

projectId:'Your Project Id',

}

firebase.initializeApp(firebaseinfo)

Creating the components: we will create the following components for the application

Sign up

Login

Logout

Forget password

User profile

Sign up: after the user has entered all the details he/she will click on the signup button which will check thoroughly before sign up happens if the user has done any error while filling up the details or not

const OnSignUp= async(email,password)=>{

Keyboard.dismiss()

if(!email)

{

Alert.alert("Email can't be empty");

}

else if(!EmailRegex.test(email))

{

Alert.alert("Email is not in the right format")

}

else if(!password && password.trim() && password.length<5)

{

Alert.alert("Password is too weak and required min 6 characters")

}

else{

try{

const Email=await firebase.auth().createUserWithEmailAndPassword(email,password)

Email.user.updateProfile({displayName:username})

Email.user.reload()

setusername("")

setemail("")

setpassword("")

props.navigation.navigate('Login')

}

catch(error)

{

console.log("error", error.message, error.code)

switch (error.code)

{

case "auth/weak-password":

Alert.alert("Password is invalid,requires min 6 char")

break;

case "auth/email-already-in-use":

Alert.alert("Email is already registered")

break;

default:

Alert.alert("Error")

}

}

}

}

Login: the login option is quite similar to the signup option which will verify if the user is valid or not

const AuthUser = await firebase.auth().signInWithEmailAndPassword(email, password)

Logout: with the help of logout option the user can sign out from the app

await firebase.auth().signOut()

Forget password: with the help of forget password you can recover your password by using email where the link will be shared by firebase so that you can easily reset the password

await firebase.auth().sendPasswordResetEmail(email)

User profile: with the help of user profile the details of the user will be shown such as the user name and the Email id used by the user at the time of signup process.

var EmailId=firebase.auth().currentUser.email;

var User=firebase.auth().currentUser.displayName;

I hope that with the help of this tutorial, you will be able to set up react native firebase auth for implementing email authentication, and your purpose for landing on this tutorial is fulfilled. These were the basic steps you have seen so that implementation will be very easy for you.