Implementing Password Reset with Firebase and Angular - Clearly Innovative | Web and Mobile DevelopmentClearly Innovative | Web and Mobile Development
Blog page

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 /auth/userMgmt

 

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 from sendPasswordResetEmail.

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 UserManagementComponent we 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 apiKeycontinueUrl, 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 resetPasswordrecoverEmail, or verifyEmail
  • oobCode – 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!

Meetup

The Washington DC Ionic Framework Meetup

Washington, DC
123 Members

This is a group for anyone interested in the Ionic Framework for web and mobile application development, including  PWAs or Progressive Web Apps… This includes related techn…

Next Meetup

What is Reactive Programming?

Thursday, Oct 18, 2018, 6:30 PM
5 Attending

Check out this Meetup Group →

 

Eventbrite

Blast From The Past

We have blog posts for other past meetups. Read them!

Working with GraphQL in the Ionic Framework Part 2

High-Performing Agile Teams Guarantee Success

Text to Speech and Speech to Text in the Ionic Framework

Easy Virtual Reality with A-Frame