snippets-web
snippets-web copied to clipboard
error is showing using invisible recaptch in localhost
error: recaptcha_verifier.ts:114 Uncaught TypeError: Cannot read properties of undefined (reading 'appVerificationDisabledForTesting') at new RecaptchaVerifier (recaptcha_verifier.ts:114:1) at otpform.js:17:1 at commitHookEffectListMount (react-dom.development.js:23189:1) at commitPassiveMountOnFiber (react-dom.development.js:24965:1) at commitPassiveMountEffects_complete (react-dom.development.js:24930:1) at commitPassiveMountEffects_begin (react-dom.development.js:24917:1) at commitPassiveMountEffects (react-dom.development.js:24905:1) at flushPassiveEffectsImpl (react-dom.development.js:27078:1) at flushPassiveEffects (react-dom.development.js:27023:1) at react-dom.development.js:26808:1 my code useEffect(() => { // Set up the ReCAPTCHA verifier when the component mounts window.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', { 'size': 'normal', 'callback': (response) => { // ReCAPTCHA solved, allow OTP sending handleSendOtp(); } }, auth); }, [auth]);
const handleSendOtp = () => { const appVerifier = window.recaptchaVerifier;
signInWithPhoneNumber(auth, phoneNumber, appVerifier)
.then((confirmationResult) => {
// SMS sent. Save the confirmation result for later verification.
setVerificationId(confirmationResult.verificationId);
setIsOtpSent(true);
})
.catch((error) => {
console.error("Error during sign-in with phone number:", error);
// Handle error, e.g., show a message to the user
});
};