Learn how to handle forgotten passwords with Angular and Firebase. Learn how to use AngularFireAuth to create a password recovery workflow. You should be able to follow this story and stand up your own Forgot Password workflow utilizing Firebase and Angular.

Today’s story will showcase how we can use AngularFireAuth to create a password recovery workflow.

Page / Form Design

We are going to design the pages just like login and register. So we can reuse a lot of our CSS we already have setup 🎉! The only change we have to make is within our authentication.component.css. We will have navigation links that share the samefont-weight and color. Modify the CSS line .form-section .register .link to be .form-section .link.

Forgot Password Service Methods

Within authentication.service.ts we want to create three new methods to handle the Forgot Password workflow. Each of these methods will use AngularFireAuth to get the job done. Our first method will handle sending the user a password reset email:

async resetPassword(email: string): Promise<void> {
   await this.afAuth.auth.sendPasswordResetEmail(email).then(() => {
      this.router.navigate(['auth/reset-confirm']);
   }).catch((error) => {
      this.notifier.showError(error.message);
   });
}

#angular #firebase #javascript #web-development #security