When Submiting Recaptcha for the second time is taking ages

[Nyx23]

We are using Invisible Recaptcha with a React Ref and in the change event we get the token. However if the user inputs data with error, like wrong password, the second time he tries to log the system takes forever and from what we could gather is the call to recaptcha that is taking very long.

We tried using recaptchaReference.current.reset(), but it doesn't seem to work. Are we missing something else?

[marlowww]

Additionally after ~30 seconds, onChange callback is called with null value in first argument.

[Nyx23]

Additionally after ~30 seconds, onChange callback is called with null value in first argument.

Marlowww, I am not sure if I understand you correctly, are you saying that when you call reset without parameters it takes an additional 30 secs? If so with this component what is the parameter that we are supposed to pass? The documentation seems to indicate that you have to call it without parameters. Or are you referring to something else? I am sorry for my confusion I don't have much experience with recaptcha and everywhere I read, it said that when Recaptcha was taking long you had to explicitly call reset.

Thanks!

[marlowww]

No I didn't call reset. I'm just saying that after calling execute (we use invisible captcha) second time, after waiting ~30 seconds on change is called with null g-recaptcha-response challange.

Library documentation says: onChange - The function to be called when the user successfully completes the captcha. So it is wired that onChange is called second time, probably after expire event.

Explanation

Google ReCaptcha doesn't fire second time, unless:

• first challenge is validated server-side
• first challenge expires - it takes ~30 seconds
• recaptcha reset function is called.

Above explains why it takes so long second time.

So in your error handling you should explicite call reset (without parameters) like you read in internet. Beware if it is asynchronous error handling (e.g Promise then/catch) ReCaptcha reference maybe set to null after rerenderig component, so you maybe need to save it in e.g state variable.

If you correctly reseting ReCaptcha in error handler (handling wrong password case) and problem persists maybe try other React Recaptcha libraries:

• https://github.com/sarneeh/reaptcha/
• https://github.com/appleboy/react-recaptcha