fbpx

Firebase authentication – Reset password

Reading Time: 9 minutes
In our Firebase authentication app, which is written in Kotlin, we can already register and login using email and password, and we can log out also. As extra we have a nice splash screen as well. But what if we don’t remember our password? In this case we should somehow reset it and get back the access to our account.

In this chapter we are going to implement the reset password feature.

GitHub

If you didn’t do the previous chapters, then from GitHub you can download the starter project for this chapter.

GitHub – log_out branch

Step 1 – Set the email template

For the reset of the password we need the email of the registered account, because Firebase will send a message to this email address , which will contain a reset link. When the user clicks on it, a window will popup, where they can change the password. After the change we can login again with the new password.

So open your Firebase account, where you have the registered project for this app and open your app there.

In Firebase click in the left sidebar menu on the “Authentication” menu, then “Templates”. Here you will see some templates. In our case we will change the “Password reset” template.

In this window at the top right corner will be a pen. If you click on it, then you can change the template.

Here we have to provide some project related information. First the name of the project, then our support email.

After this section we can modify the email template. We won’t make huge changes, only the “Sender name” and the “Reply to” part. The rest can stay the default one.

Note the tags inside of the “Subject” and “Message”.

  • %APP_NAME%: This is the “Project public-facing name”
  • %EMAIL%: It is the “Reply to” email
  • %LINK%: Clicking on this link we can change the password for this app.

If you are done, then click on the “Save” button at the bottom and you can close Firebase. We won’t need it anymore in this chapter.

Step 2 – The UI of the dialog

Now we can open the project in Android Studio and we can start coding.

We will start first by creating the user interface of the dialog. When the user clicks in the LoginActivity::class on the “Forgot Password?” text, then this dialog will ask them for the email of the account.

Create new layout xml file

To implement the UI, we have to create a layout xml file. So click on the layout folder with the right mouse button, select “New” then “Layout ressource file”.

In the popup window name the layout as “dialog_forgotpassword”. We will leave the rest as they are. So just click on the “OK” button.

Android Studio will create for us the file, and when it is finished, then it will be opened. We will use the default ConstraintLayout as the parent ViewGroup, but we will change it a little bit. So set the layout_height parameter to “wrap_content”.

Then we are going to add to the ConstraintLayout a rounded background.

Rounded background shape

This background will be also an xml file, but in this case it will be in the “drawable” folder. So click on it again using the right button of you mouse, select “New” then “Drawable ressource file”. The name of the file will be “rounded_dialog_background”. The rest can stay again the default selected. Click “Ok” if you are done.

Here is the source code:


rounded_dialog_background source code
      • solid: With this we can specify the background color of the shape.
      • corners: The radius of the shape will be 15dp.
      • stroke: This is the width and the color of the thin line for the border.

In the dialog_forgotpassword.xml file we can now add this background to the ConstraintLayout.

android:background=“@drawable/rounded_dialog_background”

If you check in the preview or in the design mode our layout, then there should be already a rounded border.

The child views

So now we can start to add some views to the layout. This dialog will contain an icon as ImageView, a field for the email as TextInputLayout and 2 Buttons to cancel the dialog and to execute the sending action, so a “Cancel” and a “Send” Buttons.

The icon

First we will add the icon of the dialog. Here we are going to use a new icon. You can download it using this link.

Download lock icon

Extract the downloaded file and copy all of the drawables folder to the “res” folder of your project.

Now we can add the ImageView to the layout.


xml code for the icon of the dialog
The field of the email

Under of the icon will be the TextInputLayout and inside of it the TextInputEditText. This field as almost the same what we have used in the activity_login.xml and activity_register.xml.


xml code for the email of the dialog
The Guideline

To position of the 2 Buttons we are going to use here again a Guideline.

If you are not familiar with the Guideliens then check back the previous chapter –> The constraintlayout

This Guideline will be vertically positioned and for that we will use percent, which value will be 0.5.


The Guideline
The 2 Buttons

Both of the Buttons will be under the TextInputLayout of the email vertically.

Horizontally they will be centered between the parent ViewGroup and the vertical Guideline. The “Cancel” Button from the left side, the “Send” Button from the right side of the Guideline.

Here is the source code of the 2 Buttons under the field of the email.


The 2 action Buttons

Hmm… 🤔 These Buttons are very ugly with this grey color. Let’s make for them also some shapes. 😎

Rounded background shape for the Buttons
The shape of the “Cancel” Button

Create again a new xml ressource file in the “drawable” folder, as we have done before. Click on it with the right mouse button, select “New” then “Drawable ressource file”.


rounded_lightblue_button.xml

The color for this shape comes also from the colors.xml file. Because before we have’t have this color, we are going to add it to our colors collection. So open the colors.xml file, what is located in the “res”, then in the “values” folder.

Add this line to colors.xml file.

<color name=“light_blue”>#d8f0fa</color>

Then we can add the shape as the background to the “Cancel” Button also.

android:background=“@drawable/rounded_lightblue_button”

The shape of the “Send” Button

Following, the logic of the background for the “Cancel” Button is the same. Create a new ressource file inside of the “drawable” folder and name as “rounded_blue_button”.


rounded_blue_button.xml

Then add again this shape as the background to the “Send” Button.

android:background=“@drawable/rounded_blue_button”

… and change the color of the font to white.

android:textColor=“@color/white”

Step 3 – Add the “Forgot Password? TextView

Still we don’t have any TextView to open the AlertDialog. We will solve this, and we will add it to the activity_login.xml file. So open the xml file.

The “Forgot password?” TextView will be under the TextInputLayout of the password and above of the “Login” Button.


The "Forgot password?" TextView

Modify the “Login” Button and align the top of it to the bottom of this TextView.

Step 4 – Open the dialog

After the implementation of the dialog’s user interface, we will open it from the LoginActivity::class. Here we are going to add the code for the open method. After that we will implement the methods for Firebase’s sendPasswordResetEmail() function as well.

startForgotPasswordDialog()

So open the LoginActivity::class and create a new method there called startForgotPasswordDialog(). Inside of this method we are going to use an AlertDialog.

AlertDialog can be used to display the dialog message with “OK” and “Cancel” buttons. It can be used to interrupt and ask the users about there choice to continue or discontinue.

Android AlertDialog is composed of three regions:

      • title
      • content area
      • action buttons.

It is the subclass of the Dialog class.

Copy and past the below method to the LoginActivity::class. The description comes after that.


startForgotPasswordDialog()
      1. To open the dialog first we have to inflate it. Here we can specify which layout should be shown.
      2. The Builder will create for us the AlertDialog, which needs the inflated view as parameter.
      3. Here we are going to show the dialog for the user. The method of show() will provide the dialog.
      4. We can set listeners for the Buttons. In this case we will have a click listener lambda, which will call later on the password reset methods. 
      5. To be sure that the user entered a formally correct email address, first we gonna call the validation method what we have already defined in the previous chapters.
      6. After that it will close the dialog.
      7. When the user has changed his/her mind, than clicking on the “Cancel” Button the dialog will be closed. The user can close it also by clicking outside of the dialog.
      8. Inside of the click listener of the “Cancel” Button we gonna have only the dismiss() method.
      9. This line of code will provide for us a transparent background. If we won’t set this, then the dialog won’t look like as we have made it.
        Try to comment out this line and check what happens. 😉
setOnClickListener {}

Now we can add this method to the click listener of the “tv_login_forgotPassword” TextView inside of the LoginActivity::class. It will be inside of the “onCreate()” method.


setOnClickListener of the TextView

Run the app

Now we can run the app and test if the dialog pops up correctly. If something is wrong, then check back the chapter or leave a comment.

Step 5 – The reset password methods

We are closer and closer to the end. In the last step we are going to add the needed methods for the classes which will be fired when the user taps on the “Send” Button on the reset password dialog. 

UserRepository::interface

First we are going to add the sendPasswordResetEmail() suspended function to the UserRepository::interface. This function will have one argument. This will be a string of the user’s email address. It is needed for the Firebase query.

So add this line of code to the UserRepository::interface.


sendPasswordResetEmail()
UserRepositoryImpl::class

Next is the implementation of this method. So open the UserRepositoryImpl::class also.

Push on your keyboard control+o and implement in the class the needed sendPasswordResetEmail() method.

Delete the TODO line and add there this.


sendPasswordResetEmail()

Note again, that on the method of sendPasswordResetEmail(email) we are going to call the await() extension function. Do you remember what does it do? If you don’t… this means that before the execution goes forward, it will wait until the result of the query.

In case of exception we will send it to the caller function, which is located in the FirebaseViewModel::class.

FirebaseViewModel::class

Now open the FirebaseViewModel::class also. First we are going to use again the CoroutineScope of ViewModel. So we gonna call the launch method on the viewModelScope variable.

Inside of this lambda, as before, we gonna have a when expression, which will check the result of the query.


sendPasswordResetEmail()
      • success: we will show for the user a message, which will tell for him/her that the email of the reset password was sent out.
      • error: we will show for the user the message of the exception.
      • cancel: we show a Toast message that the request was canceled.
LoginActivity::class

After the implementation of the needed classes we can go back to the LoginActivity::class. Here we are going to add the FirebaseViewModel’s method to the “Send” Button’s onClickListener method.

So just repleace the TODO line with this call.


The click listener of the "Send" Button

Step 6 – The Toast observer

Realy, this will be the last step before the finish, I promise. 😎

To notify the user about the reset of the password, we should implement in the LoginActivity::class an observer for the toast’s LiveData from the FirebaseViewModel::class, which will run when it has a new value.

So add this observer to the “onCreate()” method.


The Observer

Run again the app

Finally run again the app. Now when you click on the “Send” Button after you provided a valid and registered email, then you should get this email.

If you click on the link, then a window will pop up in your browser, where you can change to password for the provided email address.

GitHub

The source code is available on GitHub

GitHub – reset_password branch

Questions

I hope the description was understandable and clear. But if you have still questions, then leave me comments below! 😉

Have a nice a day! 🙂

 


 

Click to rate this post!
[Total: 0 Average: 0]
Follow and like us:

Leave a comment

stay informed!

Subscribe to receive exclusive content and notifications