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

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

1374 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>

<?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>

MainActivity.Java

package com.androindian.fcmotp;

import androidx.appcompat.app.AppCompatActivity;
import androidx.databinding.DataBindingUtil;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;

import com.androindian.fcmotp.databinding.ActivityMainBinding;

public class MainActivity extends AppCompatActivity {


    ActivityMainBinding binding;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding= DataBindingUtil.setContentView(
                MainActivity.this,R.layout.activity_main);


        binding.button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                String mobile = binding.mobile.getText().toString().trim();

                if(mobile.isEmpty() || mobile.length() < 10){
                    binding.mobile.setError("Enter a valid mobile");
                    binding.mobile.requestFocus();
                    return;
                }

                Intent intent = new Intent(MainActivity.this, VerifyPhoneActivity.class);
                intent.putExtra("mobile", mobile);
                startActivity(intent);
            }
        });
    }

}

package com.androindian.fcmotp;

import androidx.appcompat.app.AppCompatActivity;

import androidx.databinding.DataBindingUtil;

import android.content.Intent;

import android.os.Bundle;

import android.view.View;

import com.androindian.fcmotp.databinding.ActivityMainBinding;

public class MainActivity extends AppCompatActivity {

ActivityMainBinding binding;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

binding= DataBindingUtil.setContentView(

MainActivity.this,R.layout.activity_main);

binding.button.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

String mobile = binding.mobile.getText().toString().trim();

if(mobile.isEmpty() || mobile.length() < 10){

binding.mobile.setError("Enter a valid mobile");

binding.mobile.requestFocus();

return;

}

Intent intent = new Intent(MainActivity.this, VerifyPhoneActivity.class);

intent.putExtra("mobile", mobile);

startActivity(intent);

}

});

}

VerifyPhoneActivity.Java

package com.androindian.fcmotp;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;

import com.google.android.gms.tasks.OnCompleteListener;
import com.google.android.gms.tasks.Task;
import com.google.android.gms.tasks.TaskExecutors;
import com.google.android.material.snackbar.Snackbar;
import com.google.firebase.FirebaseException;
import com.google.firebase.auth.AuthResult;
import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.auth.FirebaseAuthInvalidCredentialsException;
import com.google.firebase.auth.PhoneAuthCredential;
import com.google.firebase.auth.PhoneAuthProvider;

import java.util.concurrent.TimeUnit;

public class VerifyPhoneActivity extends AppCompatActivity {

      private String mVerificationId;
      private EditText editTextCode;
      private FirebaseAuth mAuth;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_verify_phone);

        //initializing objects
        mAuth = FirebaseAuth.getInstance();
        editTextCode = findViewById(R.id.editTextCode);


        //getting mobile number from the previous activity
        //and sending the verification code to the number
        Intent intent = getIntent();
        String mobile = intent.getStringExtra("mobile");
        sendVerificationCode(mobile);


        //if the automatic sms detection did not work, user can also enter the code manually
        //so adding a click listener to the button
        findViewById(R.id.buttonSignIn).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String code = editTextCode.getText().toString().trim();
                if (code.isEmpty() || code.length() < 6) {
                    editTextCode.setError("Enter valid code");
                    editTextCode.requestFocus();
                    return;
                }

                //verifying the code entered manually
                verifyVerificationCode(code);
            }
        });

    }

    //the method is sending verification code
    //the country id is concatenated
    //you can take the country id as user input as well
    private void sendVerificationCode(String mobile) {
        PhoneAuthProvider.getInstance().verifyPhoneNumber(
                "+91" + mobile,
                60,
                TimeUnit.SECONDS,
                TaskExecutors.MAIN_THREAD,
                mCallbacks);
    }


    //the callback to detect the verification status
    private PhoneAuthProvider.OnVerificationStateChangedCallbacks mCallbacks = new PhoneAuthProvider.OnVerificationStateChangedCallbacks() {
        @Override
        public void onVerificationCompleted(PhoneAuthCredential phoneAuthCredential) {

            //Getting the code sent by SMS
            String code = phoneAuthCredential.getSmsCode();

            //sometime the code is not detected automatically
            //in this case the code will be null
            //so user has to manually enter the code
            if (code != null) {
                editTextCode.setText(code);
                //verifying the code
                verifyVerificationCode(code);
            }
        }

        @Override
        public void onVerificationFailed(FirebaseException e) {
            Toast.makeText(VerifyPhoneActivity.this, e.getMessage(), Toast.LENGTH_LONG).show();
        }

        @Override
        public void onCodeSent(String s, PhoneAuthProvider.ForceResendingToken forceResendingToken) {
            super.onCodeSent(s, forceResendingToken);

            //storing the verification id that is sent to the user
            mVerificationId = s;
        }
    };


    private void verifyVerificationCode(String code) {
        //creating the credential
        PhoneAuthCredential credential = PhoneAuthProvider.getCredential(mVerificationId, code);

        //signing the user
        signInWithPhoneAuthCredential(credential);
    }

    private void signInWithPhoneAuthCredential(PhoneAuthCredential credential) {
        mAuth.signInWithCredential(credential)
                .addOnCompleteListener(VerifyPhoneActivity.this, new OnCompleteListener<AuthResult>() {
                    @Override
                    public void onComplete(@NonNull Task<AuthResult> task) {
                        if (task.isSuccessful()) {
                            //verification successful we will start the profile activity
                            Intent intent = new Intent(VerifyPhoneActivity.this, ProfileActivity.class);
                            intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_CLEAR_TASK);
                            startActivity(intent);

                        } else {

                            //verification unsuccessful.. display an error message

                            String message = "Somthing is wrong, we will fix it soon...";

                            if (task.getException() instanceof FirebaseAuthInvalidCredentialsException) {
                                message = "Invalid code entered...";
                            }

                            Snackbar snackbar = Snackbar.make(findViewById(R.id.parent), message, Snackbar.LENGTH_LONG);
                            snackbar.setAction("Dismiss", new View.OnClickListener() {
                                @Override
                                public void onClick(View v) {

                                }
                            });
                            snackbar.show();
                        }
                    }
                });
    }

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

package com.androindian.fcmotp;

import androidx.annotation.NonNull;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;

import android.os.Bundle;

import android.view.View;

import android.widget.EditText;

import android.widget.Toast;

import com.google.android.gms.tasks.OnCompleteListener;

import com.google.android.gms.tasks.Task;

import com.google.android.gms.tasks.TaskExecutors;

import com.google.android.material.snackbar.Snackbar;

import com.google.firebase.FirebaseException;

import com.google.firebase.auth.AuthResult;

import com.google.firebase.auth.FirebaseAuth;

import com.google.firebase.auth.FirebaseAuthInvalidCredentialsException;

import com.google.firebase.auth.PhoneAuthCredential;

import com.google.firebase.auth.PhoneAuthProvider;

import java.util.concurrent.TimeUnit;

public class VerifyPhoneActivity extends AppCompatActivity {

private String mVerificationId;

private EditText editTextCode;

private FirebaseAuth mAuth;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_verify_phone);

//initializing objects

mAuth = FirebaseAuth.getInstance();

editTextCode = findViewById(R.id.editTextCode);

//getting mobile number from the previous activity

//and sending the verification code to the number

Intent intent = getIntent();

String mobile = intent.getStringExtra("mobile");

sendVerificationCode(mobile);

//if the automatic sms detection did not work, user can also enter the code manually

//so adding a click listener to the button

findViewById(R.id.buttonSignIn).setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

String code = editTextCode.getText().toString().trim();

if (code.isEmpty() || code.length() < 6) {

editTextCode.setError("Enter valid code");

editTextCode.requestFocus();

return;

}

//verifying the code entered manually

verifyVerificationCode(code);

}

});

}

//the method is sending verification code

//the country id is concatenated

//you can take the country id as user input as well

private void sendVerificationCode(String mobile) {

PhoneAuthProvider.getInstance().verifyPhoneNumber(

"+91" + mobile,

60,

TimeUnit.SECONDS,

TaskExecutors.MAIN_THREAD,

mCallbacks);

}

//the callback to detect the verification status

private PhoneAuthProvider.OnVerificationStateChangedCallbacks mCallbacks = new PhoneAuthProvider.OnVerificationStateChangedCallbacks() {

@Override

public void onVerificationCompleted(PhoneAuthCredential phoneAuthCredential) {

//Getting the code sent by SMS

String code = phoneAuthCredential.getSmsCode();

//sometime the code is not detected automatically

//in this case the code will be null

//so user has to manually enter the code

if (code != null) {

editTextCode.setText(code);

//verifying the code

verifyVerificationCode(code);

}

@Override

public void onVerificationFailed(FirebaseException e) {

Toast.makeText(VerifyPhoneActivity.this, e.getMessage(), Toast.LENGTH_LONG).show();

}

@Override

public void onCodeSent(String s, PhoneAuthProvider.ForceResendingToken forceResendingToken) {

super.onCodeSent(s, forceResendingToken);

//storing the verification id that is sent to the user

mVerificationId = s;

}

};

private void verifyVerificationCode(String code) {

//creating the credential

PhoneAuthCredential credential = PhoneAuthProvider.getCredential(mVerificationId, code);

//signing the user

signInWithPhoneAuthCredential(credential);

}

private void signInWithPhoneAuthCredential(PhoneAuthCredential credential) {

mAuth.signInWithCredential(credential)

.addOnCompleteListener(VerifyPhoneActivity.this, new OnCompleteListener<AuthResult>() {

@Override

public void onComplete(@NonNull Task<AuthResult> task) {

if (task.isSuccessful()) {

//verification successful we will start the profile activity

Intent intent = new Intent(VerifyPhoneActivity.this, ProfileActivity.class);

intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_CLEAR_TASK);

startActivity(intent);

} else {

//verification unsuccessful.. display an error message

String message = "Somthing is wrong, we will fix it soon...";

if (task.getException() instanceof FirebaseAuthInvalidCredentialsException) {

message = "Invalid code entered...";

}

Snackbar snackbar = Snackbar.make(findViewById(R.id.parent), message, Snackbar.LENGTH_LONG);

snackbar.setAction("Dismiss", new View.OnClickListener() {

@Override

public void onClick(View v) {

}

});

snackbar.show();

}

});

}

activity_verify_phone.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".VerifyPhoneActivity">

    <RelativeLayout
        android:id="@+id/relativeLayout"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="@color/colorPrimary"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="120dp"
            android:layout_height="120dp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:background="@mipmap/ic_launcher" />

    </RelativeLayout>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_below="@id/relativeLayout"
        android:layout_marginTop="-50dp"
        android:background="@mipmap/ic_launcher" />

    <RelativeLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/imageView"
        android:orientation="vertical"
        android:padding="20dp">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="25dp"
            android:text="Wait for the code I sent You"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Headline"
            android:textColor="@color/colorPrimary" />

        <ProgressBar
            android:id="@+id/progressbar"
            android:layout_below="@id/textView"
            android:layout_centerHorizontal="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <EditText
            android:id="@+id/editTextCode"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_below="@id/progressbar"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:digits="0123456789"
            android:drawablePadding="10dp"
            android:hint="enter verification code"
            android:inputType="phone"
            android:maxLength="10" />

        <Button
            android:id="@+id/buttonSignIn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/editTextCode"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="15dp"
            android:background="@color/colorPrimaryDark"
            android:text="Sign In"
            android:textAllCaps="false"
            android:textColor="#cdd8f1" />

    </RelativeLayout>

</RelativeLayout>

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

<RelativeLayout 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"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".VerifyPhoneActivity">

<RelativeLayout

android:id="@+id/relativeLayout"

android:layout_width="match_parent"

android:layout_height="200dp"

android:background="@color/colorPrimary"

android:orientation="horizontal">

<ImageView

android:layout_width="120dp"

android:layout_height="120dp"

android:layout_centerHorizontal="true"

android:layout_centerVertical="true"

android:background="@mipmap/ic_launcher" />

</RelativeLayout>

<ImageView

android:id="@+id/imageView"

android:layout_width="match_parent"

android:layout_height="120dp"

android:layout_below="@id/relativeLayout"

android:layout_marginTop="-50dp"

android:background="@mipmap/ic_launcher" />

<RelativeLayout

android:id="@+id/container"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_below="@id/imageView"

android:orientation="vertical"

android:padding="20dp">

<TextView

android:id="@+id/textView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerHorizontal="true"

android:layout_marginTop="25dp"

android:text="Wait for the code I sent You"

android:textAppearance="@style/Base.TextAppearance.AppCompat.Headline"

android:textColor="@color/colorPrimary" />

<ProgressBar

android:id="@+id/progressbar"

android:layout_below="@id/textView"

android:layout_centerHorizontal="true"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

<EditText

android:id="@+id/editTextCode"

android:layout_width="200dp"

android:layout_height="wrap_content"

android:layout_below="@id/progressbar"

android:layout_centerHorizontal="true"

android:layout_marginTop="10dp"

android:digits="0123456789"

android:drawablePadding="10dp"

android:hint="enter verification code"

android:inputType="phone"

android:maxLength="10" />

<Button

android:id="@+id/buttonSignIn"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@id/editTextCode"

android:layout_centerHorizontal="true"

android:layout_marginTop="15dp"

android:background="@color/colorPrimaryDark"

android:text="Sign In"

android:textAllCaps="false"

android:textColor="#cdd8f1" />

</RelativeLayout>

ProfileActivity.java

package com.androindian.fcmotp;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class ProfileActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_profile);
    }
}

package com.androindian.fcmotp;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class ProfileActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_profile);

}

activity_profile.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ProfileActivity">

</androidx.constraintlayout.widget.ConstraintLayout>