Implementing Password Reset can be a tricky but inevitable task. Luckily Firebase gives us the tools to easily control this process. This article demonstrates how to implement password reset using Firebase and a dedicated page inside of your Angular app.
NOTE: This post assumes you have already implemented Login on your site and have created an account and are using AngularFire2.
Create the component
Because we can use the same page for other management purposes, create a component called UserManagementComponent and add the component to a Router within your angular app. Below we added it to the Auth module so the route would be
Firebase
After you add this and know what route UserManagementComponent is on, open your project in Firebase and go to Authentication -> Templates -> Password Reset. This is where you can customize the message users will receive in their email and, more importantly, the link that they need to visit to reset their password.
Click the pencil to edit the information then click the blue link at the bottom to customize action URL. For now, we will point to localhost for testing. When you release your site you’ll need to change this to your site URL. You can also use this page to customize the message your users will receive in their password reset email.
Back To The Code
Auth Service
Now that we have everything set up in Firebase, let’s go back to our project. Let’s start out by creating the auth functions you will need from AngularFireAuth. If you don’t already have a service set up for auth, you should create one and inject AngularFireAuth into it. Here is an example containing the functions that we will need.
As you can see there are only 2 functions that we need. The getAuth function simply returns the auth API that AngularFireAuth wraps.
The second function sends the password reset request to Firebase which will construct the email to that we configured in the dashboard to send to the user. We provide the email along with an ActionCodeSettings object.
The URL that is passed is called the continue URL and is the location the user should return to after successfully changing their password. This mainly applies if you are using firebase’s default password reset page or a page at a URL that is different from where your app is located. Because we configured our password reset email to take us to our own custom page, this URL is not needed and you can safely remove the second parameter fromsendPasswordResetEmail.
Login Component
Now with our AuthService injected into our LoginComponent, create a Reset Password button that initiates the password reset process when clicked.
Now when you enter an email and click the button, you should see an alert like this.
📷
User Management Component
Finally, let’s shift focus to the most important part of the process, the UserManagementComponentwe created. We named this component UserManagementComponent instead of PasswordResetComponent because we can handle email recovery and verification in a similar way. You will see some blank code in place for these features in case you need to implement them in the future.
At this point in the process, the user has received an email with a password reset link. When they click the link, Firebase will forward them to the URL we provided and append a few query parameters to the end of it. Some of them are for our conveniences, such as apiKey, continueUrl, and lang. We aren’t going to be using those, so, for now, we can ignore them.
The other 2 query parameters are the ones we absolutely need.
mode – The type of management action being performed. Can be either resetPassword, recoverEmail, or verifyEmailoobCode – A one-time code, used to identify and verify a request
The first thing we want to do is inject our AuthService, Router, and ActivatedRoute into our project. Then when the component is initialized, we check for the parameters we need and decide what action is being requested. If it is password rest, then we verify the action code with Firebase and set actionCodeChecked to true. This will enable us to display the correct template layout.
With the auth code checked, we can now display the form that corresponds to the action being performed. In our case, we will show a password reset form.
Once the user has completed the form, we can verify the information and reset the user’s password.
Here is the full code for UserManagementComponent
Thanks for reading and we hope you find this content useful!
Check Us Out
We regularly host meetups about the technology we like to use, so stop by our Meetup page or Eventbrite and sign up. If you’re interested in talking or hearing about a topic, let us know!