Android Firebase Phone Number Authentication Tutorial

Introduction

Android firebase phone number authentication tutorial. Learn to implement Phone OTP (One Time Password) based authentication using Firebase and Firebase AuthUI. You can use the Firebase Authentication feature to authenticate a user to your app. The user logs in using one time password or code sent as SMS to user’s mobile.

This tutorial is in continuation to my previous blog on user authentication with Firebase. I’ll try and cover most of the points from scratch just so that I can save your time from juggling between two pages. But I highly recommend you to visit that page once as it’ll help clearing a lot of doubt.

Tech Stack

Following are the tech stack used in this app development. We have used Mike Penz’s material design navigation drawer for its simplicity and ease of implementation. I will definitely encourage you to take look in his github page.

Create an empty app

  • Launch Android Studio and click: File –> New –> New Project…
  • A “Create New Project” dialog box will open; we’ll provide the app name and company domain. I have entered following details, you can provide the name/domain as per your choice and preference.
    • Application Name:- ItcFirebasePhoneAuthenitcation
    • Company Domain:- iteritory.com
  • Click on Next button. In the next window, select the minimum SDK version; you can choose as per your preference. In this case, I have chosen API 16: Android 4.1 (Jelly Bean). Click Next button.
  • In the next window, select “Empty Activity“. Click Next button.
  • In the next window,  let’s keep the Activity Name and Layout Name to default. Click Finish button.
  • I’ll change the app name a bit here, traverse and open res–> values –> strings.xml. Find the line with app_name attribute. Change the value to ““My Phone Auth App”.

Add navigation drawer dependency

  • Now, open up the build.gradle file (app level) and in the dependencies section add –
  • Ensure that there are other dependencies declared as per the official github page.
  • Post modification, the dependency section of build.gradle (App level) looks like below –

 

Theme Modification

  • Traverse and open app–>res –> values –>styles.xml
  • We’ll change the default parent attribute value “Theme.AppCompat.Light.DarkActionBar”  with “Theme.AppCompat.Light.NoActionBar“.
  • Then we’ll create a new backward compatible custom theme with name “FirebaseMaterialDesignTheme” that will inherit default AppTheme. Post modification, my default styles.xml looks like –

     
  • Right click on res folder and click New –> Android Resource File. A new dialog box will open up. Provide the File name as styles.xml and Directory name as values-v21. A new file will be created; populate the file with below content –

     
  • Now, traverse and open app –> manifests –> AndroidManifest.xml.
  • Replace the value of android:theme with “@style/FirebaseMaterialDesignTheme”. Post modificaton, the file will look like –

     
  • This modification is for material design theme’s backward compatibility. Here we didn’t modify or used the theme extensively. But I have shown it as a placeholder. Should there a need, make modification in these files and represent the theme as you need.
  • Now, if you run the app, you will see an app with “Hello World!”
  • Cool, so good so far, let’s move forward

Add some string constants

Traverse and open res –> values –> strings.xml and add some required strings. Post modification, the file will look like –

 

 

Download required icon

As part of this app’s development, we will need few icons. Let’s download those –

 

Ensure you have selected Project view from the explorer. Then, extract the downloaded zip files and traverse to android subfolder for each of these. You will see multiple folders named like “drawable-hdpi” etc. In each of this folder, there will be one version of the icon. We’ll copy each icon from each folder individually and paste to res–>mipmap folder in the studio. While pasting, ensure that you are selecting the right size subfolder inside mipmap folder. That means, if you are copying icon from drawable-hdpi, you will paste it to mipmap-hdpi folder.

Add toolbar

  • In order to add toolbar, we will make some changes in res –> layout –> activity_main.xml file. Change the layout to relative layout, add toolbar and modify the text view. Post modification, the file content will be like –
  • We’ll add a toolbar to our app using following function. We’ll call this function from onCreate() –

     

Mike Penz’s Navigation Drawer

Here are the basic concepts/steps to create the navigation drawer.

  • Let’s download a background picture from Mike’s github page and place it in res –> drawable folder.
  • We’ll instantiate required navigation drawer menu items using another function instantiateMenuItems().
  • While using many apps, you must have noticed that after logging in, the user name and some other information along profile picture is set on top of the navigation drawer. In order to achieve similar feature, we’ll also create a Profile Drawer. However, we won’t use much of this feature much in this tutorial. This will be there as more of a placeholder only.
  • Next, we will use this Profile Drawer object (check the previous step) to create an account header.
  • Next, we will setup the navigation drawer with Account Header. We’ll also need execute some actions when user clicks on each of these menu items.
  • Refer to MainActivity.java towards the end of the post and relate back to above points.

SHA-1 Setup

In order to enable the phone based authentication, we need to setup our App’s SHA-1 fingerprint in the firebase console. There are more than one methods of getting the SHA-1 fingerprint. In here, we’ll use an easy method. Please follow the instructions.

  • Locate Gradle icon on the right of the IDE. Check the below screenshot. Depending on how you have set the different windows, it may be present in other location as well. However, in my case (default), it’s present on top-right –

    firebase-phone-auth-gradle

    firebase-phone-auth-gradle

  • Click on Gradle –> :app –> task –> android. You’ll notice “signingReport”. Double click on that and in a few seconds, you will have SHA1 fingerprint. Take a look in the below screenshot. You will see both MD5 and SHA-1 fingerprints. I have masked both the values here.

    firebase-phone-auth-sha1-fingerprint

    firebase-phone-auth-sha1-fingerprint

  • Note the SHA-1 fingerprint; we will need it in next step

Setup Firebase project

As we’ll use Firebase Authentication, we first need to setup a project in the firebase console –

  • Use your gmail id to login to Firebase Console
  • In the console, you will see an “Add Project” button, let’s click on this and a new popup will open up. I have given the project name as “My Phone Auth Project“. It’ll automatically generate a project id. You can keep the default. In my case also, I have kept the default.
    firebase-phone-auth-project-creation

    firebase-phone-auth-project-creation

    • Change the country as per your choice and click on “CREATE PROJECT” button. It’ll take a few moments and then firebase makes the project ready for you.
  • A new window will open up, there will be several options. As we are here to develop an android app, let’s select “Add Firebase to your Android app” option.

    firebase-phone-auth-add-project

    firebase-phone-auth-add-project

  • A new window will pop-up. We’ll provide exactly the same package name that we used while creating the app in Android Studio. In my case, it is com.iteritory.itcfirebasephoneauthenitcation.
  • Let’s Provide an app nick name as well.
  • Pate the SHA-1 fingerprint in the last field. I have masked my app’s SHA-1 fingerprint in below image. After populating these info, my window looks like below –

    firebase-phone-auth-project-configuration

    firebase-phone-auth-project-configuration

  • Click on register app button. A new window will open up.

    firebase-phone-auth-project-json-download

    firebase-phone-auth-project-json-download

  • On the new window click on the Download google-services.json button and a .json file will be downloaded in your local system.
  • As described in the above screen, switch to project view if you have not already done. Copy the downloaded googl-services.json file and paste inside app folder. If you notice, it will be a sibling of build.gradle file inside app folder.
  • Click on the Continue.
  • Click on Finish button.
  • Next, click on the DEVELOP menu on the left and then select Authentication sub-menu. A new window will open up on your right; click on the “SIGN-IN METHOD” tab –

    firebase-phone-auth-project-select-authentication

    firebase-phone-auth-project-select-authentication

  • In this tutorial, we will use only phone based authentication method from the provided list.
  • Click on Phone, a window will pop-up. Click on Enable and then click Save button
  • So, now that’s it. We are done with all the setup thingy! Next, we do some coding again 🙂

Add Firebase Dependency

Open the root level build.grade file and add following classpath

  • classpath ‘com.google.gms:google-services:3.2.0’ // google-services plugin
  • Post modification the file will look like –

     
  • Open app level build.gradle file and add following two dependencies. Note that, at the time of writing this blog, these are the latest versions. You may need to use appropriate versions depending on when you are writing and whether any of these libraries got latest updates.
    • implementation  ‘com.google.firebase:firebase-auth:12.0.1’
    • implementation ‘com.firebaseui:firebase-ui-auth:3.3.0’
    • implementation ‘com.google.firebase:firebase-core:12.0.1’
  • At the end of depdencies, add following –
    • apply plugin: ‘com.google.gms.google-services’
  • Post modification, the app level build.gradle will look like –

Instantiate User in MainActivity

Declare an instance of FirebaseAuth and do a getUser() on that instance to check who is the current user. If the getUser returns NULL, we know that there is no user session, i.e. no user is currently logged in. Let’s take a look at the simple function –

We’ll also write a utility function to tell us if the user is logged in or not –

 

App UI Workflow

  • While the app is launched, it will check if there is any user already logged in.
  • If there is no user logged in, it will show “Log in” menu item. It’ll also show a message in the app text view that there is no user currently logged in to the app.
  • When a user selects “Login” menu, Firebase AuthUI kicks in and it takes the user through a very intuitive UI sequence, for inputting phone number. After you input your phone number, Firebase will send a SMS to your number. The message will be auto-read by the app and it’ll verify your number. As simple as that
  • Notice that, we won’t write a single line of code for all these. We’ll just kick start the AuthUI with require parameters and it will take its own course. This is the beauty of Firebase Authentication with AuthUI. You don’t code the complex logic; you have everything ready for you.
  • If there is any user already logged in –
    • In the navigation drawer, we won’t see any Login menu item. Instead, we will have Logout menu item.
    • We’ll also print a message stating that user is logged in.
  • After stitching together all the checks and balances, my MainActivity.java looks like and yes run the app and experience the power of Firebase engine and Firebase UI. 🙂

     

GitHub

I have pushed my entire project in git hub and you can get it here.

Conclusion

This post has been quite long. Hope it helps you. If you have question, feel free to reach out in the comment box below. 🙂

3

No Responses

Write a response