Firebase Authentication using MVVM with Hilt and Coroutines

Hi Everyone, welcome to another post. Today we will learn integration Firebase Authentication using MVVM Architecture. Today we are going to build a complete authentication app using Firebase. Now without wasting anytime let’s get started.

Prerequisites

• Understanding of MVVM Architecture in Android
• Dependency Injection with Hilt
• Building UIs with Jetpack Compose
• Navigation with Jetpack Compose

Firebase Authentication Project

In the below image you can see what we are going to build in this project.

This project is completely built with Jetpack Compose. If you are not familiar with Jetpack Compose then I highly recommend that you should check my Jetpack Compose Crash Course.

In this tutorial, I am not going to cover the UI Design part. 

And that is why to get started you need to clone this repository and it has everything setup. Once you clone the repository make sure you are at 1_ui_design branch, as this is the starting point for this tutorial.

Before moving ahead you should go through the project once, as it has the following things already setup.

1. Login, Signup and Home Screen UI
2. Compose Navigation
3. Dependency Injection using Hilt
4. Firebase Dependencies

Connecting to a Firebase Project

I hope you went through the code and you do not have any confusion. If you want to ask anything, then don’t hesitate in commenting your question below.

Firebase dependencies are already added we just need to connect the project to a firebase project, then we can build it.

• Go to Firebase Console.
• Create a new project there and follow the steps (It’s very simple). You can also select an existing project if you already have a project in your firebase console.
• Once the firebase project is created, you need to add your android app to it.

• Click on add an Android App option, then you will get a form.

• After following the steps shown in the above image, you will get the config file that is nothing but google-services.json  file; and this is what we need to connect our project to firebase.
• You need to paste this file to the app folder.

Now you can build your project and it should work. If it is working; Bingo! you can move ahead.

Make sure that you have enabled sign in with email and password option in firebase console. 

Creating a Repository

We need to perform Login, Signup and Logout in this project. Let’s discuss about login (the same will apply for signup as well). Think how it will happen?

We will get the email and password from the UI and we will call the firebase function for login. If the given email and password is correct, we will receive the user if it does not matches we will get an exception.

Now let’s consider the user as a Resource, because when we call the user login function, either we will receive a user or an exception and to handle all these cases we will wrap the result as a Resource.

For the Resource we will create a sealed class.

As you can see one more case Loading is added, and we will use it to show a progressbar when the user is logging in.

Now we will define an interface for our Repository; I will name it AuthRepository .

As you can see we have three functions login() , signup() and logout(). We also have a val currentUser: FirebaseUser?  that we will use to get the currently logged in user.

Firebase Authentication with Kotlin Coroutines

To login a user with firebase, we use the following function.

Function signInWithEmailAndPassword()  returns a Task  that contains the result and to get the result we add an OnCompleteListener  to the Task . Basically we use the callbacks to get the result. But I want to avoid using callbacks everywhere, and we can do it using Coroutines.

So first I will define a utility function that will directly convert the Task to the actual result.

Create a file named FirebaseUtils.kt and write the following code in it.

Now instead of attaching callbacks everytime we can simply call await()  function to get the result.

Let’s define the implementation of our AuthRepository .

You can see in the above code, I am using Resource  sealed class and the await()  function, and there are no callbacks.

As you can see here we are passing firebaseAuth  as the dependency, so we need to tell hilt how to get this dependency.

Creating a Hilt Module

Create an object named AppModule  and write the following code.

As you can see I am also providing the implementation of our AuthRepository  that we will need in our ViewModel.

Creating ViewModel

Now let’s create our ViewModel. I am going to create a class named AuthViewModel.

As you can see I am consuming the repository in this ViewModel, and everything is very clean and simple. Now we can just use this ViewModel in our UI.

User Login

First we need to pass ViewModel to our composables.

We will crate the ViewModel inside MainActivity.

We will receive the ViewModel in our NavHost and from there we will pass it to the composables.

Now let’s perform the user login, it is very very easy.

User Signup

This is very much similar to the user login.

Home Screen

After login or signup, user will land to the HomeScreen where we will display the user information and a logout button. We have already created everything in our Repository and we just need to consume it.

And that is it, we have our project ready. Test it and let me know if you made it work.

If you are having any problem then you can switch to 2_login_signup  branch in the same repository and you will get all the codes.

So that is all for this Firebase Authentication using MVVM tutorial friends. I hope you learned something new. In case you have any question regarding the tutorial; please leave your comments below. Thank You 🙂