App Check Recaptcha Enterprise fails RecaptchaVerifier for Firebase Auth

[BananaCHIU]

[REQUIRED] Describe your environment

• Operating System version: Windows 11
• Browser version: Chorme 103.0.5060.134
• Firebase SDK version: ^9.9.1
• Firebase Product: auth, app check

[REQUIRED] Describe the problem

Steps to reproduce:

1. Set up and use App Check with Recaptcha Enterprise
2. Verify phone number with RecaptchaVerifier
3. TypeError: this.getAssertedRecaptcha(...).render is not a function

The reason why it causes this error is in the recaptcha in RecaptchaVerifier has different value with one has the render function inside enterprise
RecaptchaVerifier without setting up App Check Recaptcha Enterprise (Has No Issue)

RecaptchaVerifier after setting up App Check Recaptcha Enterprise (Error: TypeError: this.getAssertedRecaptcha(...).render is not a function)

I found a possible cause in src/platform_browser/recaptcha/recaptcha_loader.ts

  /**
   * Check for `render()` method. `window.grecaptcha` will exist if the Enterprise
   * version of the ReCAPTCHA script was loaded by someone else (e.g. App Check) but
   * `window.grecaptcha.render()` will not. Another load will add it.
   */

Relevant Code:

const setupAppVerifier = async () => {
	appVerifier.current = new RecaptchaVerifier(SEND_SMS_BUTTON_ID, {
		size: 'invisible',
	}, auth);
}

const sendPhoneSMS = async () => {
		if(appVerifier.current === null) {
			await setupAppVerifier();
		}
		try {
			if(resendCountdown <= 0) {
				//send SMS only if countdown <= 0
				setResendCountdown(10);
				countdownTimer = setInterval(countdown, 1000);
				console.log(appVerifier.current);
				console.log(auth);
				//Send SMS
				if(isUpdatePhone) {
					const provider = new PhoneAuthProvider(auth);
					SMSResult.current = await provider.verifyPhoneNumber('+' + value, appVerifier.current);
				}else{
					SMSResult.current = await linkWithPhoneNumber(auth.currentUser, '+' + value, appVerifier.current);
				}
				setCodeSent(true);
			}
		}catch (error) {
			console.log(error);
		}
	}

[shrutip90]

Duplicate of #6133

[shrutip90]

Duplicate of #6133

[hsubox76]

I'm not able to reproduce this, are you sure you are using the latest version? It should have been fixed by #6133. Is it possible something got left over when upgrading from an older version? Can you clean out your node_modules and yarn.lock and try to reinstall firebase? I tried to create a minimal reproduction using this code:

const appCheck = initializeAppCheck(app, { provider: new ReCaptchaEnterpriseProvider('MY_SITE_KEY')});

const verifier = new RecaptchaVerifier('container', { size: 'invisible' }, getAuth(app));

const provider = new PhoneAuthProvider(getAuth(app));
await provider.verifyPhoneNumber('+1-510-555-5555', verifier);

And everything seemed to work. If a fresh install doesn't help, how and when are you initializing App Check? I didn't see it in the sample code.

[hsubox76]

I'll close this issue since it's a duplicate, please reply to #6133 if you're still having issues, and try to provide a minimal repro if possible.