Firebase - Customize reset password landing page

Question

Can I customize the landing page of password reset in Firebase. I want to localize that page since my app is not in english. Is there any way to do so?

Thanks in advance.

Answer 1

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 <code> 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
    })

Optionally, you can first check if the code is valid before displaying the password reset form with

firebase.auth().verifyPasswordResetCode(code)
    .then(function(email) {
      // Display a "new password" form with the user's email address
    })
    .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

Answer 2

The answer provided by @Channing Huang is the correct answer but you will also need to keep in mind that the error that it will return will not always be invalid-code.

Checking to see if the error is perhaps expired where the user didn't open the URL till later or possibly other cases. You can then send another email if expired.