How to implement phone number Verification by OTP using Firebase in Android

by androindian · Published December 27, 2019 · Updated December 29, 2019

573 views.

Hey guys! In this tutorial, I am covering user verification by phone number by sending OTP to the mobile using Firebase authentication.

You can use Firebase Authentication to enable a user to sign in to your app by sending an SMS to user’s device which contains a one-time-password. The user then enters this OTP in your app, if the OTP matches then sign in is successful and the user can then access your app.

Firebase Authentication
Firebase is a Google product which provides backend services, SDKs, and ready-made UI libraries to authenticate users to your app. It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more.

You may authenticate users of your app either by using Firebase UI which provides a complete user interface for sign in and authentication or you can integrate Firebase SDK manually into your app.

App overview
The “OTP Authentication” app will consist of two Activities MainActivity and SignedIn. MainActivity activity will have two edit texts, one for the phone number and the other for received OTP, Also it will have two buttons, one to generate OTP and other to verify OTP. If the OTP match is successful then it will open SignedIn activity via Intent. If the OTP does not match then it will pop a toast message, “Incorrect OTP”.

SignedIn activity will include a text view displaying number and a sign out button on click of which app sign-outs and go back to MainActivity activity.

Setting up the project

STEP1: SET UP A NEW ANDROID PROJECT

Start Android Studio and Click on “new project”.
Give your application a name, mine is “OTP Authentication”.
click next and choose Target android device.
next, choose an empty activity to keep things simple.
next, name your Activity and click finish to build the project.

STEP2: Add Firebase to your app

Goto Firebase Console
Login with your Gmail ID
On the welcome screen of Firebase click on Add project.

Add project window will open, there enter your project name and select your country, Project id will be automatically created and then click on CREATE PROJECT button.

After this, your app’s dashboard will open. click on Add Firebase to your Android app

Now you have to register your app by providing the app package name and SHA-1 signing certificate on below screen.

To find the App package name open AndroidManifest.xml and on the top, there is the package name

To get the SHA-1 signing certificate, click on Gradle tab on the right end of Android studio to open Gradle properties> then click on :app> android> double click on signingReport. In the Monitor pane, you will see SHA1.

Copy and paste the package name and the SHA1 signing certificate in the firebase console register page. Then, click on REGISTER APP button.
Now you have to download the google-services.json file from the download config page and paste it in app module.

After than in project pane, click on Gradle Scripts> open project level build.gradle file and add google service dependency in buildscript.

open app level build.gradle add firebase dependency along with firebase authentication dependency.

implementation 'com.google.firebase:firebase-core:11.8.0'
implementation 'com.google.firebase:firebase-auth:11.8.0'

note, for android studio below 3.0.1 use compile instead of implementation.

implementation 'com.google.firebase:firebase-core:11.8.0'

implementation 'com.google.firebase:firebase-auth:11.8.0'

note, for android studio below 3.0.1 use compile instead of implementation.

and add the plugin for google service at the bottom of the file.

apply plugin: 'com.google.gms.google-services'

1	apply plugin: 'com.google.gms.google-services'

Click on Sync Now and let the Gradle build.
Now go back to Firebase console and click on Project Overview. In Discover Firebase section there is a card named Authentication, click on GET STARTED on Authentication card.

On the next page click on SETUP SIGN-IN METHOD and enable phone authentication, then SAVE it. At this point, we are done with the initial setup.

step3: EDIT androidmanifest.XML

Our application needs internet for sending OTP. So, for this reason, we have to, first of all, give permission to our app to use the internet. Add the following line to your AndroidManifest.xml inside manifest tag.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.androindian.fcmotp">

    <uses-permission android:name="android.permission.INTERNET"></uses-permission>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:usesCleartextTraffic="true"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".ProfileActivity"></activity>
        <activity android:name=".VerifyPhoneActivity" />
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.androindian.fcmotp">

<uses-permission android:name="android.permission.INTERNET"></uses-permission>

<application

android:allowBackup="true"

android:icon="@mipmap/ic_launcher"

android:label="@string/app_name"

android:usesCleartextTraffic="true"

android:roundIcon="@mipmap/ic_launcher_round"

android:supportsRtl="true"

android:theme="@style/AppTheme">

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<layout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        android:orientation="vertical">




        <EditText
            android:id="@+id/mobile"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="phone"
            android:hint="Mobile"/>


        <Button
            android:id="@+id/button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Button" />




    </LinearLayout>
</layout>