Firebase Authentication – A step by step guide to build an Authentication module using Firebase Authentication

Learn more

Lost in coding? Discover our Learning Paths!

Learn more

Lost in coding? Discover our Learning Paths!

[fusion_builder_container hundred_percent=”no” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” parallax_speed=”0.3″ video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” overlay_color=”” video_preview_image=”” border_size=”” border_color=”” border_style=”solid” padding_top=”” padding_bottom=”” padding_left=”” padding_right=””][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” border_position=”all” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” center_content=”no” last=”no” min_height=”” hover_type=”none” link=””][fusion_text]

In this article, you will learn how to build the Authentication module for your application using Firebase Authentication along with the Forgot password feature. All you need to do is follow the below steps one by one.

Follow all the steps one by one to build the complete Authentication demo

1. Create a new project using Android Studio.
2. Select a project template as Empty Activity. After that, click Next.
3. Name the app as “FirebaseAuthDemo” and also update the package name as “com.firebaseauthdemo.” If you want, you can name the app or package differently. You can also edit the project save location.
4. Select the language as Kotlin.
5. Click on Finish. After clicking on the finish button, the project will be created and the necessary files will be built.
6. Once you are done with the project setup, we can run the application. 
7. You can see the application is built and installed on the device. 
8. Now, go to the FirebaseAuthDemo app and select the “Gradle” from the right side as you can see in the image.
9. Now expand the FirebaseAuthDemo. You will see two other options: task and app.
10. Select app -> Tasks -> android.
11. Double click on the signingReport.
12. You will see the SHA1 key of the application, as in the image below: 
13. We will use the SHA1 Key in the Firebase Console while creating the project.
14. Now go to the Firebase Console.
15. Login to your Gmail account. 
16. As shown in the image of Firebase Console, you will see the below screen once you are logged in. Once again, use your gmail account for that. 
17. Now, click on the Add Project.
18. Enter your project name as “FirebaseAuthDemo.”
19. Click on Continue.
20. There is an option for Google Analytics for your Firebase project. We will disable it for now. I will show you what is it and how to use it later, not in this demo.
21. Click on the Create Project.
22. It will take a couple of seconds, and the project will be created in the Firebase Console.
23. Once it is done, click on the Continue.
24. You will see the below screen in the image once your project is created successfully.
25. To add your app, select the Android icon shown in the image above.
26. Once you selected the Android icon, you will see the below screen, fill in the details as asked.  
27. In the above image, as you can see, you need to add the application package name. You can find the package name in the app level Gradle file. Add the app name. You should also add the SHA1 key that we have generated above in the application. The SHA1 key is optional, but we recommended to add it for security reasons.
28. After adding all the details, click on the Register app.
29. Once the app is registered, you will have an option to “Download google-services.json.” Download it and add it to the location as shown in the image.
30. After adding it, click Next.
31. Add the Firebase SDK in the respective Gradle files, as shown in the instructions.
32. Now click on the Next.
33. After performing all the steps, setup is done.
34. It is time to create and design the Register and Login activities.
35. Create an empty activity named  LoginActivity in the same package where the MainActivity is located.
36. Design the login screen layout. Follow the TODO steps added in the code.
37. To design the login screen layout add the required details (Logo and background image) to the drawable folder.
38. In the demo, we will not be adding the resources’ values to the respective resources file as dimension values to the dimens.xml file. You will learn in the course how to add them if you don’t know.
39. The “tools:text” attribute is used only for designing purposes. It won’t have any effect on runtime.
40. Once the login screen is designed, the final version of activity_login.xml can be found here.
41. Now create a new activity as RegisterActivity and design the activity_register.xml. You can find the activity_register.xml here.
42. We can proceed further after designing the login and register screen.
43. Go to the overview of our application, “FirebaseAuthDemo,” in the Firebase console.
44. Select the Authentication under Develop on the left-hand side of the screen.
45. Click on the Set up sign-in method.
46. Enable the Email/Password. Don’t enable the Email link (passwordless sign-in). We need to enable the Email/Password.
47. The official documentation link for Firebase Authentication using Email and Password is here.
48. Now follow the steps mentioned in the official document in the link above. The final version of app level Gradle file.
49. Add the code to register the user using Firebase Authentication. The final version of RegisterActivity. After adding the code, launch the activity from the LoginActivity by clicking on Register text.
50. Now you can run the application and test the register user functionality. After adding the Email id and password, you need to wait for a couple of seconds based on your internet speed as we have not added any progress dialog. You can see you have successfully registered a user using the email and password.
51. Once the user is successfully registered, you can check the entry in the Authentication tab in the Firebase console.
52. After registering the user, we will add the code to redirect our user to the MainActivity. We should Also add the logout functionality by clicking on the logout button.
53. You can add the code of activity_main.xml and MainActivity code.
54. Now add the login functionality to the application. The final version of activity_login.xml and LoginActivity.
55. In this demo, we have not added the progress indicator to keep the code clean and straightforward. You can add it if you want.
56. Run the application and test it up till now. We are done with the Register, Login, and Logout functionalities.
57. Now let’s add the Forgot Password functionality to the application. We have already added the ForgotPassword text to the login screen.
58. Create an empty activity class as ForgotPasswordActivity in the activities package.
59. Add the design code of activity_forgot_password.xml.
60. Let’s add the code of ForgotPasswordActivity and launch it from the login activity by clicking on ForgotPassword text.
61. Now you can run the application and test the forgot password functionality.
62. After adding the correct email id in the forgot password screen, you will receive the email below. You need to click on the link to reset the password.
63. After clicking on the link you will see the below screen to add the new password.
64. Once you added the new password and clicked on the save button you will see the below screen.
65. Now you can log in to the application using new password. We are done with the complete demo you can use this demo for your application.

You can get the complete source code of the demo.

Summary

In this article, you have learned how to register the user with email Id and Password with Firebase Authentication. You also learned the login and logout features. 

[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

Learn more

Lost in coding? Discover our Learning Paths!

Learn more

Lost in coding? Discover our Learning Paths!