Android Firebase Authentication tutorial using Firebase UI

Introduction

This blog post is about android firebase authentication tutorial using firebaseui. In a web and app world, user authentication is gradually becoming more and more complex in its server side design and implementation. At the same time, stress on simpler and seamless user experience (UX) is getting more importance. This seemingly simple principle is a huge challenge to achieve. Every app developer need to re-engineer it in every implementation.

Firebase brilliantly addressed this core issue with a combination of firbase authentication and firebase ui offerings. As an app developer, you just hook onto this beautiful feature/framework and you are saved from writing and testing hundreds of lines of code.

However, if you would still like to write your own code, take a good look at below authentication workflow and you may consider changing your decision! 😉

Firebase Authentication Workflow

Firebase has put together a very complex authentication workflow in their product offering. Take a look at the below diagram from firebase authentication github page.

Firebase Authentication Workflow

Firebase Authentication Workflow

Thanks to the wonderful products from firebase, we are abstracted from these complexities. You just add the relevant dependencies and write some code to orchestrate these features. That’s it! You are done. No hassle of hosting your own infrastructure, database, writing MBaaS (mobile backend as a service) etc.

So, let’s get started. In the next sections, we will go step by step to implement an authentication module in our android app.

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.

You will see it’s super simple and extremely useful. Brilliant stuff!

Demo of the App

In this case, we have two GIFs.

  • First one to demo the user sign up/registration process and
  • Second one where user uses the same credential to login.

User Signs up first

firebase-signup

firebase-signup

Post Sign up, user logs in

firebase-signin

firebase-signin

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:- ItcMyFirebaseAuth
    • 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 FairebaseAuth 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 from “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.
  • 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. Please check the yellow highlighted area in the below picture if you are not sure from where to go to Project view.

android-studio-project-view

android-studio-project-view

Now, 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 is 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() –

     

Add Mike Penz’s 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 first create a Profile Drawer.
  • Next, we will use this Profile Drawer object to create an account header.
  • Now, 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.
  • So stitching it all together, the MainActivity.java looks like –

     
  • At this point, if you execute the app, it will be something like below –

    maik-penz-nav-drawer-demo

    maik-penz-nav-drawer-demo

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 Firebase Project“. It’ll automatically generate a project id. You can keep the default. However, in my case, I have edited the id.
  • Change the country as per your choice and click on “CREATE PROJECT” button.

    firebase-project-creation

    firebase-project-creation

  • 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.
  • 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.itcmyfirebaseauth
  • Let’s Provide an app nick name as well. The window looks like below –

    firebase-project-add-package

    firebase-project-add-package

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

    firebase-project-download-json

    firebase-project-download-json

  • 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 and then 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 –

    firebase-project-select-authentication

    firebase-project-select-authentication

  • In this tutorial, we will use 2 methods from the provided list. Email/Password and Google.
  • Click on Email/Password, a window will pop-up. Click on Enable and then click Save button –

    firebase-project-select-email-password

    firebase-project-select-email-password

  • Repeat the same process for Google option as well.
    • Click on Enable button.
    • Additionally, in the “Project public-facing name”, provide user facing name. I have provided “Iteritory Firebase Demo”. You can provide a name relevant to you.
    • Click on 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.1.1’ // google-services plugin
    • Post modification the file will look like –

       
  • Open app level build.gradle file and add following two dependencies
    • compile ‘com.google.firebase:firebase-auth:11.4.2’
    • compile ‘com.firebaseui:firebase-ui-auth:3.1.0’
  • 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 launching the app, it will check if there is any user already logged in by using the functions written above.
  • If there is no user logged in, it will show “Log in” menu item along with HOME and SETTINGS. 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 either signing in or signing up purpose. 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. Let’s take a look at the code that does the magic for us

     

    • Notice that in this AuthUI, we have provided 2 different authentication methods. These are the two methods, we have also configured while setting up project in firebase console.
    • We have also set a UI theme. Just so you know, it’s possible to customize the authentication UI by setting the theme. To create the theme, you can open styles.xml and make the necessary modification. For the demonstration purpose, I have created a simple theme and after all the modification, the styles.xml file looks like –

       
    • We have set Terms of Service URL (TOS_URL)
    • We have set Privacy Policy URL too (PP_URL)
    • This is as much code you write to have users get authenticated in your app. Cool!! isn’t it?
  • But if there is any user already logged in, we will show
    • the user’s email id and profile pic (pic will be hard coded in this case. In real time scenario, you can always populate it dynamically) in navigation drawer header.
    • In the Navigation drawer bottom portion, we will show the user’s name and an icon to denote whether the user is verified or unverified.
    • When a user is 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 –

Now for the demo, go on top of the page and see GIF.

GitHub

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

Conclusion

This post has been pretty long and I have covered two tutorials essentially. One for easy integration of navigration drawer using Mike Penz’s library and on top of that I built a complete user authentication solution based on FirebaseUI and FirebaseAuth libraries. Hope it helped you. If you have question, feel free to reach out in the comment box below. 🙂

 

 

10

14 Responses

  1. Suman Shekhar
    January 6, 2018
    • Sadruddin Md
      January 8, 2018
  2. Jaemin
    August 13, 2018
  3. Jaemin
    August 14, 2018
  4. Sadruddin Md
    August 15, 2018
  5. Luccas Freitas
    August 31, 2018
  6. Sadruddin Md
    September 4, 2018
  7. Adi
    October 14, 2018
  8. Adi
    October 14, 2018
  9. Sadruddin Md
    October 15, 2018
  10. Adi
    October 15, 2018
  11. Adi
    October 15, 2018
  12. Adi
    October 17, 2018
  13. Adi
    October 20, 2018

Write a response

This site uses Akismet to reduce spam. Learn how your comment data is processed.