Use Phone Number Authentication using Firebase in Android

Knowing how to use Authentication using Firebase is great.

That’s when you can create hundreds of app with real-time user validation…

.. ..you will be unstoppable.

And today I have something that will help you to start using firebase:

Phone Number Authentication is a firebase guide that you can use right now.

Phone Number Authentication using Firebase

Firebase Auth provides a secure authentication system that allows the users to sign in or sign up for your application.

This enhances user experience and felt more secure.

Usually creating an app with a sign in, compatibility is much more complex than it looks.

In addition, to sign in, there are many different users flows, such as resetting passwords, creating new accounts, disable accounts, then manage multiple accounts and this list goes on.

This can be a ton of work to do for a small team.

Luckily! Google worked with Fabric and bring different of authentication features in Firebase platform. As a result, now you can use email and phone authentication as well as federated identity through major websites such as Google, Facebook, Twitter.

One thing I love about Google Firebase that It’s completely free till 10,000 authenticate users and it does not have any limit on the number of SMS can be sent. Of course, it has a limit on how many SMS can be sent on a single phone number within a time period.

What will you learn in this tutorial?

How Does Phone Number Authentication work?

Firebase Phone Number Authentication offers to authenticate user phone number and decreases the risk of a fake sign in or sign up.  This authentication method ensures that the user has physical access to that cell phone and the phone number is correct.

Phone Number Authentication flow
Image credit: Developers Blog
  1.  A user will open your app and a sign-up page presented him that asking to ask for phone number(1).
  2. A user enters their phone number in the text field.
  3. Firebase backend server will read that phone number and will send a code to that phone number(4). At the same time, it sends a hash to SMS Retriever API.
  4. Then your app will validate that code(6). If it’s correct, a new user account is created(7).

What is FirebaseUI?

We will be using FirebaseUI library for this tutorial.

you may be thinking… what is FirebaseUI?

FirebaseUI is a collection of open-source libraries that offers commonly used UI elements. Those elements can easily be added and customised to fit with your app theme.

That’s why we will use FirebaseUI so we do not have everything from scratch. You just have to integrate FirebaseUI and you will get a prebuilt sign in layouts for Phone Number Authentication and commonly used social platforms like Google, Facebook, Twitter.

Note: Before I even start this tutorial you will need to build and test this to a device with a sim card that can receive SMS and have Google Play services 10.2.x or higher install.

Let’s start

Here I’m going to break the whole tutorial into parts so you can understand clearly.

Create a Project

First of all, we have to create a new project and named it as “TestPhoneAuth”. Then click next.

create-new-project

After that check “Phone and Tablet”, as Phone Number Authentication is meant to run on API level 16 or higher. For the purpose of this tutorial, you have to choose API level 16.

set api level 16 to minimum level

Finally, choose “Empty Activity” and press next. This can take some time when it’s done you are ready to go next step.

choose blank activity

Configure Firebase Phone Authentication

There are different methods to connect an android app to Firebase, this is the simplest method I think. In this method, we will use Firebase assistant, which is an inbuilt tool for Android Studio.

Just go to Tools->Firebase.

Firebase assistant setup

After that, you will see an Assistant in the top right, left click on that a window will appear.

Click on Authentication, select Email and password authentication.

setup firebase auth using firebase assistant

First of all select (1) Connect your app to Firebase, click on connect.

NOTE: If you are not signed in on Android Studio already, you need to sign in.

firebase connected setup process

Select Create new Firebase project if it’s not already selected. Then click on connect to Firebase it will connect your project to the database.

Now select (2) Add Firebase Authentication to your app, click on set up. Once you enabled this option it will Sync build.gradle file.

Adding Fabric repositories

After that, you have to add Fabric repositories in your project level build.gradle. To do so follow this Android-> Gradle Scripts->build.gradle(Project:TestPhoneAuth).

Then add following,

maven { url 'https://maven.fabric.io/public' }

 

Adding FirebaseUI

Now you have to add FirebaseUI dependency to your app level build.gradle. To do follow this Android-> Gradle Scripts->build.gradle(Module: app).

When adding google play services or firebase-auth dependencies always check that version supported by used firebase-UI version or not. I found an awesome chart provided by samtstern.

you can check it here,

Add following dependencies,

compile 'com.firebaseui:firebase-ui:3.1.3'
compile "com.google.android.gms:play-services-auth:11.8.0"
implementation 'com.google.firebase:firebase-auth:11.8.0'

Read more: How to market your Android app

Enable phone number authentication firebase

Now, Go to Firebase Console and select your project TestPhoneAuth.

select project on firebase

Then select Authentication which will be under DEVELOP.

select sign in method and choose phone

Once you are on Authentication page click on the Sign-in method, select phone and enable and save it.

enable phone auth on

It will enable phone number authentication firebase for this app. You can check the default template of SMS verification under TEMPLATES.

showing sms verification templates

Creating  Activity

In the purpose of this tutorial, you have to create two activity. PhoneNoAuth activity will take the phone number from the user and verify it and SuccessActivity activity will display successfully login message.

So, create two activities

  • PhoneNoAuth
  • SuccessActivity

If you do not know how to create activity follow the bellow image.

Creating  Activity in Android Studio

Right click on the first directory under java then select New-> Java class. After that give the class name and click on ok. That’s all you just created an activity.

PhoneNoAuth.java

After creating PhoneNoAuth activity add provided code.

NOTE: Leave package as it doesn’t edit it

 import android.content.DialogInterface;
 import android.content.Intent;
 import android.os.Bundle;
 import android.support.annotation.Nullable;
 import android.support.v7.app.AlertDialog;
 import android.support.v7.app.AppCompatActivity;
 import com.firebase.ui.auth.AuthUI;
 import com.firebase.ui.auth.ErrorCodes;
 import com.firebase.ui.auth.IdpResponse;
 import com.firebase.ui.auth.ResultCodes;
 import com.google.firebase.auth.FirebaseAuth;

import java.util.Arrays;

/**
 * Created by AnupTechTips on 13/7/18.
 */

public class PhoneNoAuth extends AppCompatActivity {

private static final int RC_SIGN_IN = 123;

@Override
 protected void onCreate(@Nullable Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);

FirebaseAuth auth = FirebaseAuth.getInstance();
 if (auth.getCurrentUser() != null) {

// already signed in
 startActivity(new Intent(PhoneNoAuth.this, SuccessActivity.class));
 finish();

} else {

// not signed in
 startActivityForResult(
 AuthUI.getInstance()
 .createSignInIntentBuilder()
 .setAvailableProviders(
 Arrays.asList(
 new AuthUI.IdpConfig.Builder(AuthUI.PHONE_VERIFICATION_PROVIDER).build()
 ))
 .build(),
 RC_SIGN_IN);

}
 }

protected void onActivityResult(int requestCode, int resultCode, Intent data) {
 super.onActivityResult(requestCode, resultCode, data);
 // RC_SIGN_IN is the request code
 if (requestCode == RC_SIGN_IN) {
 IdpResponse response = IdpResponse.fromResultIntent(data);

// Successfully signed in
 if (resultCode == ResultCodes.OK) {
 startActivity(new Intent(PhoneNoAuth.this,SuccessActivity.class));
 finish();
 return;
 }
 // Sign in failed
 else {
 // User pressed back button
 if (response == null) {
 ShowAlertBox("Login canceled by User");
 return;
 }
 //No internet connection on the device
 if (response.getErrorCode() == ErrorCodes.NO_NETWORK) {
 ShowAlertBox("No Internet Connection");
 return;
 }
 //other errors
 if (response.getErrorCode() == ErrorCodes.UNKNOWN_ERROR) {
 ShowAlertBox("Unknown Error");
 return;
 }
 }
 ShowAlertBox("Unknown sign in response");
 }
 }
 //Creating a custom alert box
 protected void ShowAlertBox(String msg){
 AlertDialog.Builder builder1 = new AlertDialog.Builder(PhoneNoAuth.this);
 builder1.setMessage(msg);
 builder1.setCancelable(true);

builder1.setPositiveButton(
 "Ok",
 new DialogInterface.OnClickListener() {
 public void onClick(DialogInterface dialog, int id) {
 dialog.cancel();
 }
 });

AlertDialog alert11 = builder1.create();
 alert11.show();
 }
 }

SuccessActivity.java

After creating successActivity activity add provided code.

NOTE: Leave package as it doesn’t edit it

 import android.os.Bundle;
 import android.support.annotation.Nullable;
 import android.support.v7.app.AppCompatActivity;

/**
 * Created by AnupTechTips on 13/7/18.
 */

public class SuccessActivity extends AppCompatActivity {

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

Sign Out

To add sign out feature in your application just use the sign out method. I do not use the sign out here. You need to create a button and add following code to his on click event.

FirebaseAuth auth=FirebaseAuth.getInstance();
auth.signOut();

Creating Layout

Here you need to create only one layout which will display “Authentication Successful”. Before creating this activity add strings.xml file which is described under other files.

Create “activity_success.xml” under res->layout.

activity_success.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/auth_successfull"
        android:textSize="24dp"
        />

</RelativeLayout>

AndroidManifest.xml

Now you have included those activities in your app mainfests. You will find it under app, double-click on this file to open it. Change you AndroidManifest according to below code but do not edit anything on your manifest package.

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

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

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

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

</manifest>

Other Files

Here you will find all other files used in this tutorial. You can check those for reference. All of those files you can find under res->values.

colors.xml

Different colours which you used in your app are defined in colors.xml file.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
</resources>

strings.xml

This file contains different strings used in your app. Add this file before creating activity_success.xml.

<resources>
    <string name="app_name">FirebasePhoneNoAuthentication</string>
    <string name="auth_successfull">Authentication Successful</string>
</resources>

styles.xml

I do not create any custom style so this file will look same as yours. In this file, two themes are there. One theme is created by default called AppTheme, which contains three colours. You can customize the theme as you wish.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

    </style>

    <style name="AppTheme.Transition" parent="AppTheme">

        <item name="android:windowExitTransition">
            @transition/exit
        </item>
    </style>

</resources>

exit.xml

Create a new directory under res and named it as transition. Under the transition directory create exit.xml file and add following.

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

Read More: How much an average App Developer can earn??

Download

You can check and download this project from my GitHub repository. If you modified this project then share it with me I will happy to watch it.

Conclusion

I tried to point out every possible point and to keep this article easy to understand. In this purpose, I do not include other stuff like custom respond time, or resend pin. If you want to know about those you can check here and feel free to ask me in the comment section if you face any problem.

And that’s it hopefully this tutorial will help you to understand phone number authentication firebase android, If you like this tutorial share this with other developers out there.

If you face any problems, write it down in the comment section, I will solve your issue.

You May Also Like

About the Author: Anup Das

Hello, my name is Anup Das. I'm a blogger who is addicted to programming.

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *