Firebase email link authentication leads to a page that says "Error encountered" - "The selected page mode is invalid"

Question

I am on localhost with Firebase auth (firebase v7.23.0). The email is sent okay. I click the sign in link from my email. I get this error page on my <PROJECT>.firebaseapp.com

My code is mostly below, but this all works. It's the Firebase page is giving an error. I am not sure what else I need to set up. localhost is on the allowed domains. The error is on the Firebase side so I cannot do much to debug or fix it.

const actionCodeSettings = {
  // URL you want to redirect back to. The domain (www.example.com) for this
  // URL must be whitelisted in the Firebase Console.
  // url: `${window.location.protocol}//${window.location.host}/`,
  url: http://localhost:7000/#postLogin,
  // This must be true.
  handleCodeInApp: true
};

firebase.auth().sendSignInLinkToEmail(this.email, actionCodeSettings)
        .then(() => {
          // The link was successfully sent. Inform the user.
          // Save the email locally so you don't need to ask the user for it again.
          window.localStorage.setItem('email', this.email);
        })
        .catch(error => {
          // Some error occurred, you can inspect the code: error.code
        });
    }

Answer 1

I am not sure how you managed to get this url. Either you removed apiKey from your url to attach screenshot on SO or you have misconfigured something due to which apiKey is not included in the email verification link.

To test my hypothesis, I created new firebase app and deployed it to https://test-auth-79dae.firebaseapp.com/ which just has a send email link button, which sends email to myself and email link works if I click on verification link received in email. It only doesn't work if I remove apiKey from the link in the email.

Your email link should be:

https://test-auth-79dae.firebaseapp.com/__/auth/action?apiKey={yourApiKey}&oobCode={obbCode}&continueUrl={urlParameter}&lang=en