Multi-Factor Authentication : FirebaseError: Firebase: Error (auth/code-expired)

Question

I've tried integrating Firebase multi-factor authentication to your web app and have followed their documentation:https://firebase.google.com/docs/auth/web/multi-factor

Everything works fine until i get to sms verification. After i get a code and instantly type it in i keep getting FirebaseError: Firebase: Error (auth/code-expired) and i can't figure out why. Keep in mind this is my firste time working with firebase.

Here is my code.(I Change the number to xxxxxxx on purpose for showing you my code). Thanks for your help and help in advanced

    signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    console.log('Sign in Success');
    navigate("/Search");
  })
  .catch(function (error) {
    if (error.code === 'auth/multi-factor-auth-required') {
      console.log('MFA required');
      const resolver = getMultiFactorResolver(auth, error);
      const selectedIndex = 0;
      if (resolver.hints[selectedIndex].factorId === PhoneMultiFactorGenerator.FACTOR_ID) {
        console.log(resolver.hints[selectedIndex].factorId);
        const phoneNumber = "XXXXXXXX";
        console.log(resolver.session);
        const phoneInfoOptions = {
          multiFactorHint: resolver.hints[selectedIndex],
          session: resolver.session
        };

        const phoneAuthProvider = new PhoneAuthProvider(auth);

        console.log(phoneAuthProvider);
        // Create recaptchaVerifier instance
        const recaptchaVerifier = new RecaptchaVerifier(
          "recaptcha-container",
          {
            size: "normal",
            callback: function (response) {
              // reCAPTCHA resolved, continue with phone verification
              phoneAuthProvider.verifyPhoneNumber(phoneNumber, recaptchaVerifier, {
                // Set the code expiration duration to 60 seconds
                codeTime: 60000
              })
                .then(function (verificationId) {
                  // Ask user for the SMS verification code. Then:
                  const verificationCode = prompt("Enter the verification code");
                  const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
                  console.log(cred)
                  const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
                  // Complete sign-in.
                  return resolver.resolveSignIn(multiFactorAssertion);
                })
                .then(function (userCredential) {
                    navigate("/Search");
                })
                .catch(function (error) {
                  console.log(error)
                });
            },
            "expired-callback": function () {
              // Response expired. Ask user to solve reCAPTCHA again.
              // ...
            },
          },
          auth
        );

        recaptchaVerifier.render().then(function (widgetId) {
          window.recaptchaWidgetId = widgetId;
        });
      }
    }
  });

Answer 1

Try changing phoneInfoOptions to phoneNumber in:

phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier, {
// Set the code expiration duration to 60 seconds
codeTime: 60000
})