WhatsApp Clone — Jetpack Compose — Authentication

Photo by George Prentzas on Unsplash

Content

1. Project Structure
2. Authentication
3. User details
4. Home
5. Profile Details
6. Status
7. Search
8. Chat
9. Chats
10. Final Remark

Before letting you send a message I think it’s better to authenticate if you are really a human being. And almost every human being has a phone number. So let’s authenticate you with the phone number + OTP.

Since I don’t have much idea about how backend works or even if I have I don’t know how to make it, so I will be using Firebase for all the backend related work.

Firebase Authentication

For this project, in Firebase Authentication module enable the phone Sign-in method.

Phone Authentication Enabled

Now, let’s make our authentication module,

Authentication Module

And the UI which we will be making is as below,

Authentication UI

The UI is pretty simple. But few points to be noted here:

1. You will see a SizedBox composable. Now that will be used for adding blank spaces in between other composables. The code for it can be checked here.
2. Also CircularIndicatorMessage is a composable which will be used to show a loading screen if any work is going on. The code for it can be checked here.
3. The Snackbar is a composable to show a message to the user. It’s a simple snackbar provided by Jetpack Compose. The code for it can be checked here. On how to achieve it can go to this link.
4. I have used a CountryCodePicker for the user to select a country for the phone code. (Please not that the main logic for the code is not written by me. All the details required to see the original code has been added in the file itself. Since I have to make some changes that’s why I have added it into my code. All the code copyright for CountryCodePicker goes to the original owner which can be found here.)
5. OTPComposable is nothing but just a text field to allow the user to enter the OTP sent to the entered phone number.

So these are composables which are helpful in this screen. Now, how the phone number authentication is happening.

Here, instead of adding the authentication process code in the model I have created a utility class named PhoneAuthenticationUtility. This is used to perform all the phone authentication related work. Since, the authentication code is in different file we needs callbacks to know what was the result of the authentication. So for that, OtpSentCallbacks and VerifyOtpCallbacks to know what was the result of the sent and verify OTP.

Send OTP to the phone number

For OtpSentCallbakcs, onOtpSent method is called when the OTP is successfully sent to the phone number. If there is an error then onError method is called. This way the results of the OTP sent is returned back to the point from where it was called.

Send OTP callback implementation

startPhoneOTP is the method in the AuthenticationViewModel where the sendOtp is called. And the OtpSentCallbacks is implemented here.

When the OTP is sent successfully, user enter the OTP in the field provieded. After entering the verifyOTP is called. Here we call the verifyOTP method of PhoneAuthenticationUtility. In that we have the other callback VerifyOtpCallbacks.

PhoneAuthenticationUtility — verifyOTP

Now to listen to the callbacks, in AuthenticationViewModel the method is called and the callbacks are implemented in it as below.

verifyOTP in AuthenticationViewModel

Now, when the onVerified callback is called it means that authorisation was successful and an account was created in firebase like below

Firebase Authorisation List

If you see the phone number added into the list, that means the authorisation was successful and now we can allow the user to enter the details which can be used further in the application.

But before that we would still need to save few details in the Firebase Firestore related to the user like the phone number, account created on, and other details, which may be required in the future.

Let’s create a model for the user now, which will be used for both setting and getting the data in Firebase Firestore.

User model

User is a model class in which we save the details required in the future. When onVerified method in AuthenticationViewModel is called after the OTP is verified, we create a user model that will be used to set the details in Firestore.

Creating user model for Firestore

All the Utility methods can be seen here. Now when the authorisation is done, there are two scenarios,

1. User details are already present in the system.
2. New user for the system.

But how we will know that user is already present in the system. For that let’s go to the second part which is WhatsApp Clone — Jetpack Compose — User Details.