Firebase Authentication with Phone Number OTP in Android
Many apps require their users to be authenticated. So for the purpose of authenticating the apps uses phone number authentication inside their apps. In phone authentication, the user has to verify his identity with his phone number. Inside the app user has to enter his phone number after that he will receive a verification code on his mobile number. He has to enter that verification code and verify his identity. So this is how phone authentication works. Firebase provides so many ways for authentication users such as Google, Email and Password, Phone, and many more. In this article, we will take a look at the implementation of Phone Authentication inside our App using Firebase.
What we are going to build in this article?
We will be creating a simple application which is having two screens. The first screen will be our Verification screen on which the user has to add his phone number. After adding his phone number, the user will click on the Get OTP button after that Firebase will send OTP on that number which is mentioned above. After receiving that OTP user has to enter that OTP in the below text filed and click on the below button to verify with entered OTP. After clicking on the verify button Firebase will verify that OTP and allow the user to enter into the home screen only when entered OTP is correct else the user will get an error message. Note that we are going to implement this project using the Java language.
Step by Step Implementation
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.
Step 2: Connect your app to Firebase
After creating a new project in Android Studio connect your app to Firebase. For connecting your app to firebase. Navigate to Tools on the top bar. After that click on Firebase. A new window will open on the right side. Inside that window click on Authentication and then email and password authentication.
After clicking on email and password authentication you will get to see the below screen. Inside this screen click on the first option connect to firebase and after that click on the second option to add Firebase authentication to your app.
Step 3: Verify that dependency for Firebase authentication is added inside your app
After connecting your app to Firebase. Make sure to add this dependency in your build.gradle file if not added. After adding this dependency sync your project.
Note: Make sure to add the exact dependency version in the above image because the latest dependency is not having the implementation for auto-detection of OTP.
Step 4: Working with the activity_main.xml file
Go to the activity_main.xml file and refer to the following code. Below is the code for the activity_main.xml file.
Step 5: Add permissions for the internet in your Manifest.xml file
Navigate to the app > AndroidManifest.xml file and add the below permissions to it.
Step 6: Create a new Activity for our Home Page
Navigate to the app > java > your app’s package name > Right-click on your app’s package name and click on New > Activity > Empty Activity and name your activity. Here we have given it a name as HomeActivity.
Step 7: Working with the MainActivity.java file
Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.
Step 8: Working on HomeActivity
Now we have authenticated our user and move towards our Home Activity. Now we will display a welcome message to our user on successful authentication. For this Navigate to the app > res > layout > activity_home.xml and add the below code to it.
Step 9: Enable Firebase Phone Authentication in our Firebase Console
For enabling Phone authentication in the Firebase console go to the Firebase Console. Now click on Go to Console option and navigate to your project. After that click on your project. You can get to see the below screen.
After clicking on Authentication you will get to see the below screen. On this screen click on the Sign-in method tab.
After clicking on Sign in-method you will get to see below list of authentication screens. Click on the Phone option and enable it.
Click on the Phone option and you will get to see the below pop-up screen. Inside this screen click on the enable option and save it.
Note: For getting OTP don’t enter your phone number with country code because we are already adding that country code in our code itself.