Invisible Recaptcha preventing form submission

[rohanchkrabrty]

I am trying out phone number authentication with invisible re-captcha.

I have a simple form as below

const loginButtonRef = useRef(); const loginValueRef = useRef(); <form onSubmit={e => { e.preventDefault(); loginHandler(); }} style={{ display: "flex", flexDirection: "column" }} > <input type="tel" placeholder="Mobile number" ref={loginValueRef} /> <button ref={loginButtonRef} type="submit"> Continue </button> </form>

I am initializing the invisible recaptcha at component mount

useEffect(() => { window.recaptchaVerifier = new RecaptchaVerifier( loginButtonRef.current, { size: "invisible", callback: response => { console.log("Recaptcha Verified"); }, "expired-callback": () => { console.log("Recaptcha Expired"); }, "error-callback": error => { console.log("Recaptcha Error"); }, }, firebaseAuth ); }, []);

The following is the form submission function (loginHandler)

const loginHandler = () => { console.log(loginValueRef.current.value); signInWithPhoneNumber(firebaseAuth, loginValueRef.current.value, window.recaptchaVerifier) .then(confirmationResult => { window.confirmationResult = confirmationResult; console.log("otp sent"); }) .catch(error => { // resetRecaptcha(); console.log(error.code, error.message); }); };

Now, If I provide a valid input everything works and the OTP is sent

But the problem I am facing is for the below flow

1. deliberately provide a wrong input
2. Recaptcha gets verified
3. firebase throws an error, example- auth/invalid-phone-number
4. Change input and press button
5. Recaptcha gets verified but the form submission doesn't work

I tried to reset the captcha following the doc but 'grecaptcha' is not defined.

Can anyone guide me on how to handle the error / reset recaptcha.