Calling verifyPhoneNumber more than once hangs

[marcusx2]

trafficstars

Operating System

macOS

Browser Version

Safari 16.5.2

Firebase SDK Version

10.4.0

Firebase SDK Product:

Auth

Describe your project's tooling

index.html with source tag.

Describe the problem

Calling verifyPhoneNumber twice makes the app hang.

Steps and code to reproduce issue

if (error.code == 'auth/multi-factor-auth-required') {
    resolver = getMultiFactorResolver(auth, error);
    const phoneAuthProvider = new PhoneAuthProvider(auth);
    var recaptcha = new RecaptchaVerifier(auth, 'recaptcha-container');
    phoneAuthProvider.verifyPhoneNumber("+16505553434", recaptcha)
    .then(function (verificationId) {
        var verificationCode = prompt("verification code");
        const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
        const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
        resolver.resolveSignIn(multiFactorAssertion)
        .then(function (userCredential) {
             console.log(userCredential);
             phoneAuthProvider.verifyPhoneNumber("+16505553434", recaptcha)//hangs. then doesn't run, catch doesn't run.
            .then(verificationId => {
                var verificationCode = prompt("verification code");
                const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
                const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
                resolver.resolveSignIn(multiFactorAssertion).then(userCredential => {
                    console.log(userCredential);
                })
            }).catch(error => console.error(error));
                                    
      });
  });
}

[prameshj]

Thanks for filing this, @marcusx2 . Can you elaborate on why the second verifyPhoneNumber call is needed once a userCredential has been obtained?

[marcusx2]

It's not needed at all, I was just making some tests. Mainly I wanted to see if I could reuse the same resolver. Sometimes I just do random stuff to confirm how something works or doesn't work when I'm not sure. In this case I ended up finding a bug.

[marcusx2]

prameshj

I'd like to add more information here. This bug came back to bite me. This time it actually matters that this should work. VerifyPhoneNumber hangs even if the user typed an invalid phone number. The situation is this: the user has to type a phone number -> user types a phone number with wrong format -> fails -> can't type phone number again because it hangs.

Here's a code snippet that illustrates the issue

var recaptchaVerifier;
var auth;

try {
    const app = initializeApp(firebaseConfig);
    auth = getAuth();

    connectAuthEmulator(auth, 'http://127.0.0.1:9099');

    recaptchaVerifier = new RecaptchaVerifier(auth, 'recaptcha-container', { 'size': 'invisible' });

    var token = await recaptchaVerifier.verify();
    await signInWithPhoneNumber(auth, 'blablabla', recaptchaVerifier);//throws Invalid format. (auth/invalid-phone-number).
    console.log('signed in first time');
    await signInWithPhoneNumber(auth, '+16505553434', recaptchaVerifier);
    console.log('signed in second time');

} catch (e) {
    console.error(e);
    /* trying to clear the verifier and verify again doesn't work either. It seems that this is unrecoverable.
        recaptchaVerifier.clear();
        await recaptchaVerifier.verify();//Unhandled Promise Rejection: FirebaseError: Firebase: Error (auth/internal-error).
    */
    await signInWithPhoneNumber(auth, '+16505553434', recaptchaVerifier);//hangs...can't sign in with correct phone number after an invalid one was already tried.
    console.log('signed in second time');
}

EDIT

This is an issue with the emulator only. It works fine without emulator. If you deem appropriate, this should be moved to the emulator repo.

[NhienLam]

Thanks for the information @marcusx2.

The situation is this: the user has to type a phone number -> user types a phone number with wrong format -> fails -> can't type phone number again because it hangs.

I tried this scenario in our demo app without emulator and couldn't repro the issue.

Since you mentioned this only happened with emulator, I moved this issue to firebase-tools GitHub repository in hopes you can get better support.