Hello, everyone! My name is Rohit, and welcome
back to my channel. A few months ago, I created a video on OTP authentication using Firebase
and React Native Expo. However, the packages used in that video have since been deprecated.
Therefore, I bring you this updated video. But before we dive into the details, let's first check
out the demo of the final output of our project. Here, I am using this Expo application in its
built state. After entering the phone number and clicking the button, Firebase will verify if
you are human or not. Following that, you'll see an input field where you need to enter the code
you received from Firebase. If you're a new user, a details page will appear, prompting you to fill
in information like your name, date of birth, and gender. This step is one-time only for
new users. Once you click the button, you'll be directed to the dashboard page, where you'll
find a logout button. This marks the completion of our OTP authentication, a method commonly
employed in many popular applications today. Notice that when I log in a second
time with the same mobile number, there's no need to fill out the
details form again. Instead, after OTP verification, you'll be
navigated straight to the dashboard page. That's exactly what we're going to build
in this video. So, buckle up your seatbelt, grab a cup of coffee, and let's dive into the
exciting process together. Let's get started! —--------- First, initialize a react native expo
project. Select the black template, name your application, and continue
to dependencies downloading. Now, swiftly move to the newly
created project directory. In this project, we will use
the stack navigation. For this let’s install all the dependencies of the
react-navigation required in this project. Now, let’s install the dependencies
for the stack navigation. We have to import the react native gesture handler
to the top of the App.js file. So, open this project in your favorite code editor and paste
the documented code line to the top of App.js. Next, we will install the React Native Firebase
package. We'll utilize the bare React Native packages to enhance the robustness of our code.
During this process, we'll install three packages. First, the Firebase App package; second, the
Firebase Auth package for handling authentication, and finally, the Firebase Firestore package
for adding the user to the database. You can observe that these are the dependencies
and versions I am using in this project. Now, let's set up our Firebase account.
Simply go to Google, search for Firebase, click on the official link, and
then click on "Get Started." Add a new project and name it. Select
the default account for Google Analytics, then click on "Create Account." Firebase will
take 20 to 30 seconds to create your project. Click on "Continue," and you'll
see your Firebase dashboard. Here, you can click on iOS if you are building
the app for iOS. Since I am building an app for Android, I'll click on Android. Now, you have
to fill in all these details. Don't worry; we'll fill in all the details as soon as
we know the input information. To do this, we need to build the Expo app. To build
an Expo app, follow the official docs. Search for "Development Build Expo," click
on the official link, and follow the official docs. These builds will give you an idea of how
your app looks in production. First, we have to install a few more dependencies according
to the official docs. Let's install those. Now, you have to log in to your
Expo account in the terminal window using the command `eas login`. If you
don't have an account, go to expo.dev, create your account first, and then log in
to your terminal using the same credentials. Finally, copy and paste this
command to build your app. You'll be asked a few questions. Just hit enter or press 'y' and continue. We'll leave
the default information as it is here. Now, our app is building. You may have
to wait for 5-10 minutes. If by chance you encounter any errors, then rebuild
the app using the same command because sometimes internal server issues can cause errors. —--------------- Our app build is complete now. To test your app,
you can use your phone’s camera or any other QR code scanner to scan this QR code. Don’t use
your Expo Go app to scan this QR code. After scanning this QR code, you will see a build page.
From here, simply download and install the build. Next, go back to your terminal and
run the command npx expo start. Here, you will see another QR code. You can
scan this QR code with the Expo Go app. The Expo Go app will automatically connect
the build app with the localhost server. Okay! This is the rendering of the
default code. It means our app setup and build are correct, and we
can proceed to further steps. You can also change the text here, and you will see the render will be instant. The Expo
team really did some amazing work here. Now, if you go to the official docs of
React Native Firebase and scroll down, you will see that we need to add
a plugin to our app.json file. So, copy this plugin code and paste
it into our app.json file. Here, we are setting this up in the
Expo app, so we have to follow some extra steps. You can see that we have
to add this google service file in the android section of the app.json file. But
what is this google-service.json file? Go back to the Firebase Android setup
page. From there, we will get the google-service.json file. But we have
to fill in all this information first. For the Android package name, go to the
Android section of the app.json file, since we built the app, you will see the package
name. Copy and paste the package name here. Give your app a nickname. Now, for the SHA-1 key, go
to the terminal and stop the localhost server first. Then
run the command eas credentials. Select Android. Since we are running the project in
development mode, I am selecting development. Select the keystore option. You will see the default credentials
here, but we will create a new one here. Select setup a new keystore and hit enter. Assign the key a name. I am
leaving it as the suggested name. I’ll make this default, so
enter 'y' and hit enter. Generate a new Android keystore? Yes. You will see two Android keystores
here. We'll add SHA-1 key from both these keystores to the Firebase Android setup. Click on settings, then project settings. Scroll down and add the left
SHA-1 key. And click on save. Click on download google-service.json file and place this JSON file in the
root directory of our project. Now, add the Google service file path to
the Android section of the app.json file. Now go to Firebase and enable
the OTP authentication first. Next, enable the Firestore database. Here I’ll continue with the test mode, but
you can go with the production mode. But don’t forget to change the rule; otherwise,
the data won’t get saved in the database. Keep one thing in mind: any
changes to the app.json file, we have to build the app again.
Like if you change the code, you may not need to build your app. But if you
do any changes to the app.json file and save it, in order to make it effective, you have to build
your app again. So, using the same command, we will build our app again. Yes, it will take
5 to 10 minutes to build, and we have to wait. Okay! Our build is complete now. Repeat the steps
again to download and install the new build. Run the command npx expo start. Scan
the QR code with the Expo Go app. The Expo Go app will connect the
build with the localhost server. Here we go! Our application setup is complete.
In our app, first, we need a login screen, where the user will enter their phone number
and enter the OTP code. The next screen will be the detail screen where the new user will
have to fill in the name, date of birth, and gender. This data will be saved to the
Firestore database. And the last screen will be the dashboard screen. The dashboard
screen will have the feature to logout. So, now create the src folder and
inside the folder create three files: Login.js, Detail.js, and Dashboard.js. Create a basic React Native template
code in each of these files. It would be helpful when we import these components
in the App.js file for stack navigation. Now, let’s write the code for the App.js file. —-------------------------------- In the beginning, we import some special
functions from React Native libraries that make our app work smoothly. Then, we
define how our navigation works using a thing called 'StackNavigator.' Think of it
like creating a map for our app to follow. We have three screens in our app: Login, Detail,
and Dashboard. App.js sets the initial route to the Login screen, meaning that when you
open the app, you start at the login page. We hide the headers (the top part of the screen) for all these screens because we want a
clean look without unnecessary titles. In the end, we wrap everything in a
'NavigationContainer.' Think of it like putting our app inside a special
container that helps with navigation. So, App.js is like the boss, telling our app where to go and what to show. It's a crucial
piece that ties everything together! —---------- The code imports some modules from React, React
Native, Firebase, and React Navigation. These modules provide various features and
components for building a mobile app. The code defines a function called Login, which is the default export of the file. This
function is a React component that renders the user interface for logging in with a
phone number and a code sent by Firebase. The code uses some state variables
to store the phone number, the code, and the confirmation object from Firebase. It also uses a navigation object to navigate
between different screens in the app. The code defines two async functions: signInWithPhoneNumber and confirmCode.
These functions use the Firebase auth module to sign in the user with their phone
number and verify the code they enter. The code also checks if the user
is new or existing by querying the Firestore database. Depending on
the result, it navigates to either the Dashboard or the Detail screen,
passing the user ID as a parameter. The code returns a JSX element
that represents the view of the login screen. It uses some React Native
components such as View, Text, TextInput, and TouchableOpacity to display and interact
with the user. It also uses some conditional rendering to show different elements depending on
whether the confirmation object is null or not. —---- Next, import some modules from React,
React Native, and Firebase. These modules provide various features and
components for building a mobile app. The code defines a function called Detail,
which is the default export of the file. This function is a React component that
renders the user interface for entering some personal details and saving
them to the Firebase database. Next, define some state variables
to store the name, date of birth, and gender of the user. It also receives the user ID from the route parameters and
the navigation object from the props. Now define an async function called
saveDetails, which tries to save the user details to the Firestore database using
the user ID as the document ID. If successful, it navigates to the Dashboard screen. If
not, it logs the error to the console. The code returns a JSX element that represents
the view of the detail screen. It uses some React Native components such as View, Text, TextInput,
and TouchableOpacity to display and interact with the user. It also uses some styles to
customize the appearance of the elements. —------ The code defines a function called Dashboard,
which is the default export of the file. This function is a React component that renders
the user interface for the dashboard screen, where the user can see a welcome
message and a logout button. The code uses a navigation object to
navigate between different screens in the app. It also defines an async
function called handleLogout, which tries to sign out the user from Firebase
and reset the navigation stack to the login screen. If there is an error during the logout
process, it logs the error to the console. The code returns a JSX element that represents
the view of the dashboard screen. It uses some React Native components such as View, Text,
and TouchableOpacity to display and interact with the user. It also uses some styles to
customize the appearance of the elements. —-------------------- We are all set. Now, let’s test our application. OTP verification is successful. The
user gets registered with Firebase Auth, and the data also gets saved
to the Firestore database. Let’s login again with the same mobile number. If you log in again with the
same number, you won’t see the details page as the information
is already saved with the same UID. That’s it for this video. I hope this video was
helpful. Let me know your opinion in the comment section. Thanks for watching this video.
See you in my next react native expo video.
