0

Have been trying to implement MFA for my users for a while now. The problem seems to be that reCAPTCHA does not fire correctly or renders twice. The funny part: This code used to work, users got SMS to their phones, but does however no longer work and therefore they are locked out of their user.

Any help will be greatly appreciated!

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier("recaptcha-container", { size: 'invisible' }, auth)
        recaptchaVerifier.render().then(widgetId => {
            window.recaptchaVerifierId = widgetId;
        })
        
        const appVerifier = window.recaptchaVerifier;
        // Send verification code.
        const phoneAuthProvider = new PhoneAuthProvider(auth);
        const multiFactorUser = multiFactor(auth.currentUser);
        const multiFactorSession = await multiFactorUser.getSession();
        const phoneInfoOptions = {
            phoneNumber: phonenumber,
            session: multiFactorSession
        };
        
        
        const verificationId = await phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, appVerifier);
        
        // Have also tried without line 2,3,4
        
        // Have also tried this (also with size as string)
        
        /*window.recaptchaVerifier = new RecaptchaVerifier("recaptcha-container", {              
        size: 'invisible',
        'callback': 'response'
        }, auth)*/
        
        
        //Im almost certain it has to do with this RecaptchaVerifier part.
laffe
  • 1
  • 1

1 Answers1

0

Found an answer to my problem: The code is correct, but I had made to many await phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, appVerifier); calls with my phone number. When trying with my partners phone number everything worked fine, and there were no issues whatsoever. If you have trouble with this here are some useful links that helped me: Recaptcha verifier internal-error

laffe
  • 1
  • 1