Google recaptcha not validating on server side the second time

Question

I have a form with multiple fields & recaptcha. If one of the fields is invalid when submit button is clicked & recaptcha is valid it submits the form but validates those fields and returns an error message to the user if it failed.

At this stage recaptcha remains checked & validated on frontend. If user fixes the issue on the field that had the error message and resubmits the form the response from recaptcha is false and therefore not validated.

After I enter valid email, I get this:

My function that checks the captcha is this:

on false it results in that error message that is displayed on above screenshot.

Answer 1

A recaptcha validation is good only one time.

You have a couple of possible approaches:

• Save a session variable that the user has successfully completed the captcha and don't require it to pass validation the second time. Be sure to clear the variable on successful submission, or an attacker could solve once and submit a million times.
• Redisplay the captcha (using a grecaptcha.render call) and require them to fill it out again if the form submission fails.
• Don't validate the captcha until all other fields validate first.

Answer 2

From the official docs:

If your website performs server side validation using an AJAX request, you should only verify the user’s reCAPTCHA response token (g-recaptcha-response) once. If a verify attempt has been made with a particular token, it cannot be used again. You will need to call grecaptcha.reset() to ask the end user to verify with reCAPTCHA again.

Which means, your verifyCaptcha() function must only run once. Save a verification flag into a session var and simply check if it exists and is valid on every subsequent request.