自定义 Firebase “电子邮件验证”、“密码重置”页面

Question

I'm using Firebase and Firestore auth in an angular application(with angular-fire), which works nicely. For the feature "password forgotten" and "email validation", I do call those methods on the AngularFireAuth service:

  sendVerificationMail() {
    return this.afAuth.currentUser
      .then((u: any) => u.sendEmailVerification())
      .then(() => {
        this.router.navigate(['/', 'auth', 'verify-email']);
      });
  }
  async forgotPassword(passwordResetEmail: string) {
    try {
      await this.afAuth.sendPasswordResetEmail(passwordResetEmail);
      window.alert('Password reset email sent, check your inbox.');
    } catch (error) {
      window.alert(error);
    }
  }

It works, I receive email to validate my email or to reset my password, but:

1. They are URL like https://xxxx.firebaseapp.com instead of my custom domain
2. Once they set their new password, or just clicked on the email validation link, I cannot redirect them to the home page
3. The page isn't with the same design as my angular app.

My question is, can I provide URL to some custom page? Or customize the design? Or some redirect action? To have something that is a bit better integrated to my website?

Answer 1

This is for redirect after password reset, You have to pass a continue URL via ActionCodeSettings to redirect the user back to the app:

var actionCodeSettings = {
  // After password reset, the user will be give the ability to go back
  // to this page.
  url: 'https://www.example.com/afterPasswordReset',
  handleCodeInApp: false
};
firebase.auth().sendPasswordResetEmail(email, actionCodeSettings)
  .then(function() {
    // Password reset email sent.
  })
  .catch(function(error) {
    // Error occurred. Inspect error.code.
  });

Learn more about ActionCodeSettings and passing state in redirect: https://firebase.google.com/docs/auth/web/passing-state-in-email-actions

You can also build your own custom landing page here: https://firebase.google.com/docs/auth/custom-email-handler

Answer 2

You can customize the Password Reset email under Firebase Console -> Auth -> Email Templates -> Password Reset, and change the link in the email to point to your own page. Note that the placeholder will be replaced by the password reset code in the URL.

Then, in your custom page, you can read the password reset code from the URL and do

firebase.auth().confirmPasswordReset(code, newPassword)
    .then(function() {
      // Success
    })
    .catch(function() {
      // Invalid code
    })

https://firebase.google.com/docs/reference/js/firebase.auth.Auth#confirmPasswordReset https://firebase.google.com/docs/reference/js/firebase.auth.Auth#verifyPasswordResetCode