Search code examples
angularfirebaseangularfire

Angular/Firebase redirect to Login page after password change?


Hello I'm using Angular and Firebase for the authentication. I have a short question

Does anyone know how to make the prompt redirect to the login page after successfully resetting password?

  • I have a forgot password page which then asks for the email
  • And then a link will be sent to the email which will ask the user for a new password

The two mentioned above are successfully configured, however I am having a hard time on how to implement the redirect to login page after changing password successfully

The page only stays here after the password change

Authservice.ts password reset method

  resetPassword(email: string) {
    return this.afAuth.sendPasswordResetEmail(email)
      .catch(error => throw error); 
  }

Forgotpassword-component.ts

async resetPassword() {
    this.clearMessages();
    this.isClicked = true;
    this.actionButtonLabel = "Please wait...";
    await this.authService.resetPassword(this.userName).then(() => {
      this.actionButtonLabel = "Reset Password";
      this.alert.code = '200';
      this.alert.message = "A password reset link has been sent to your email address.";
      this.alert.status = 'success';
    }).catch(err => {
      this.isClicked = false;
      this.actionButtonLabel = "Reset Password";
      this.alert.code = err.code;
      this.alert.message = FirebaseErrors.Parse(err.code);
      this.alert.status = 'failed';
    })

Solution

  • You just need to pass a URL to the sendPasswordResetEmail() function, like this:

     resetPassword(email: string) {
        return this.afAuth.sendPasswordResetEmail(email, {url: "http://example.com/login"}); 
      }
    

    Also don't return a promise and attempt to catch it at the same time, you should allow whatever calls resetPassword() to handle the error.

    Documentation: https://firebase.google.com/docs/auth/web/passing-state-in-email-actions#passing_statecontinue_url_in_email_actions

    Alternatively, you can create your own landing pages so that you have more control: https://firebase.google.com/docs/auth/custom-email-handler