How to reset a password in the Firebase Auth System?
Hello 👋🏼, In the last tutorial, we learned how to create an Authentication system with Firebase and
using email and password. In this tutorial, we'll learn how to add the password reset,
commonly known as forgot password link, and how to initialize the Firebase Auth Emulator.
The Firebase Emulator Suite is a development environment that Firebase allows web developers to use for
testing and prototyping, so we don't have to mess with the production database, auth, and hosting resources.
Firebase Emulator Suite for more info.
Connect the Firebase Emulator Suite to React.
Go to the
and instruct your App to connect to the Emulator Suite when running
in a development environment. Bring two new functions from Firebase:
These functions are void promises, meaning they will not return anything other than the error code from Firebase;
create your own messaging system and catch the error.
Create the forgot password and the Password Reset Forms.
Go to the routes folder and create two new routes:
cd src cd routes touch passwordReset.tsx && touch forgotPassword.tsx
First, we'll work on the forgot password form. This form consists of a simple HTML input element that will send the user email to Firebase and check if it exists in the Auth system. If the email doesn't exist, your App will receive a user not found error.
The following code belongs to the password reset file. This form is
crucial and needs to be tested thoroughly, the user will redirect
himself back to the App through the link sent by Firebase to his
email inbox. This link will have a unique code called
oobCode; Extract this code from the URL
and send it back to Firebase through the
function. Firebase will match this code and allow the password reset if it's the same.
- Add the forgot password link to the login form.
Lastly, bring the new routes to the
App.tsx. The path to the password reset form will point to the emulator for now.
Initialize the Auth Emulator Suite.
Before running the Emulator, you will need a Firebase account and a project;
you can upload this project or use a demo or testing project;
with the auth system already provisioned. Open your terminal within the root folder,
firebase login; after logging in,
firebase init emulators.
The CLI will ask how you want to set up your project;
for this tutorial, we need the Authentication Emulator, port 9099, and the emulator UI.
When your Firebase project is ready, run in the terminal
http://localhost:4000/. Consult the
Firebase CLI reference and
Connect your App to the Authentication Emulator
if you still need help with the setup.
- Add a test user to the Firebase Auth Emulator.
Return to the Application, open a new terminal, and run the project. You will notice that Firebase has added a warning sign to differentiate the Emulator from the production project, "Running in emulator mode. Do not use with production credentials."
Start to test the auth system; when you reach the "check your inbox" message, go to the console, grab the link outputted by the emulator, and paste it into your web browser's address bar; hit enter, and you should see the reset password form.
After changing your password, return to the Emulator, hit refresh, and check that the password
has been changed. You will notice the user will be verified this time. Continue to manually
test the reset password link by deleting the
oobCode, changing it
for a different code, and reusing the same URL link repeatedly, be creative here and think like a hacker!
How the Firebase Reset Password works in Production.
When you finish testing the auth system and are ready to deploy your project,
go to the Firebase Dashboard, Authentication, templates, and password reset.
Click edit template and go to the bottom to Customize Action URL.
There, set the path to your user action landing page; Don't include the parameters
oobCode; they will be appended by Firebase dynamically.
If you don't know how to create a user action landing page and a higher order
component to redirect the user depending on the action the user wants to achieve (reset the password),
Create a landing page for the Firebase User Actions
See you next time!