Closed
Description
[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:
- Set up and use App Check with Recaptcha Enterprise
- Verify phone number with RecaptchaVerifier
- 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);
}
}