Recaptcha is working, Email is Verified, 2FA turned on in console... yet auth/internal-error when running .verifyPhoneNumber()

Question

I have checked other StackOverflow posts and haven't seen anything that addresses the issue. I am trying to set up multi-factor auth for my app. As far as I've understood the basic steps are:

1. Enable 2FA in firebase console & Google Cloud Console ✔️
2. Set up a reCaptcha ✔️
3. Get the session ✔️
4. And send a verification message with phoneAuthProvider.verifyPhoneNumber ❌

I'm not sure why as all I am getting is FirebaseError: Firebase: Error (auth/internal-error)

Imports

import 'firebase/auth';
import * as firebase2 from 'firebase/auth';
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import firebaseApp from '../../../../src/config';
import { getAuth } from 'firebase/auth';

Here is the recaptcha:

  useEffect(() => {
    try {
      const auth22 = getAuth();

      // Recaptcha only ran once, stored in state
      const recaptchaVerifier = new firebase2.RecaptchaVerifier(
        'multifactor-form',
        {
          size: 'invisible',
          callback: (response) => {
            console.log('successfully created the captcha');
            console.log(response);
          },
        },
        auth22
      );
      console.log(recaptchaVerifier);

      setCaptchaVerifier(recaptchaVerifier);
    } catch (e) {
      console.log(e);
    }
  }, []);

And here's the function I run when I click send SMS:

  const sendSMS = async function (phoneNumber: any) {
    console.log(phoneNumber);
    console.log(typeof phoneNumber);
    try {
      let verificationId: any;
      const auth = firebaseApp.auth();
      const user = auth.currentUser;
      const newNumber: string = `+1${phoneNumber}`;
      const session = await user.multiFactor.getSession();
      const phoneOpts = {
        newNumber,
        session,
      };

      const phoneAuthProvider = new firebase.auth.PhoneAuthProvider();
      verificationId = await phoneAuthProvider.verifyPhoneNumber(phoneOpts, recaptchaVerfifier);
      //Nothing runs after the line above this one
      alert('sms text sent!');
    } catch (e) {
      console.log(e);
    }
  };

Can anyone see anything wrong with what I'm doing?

If needed Here are the tutorials, and guides, I've been following along with:

https://fireship.io/lessons/two-factor-auth-firebase/#identity-platform

https://cloud.google.com/identity-platform/docs/web/mfa?_ga=2.210928085.-1381314988.1638978774

Answer 1

I had the same error. Some info in docs is incorrect https://cloud.google.com/identity-platform/docs/web/mfa#web-version-8_21

Incorrect !!!

  // Specify the phone number and pass the MFA session.
    var phoneInfoOptions = {
      phoneNumber: phoneNumber,
      session: resolver.session
    };

Correct version is in the complete example code at the bottom of docs:

    var phoneInfoOptions = {
      multiFactorHint: resolver.hints[selectedIndex],
      session: resolver.session
    };