This comprehensive guide will help you how to implement and set up email authentication and React Navigation using React Native + Firebase auth.

1. Set up Email
Authentication Using
React Native +
Firebase Auth + React
Navigation
www.bacancytechnology.com

2. Build Rect Native App
Install required dependencies for
Navigation
Setting Up Firebase Project
Creating Components
Table of Contents
1. Overview: React Native Firebase Tutorial
2. What are we building?
3. Firebase Authentication Example: Steps
to Implement React Native + Firebase Auth
4. Conclusion

3. Overview

4. This beginners’ guide will help you
build a React Native application and
integrate it with Firebase. Furthermore,
we will set up email authentication
with Firebase in React Native. We all
have heard how smoothly we can build
native applications using React Native.
Let’s combine its flexibility with
Firebase and get started with this
tutorial to implement email
authentication and React Navigation
using React Native + Firebase auth.
https://youtu.be/F66J0_TrjDM

5. What are we
building?

6. We are building a basic React Native
application integrated with Firebase
Authentication that consists of Sign Up,
Login/Logout, Forgot Password, and User
Profile.
Here is the flow for authenticating a user –
whenever the user accesses the app, it will
contain the authentication state, and based
on that state; the user will have access to the
screen or the services of the app. Based on
this condition, authenticated and non-
authenticated users will have access to
different screens accordingly. Here in our
demo, we will implement authentication on
the Profile screen. It means that only an
authenticated user will visit its Profile page;
else, it will have only access to Sign Up and
Sign In screens.
Without further ado, let’s start coding!

7. React Native +
Firebase Auth
Example: Steps
to Implement
Firebase
Authentication

8. You can visit here – Github Repository and
check the code or go through this tutorial.
Follow these steps to build a React Native
app and implement Firebase
Authentication.
Create React Native App
Initially, we will create a React Native app using-
react-native init FirebaseAuth

9. Install required
dependencies for
Navigation
We will require stack navigation for
navigating through different screens.
npm install react-native-gesture-handler react-
native-safe-area-context @react-
navigation/native @react-navigation/stack
After this, we need to install the React
Native Firebase auth library to implement
authentication with Firebase in our react
app.
npm install @react-native-firebase/auth
Let’s set-up our Firebase Project.

10. Setting Up Firebase
Project
First, we need to create a Firebase Project.
Visit the official Firebase website and click
on Get Started. There you can create your
new project. After that, you will be
redirected to the Dashboard to use
Authentication Service.
Here are the images that will help you
understand the above process.

11. Click on the authentication on the side
menu
Select Sign-in Methods
In our app, we have to set up authentication
for email/password. For that, follow these
steps-

12. Select email and passwords
Enable Email and Password
Authentication by toggling the button
Provide the support mail
Save
I’ve attached an image below for your
reference.
To configure our app with Firebase, go
to the Project Dashboard, Add an app to
the project, and follow the proper steps.

13. Now we have all the details related to
Firebase configuration. Store these
configurations in a file named
FirebaseInfo.js

14. 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',
}
// FirebaseInfo.js
And then initialize the app using:
firebase.initializeApp(firebaseinfo)

15. Creating Components
Let’s get started with creating
components for our application. As it’s
basic authentication, it will consist of the
following components-
SignUp, Login/Logout, ResetPassword,
User Details of the currently logged-in
user, and a Navigator to move between
screens.

16. After entering the required details,
whenever a user clicks on the SignUp
button, it will validate and check if there is
an error related to the email registration.
Here is the logic for implementing the Sign
Up process.
Sign Up
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)
{

17. Alert.alert("Password is too weak and
required min 6 characters")
}
else{
try{
const Email=await
firebase.auth().createUserWithEmailAndPas
sword(email,password)
Email.user.updateProfile({displayName:use
rname})
Email.user.reload()
setusername("")
setemail("")
setpassword("")
props.navigation.navigate('Login')
}
catch(error)
{

18. 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")
}
}
}
}

19. Log In
Similarly, the Login screen will verify
if the user is authenticated or not. It
can be verified with the given
parameters (email, password):
const AuthUser = await
firebase.auth().signInWithEmailAndPa
ssword(email, password)
Log Out
For Log Out, we will revoke the access
from the user and let him sign out
from the app with this:
await firebase.auth().signOut()

20. Forget Password
If you don't remember your password,
Forget Password screen lets you recover
your password using your email-id where
Firebase will share a link to reset your
password using:
await
firebase.auth().sendPasswordResetEm
ail(email)

21. User Profile
The user profile will display user details (of
the logged-in user) such as email-id and
user name entered a48t the time of Sign
Up:
var
EmailId=firebase.auth().currentUser.email;
var
User=firebase.auth().currentUser.displayNa
me;

22. Conclusion
This was about setting up email/ password
authentication and React Navigation using
React Native + Firebase Auth. I hope the
purpose for landing on this tutorial has
been fulfilled as you've expected. If you are
looking to develop one-of-a-kind React
Native application, then get in touch with
us to hire React Native developer from us
to leverage to leverage our top-notch React
Native app development services.

23. Thank You
www.bacancytechnology.com