WhatsApp Clone — Jetpack Compose — User Details

Pradyot Prakash
4 min readAug 31, 2021

--

Let’s add some details related to our user when the authentication is done successfully.

When the authentication is successful, a User model is being created. In that few details are being added which will be needed every time user logs in.

User details created after authentication

After that checkForUserDetails method is called. In that we check if the user details are already available or not.

Check if the user exists

A call to the FirestoreUtility is made to check if the user data is available in the Firestore or not. The call is shown below,

Checking if user exists

If the user details are available, the User model is passed back in the callback otherwise isFalse is called.

To check the callbacks for go to FirestoreCallbacks.

There are two flows now after the details check,

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

Let’s check it one by one.

New user

If the details are not available, in the existing User model which we created in startOTPVerification we add the account creation timestamp and also the profile pic.

Update the user details

And then we call the updateUserDetails method. In that we update the details in Firestore and send the user to our FormFillView page.

Set user details in Firestore

In FirestoreUtility a setUserDetails method is there which set the details in the Firestore and returns back using callback.

Let’s check the FormFillView,

Form Fill View

The above video shows the UI and functionality of FormFillView. Contains text fields to get the required data from the user and when all the details are done then the FormFillViewModel updateUserDetails method is called.

In that we add all the filled data to the user model of the user and then set it to the Firestore using FirestoreUtilitysetUserDetails method.

Existing User

For existing user only few changes are there,

We only update the lastLoggedIn key in Firestore for the current user rest all remains the same.

The below video can show the flow of the existing user.

Now, we saw how we are navigating in the application depending on if it’s a new user or an existing one. Final thing we need to see in this article is how we are saving the details in Firestore, because all well and good in the frontend but if the backend is not managed properly then as the application grows the issues will keep on emmerging.

Users details in Firestore

The above picture shows the structure in which I am saving the user details.

A users collection is there, in that a set of documents which is the user id given by the Firebase after authentication. And in that set of fields which we required to identify the user.

So whenever we need to see the details of a particular user, we only the user id rest is just a call to the Firestore.

After all the details has been saved on our DB let’s move the user to home page. For Home page let’s see how we are going to make it’s UI. See you in the next article WhatsApp Clone — Jetpack Compose — Home.

--

--