reCaptcha V3 fails validation on first form submission only

Question

I am trying to set up reCaptcha v3 and it sort of works. For some reason the first time I submit the form it fails but from the second submit onwards it is fine. I can't figure out why this is happening?

<script src="https://www.google.com/recaptcha/api.js?render=MY_SITE_KEY"></script>
<script>
grecaptcha.ready(function () {
    grecaptcha.execute('MY_SITE_KEY', { action: 'contact' }).then(function (token) {
        var recaptchaResponse = document.getElementById('captcha-response');
        recaptchaResponse.value = token;
    });
});
</script>




 <input type="hidden" name="captcha-response" id="captcha-response">

PHP

$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secretKey.'&response='.$_POST['captcha-response']);
$responseData = json_decode($verifyResponse);

     if(!$responseData->score < 0.5) {
      $message .= "Verification failed " . $responseData->score;
  }

When I submit the form the first time, I get the validation error but my score is 0.9.

Answer 1

Why you have added "!" with "$responseData->score"? you may need to replace your condition with the following:

Replace this:

if(!$responseData->score < 0.5) {
    $message .= "Verification failed " . $responseData->score;
}

With this one:

if($responseData->score < 0.5) {
    $message .= "Verification failed " . $responseData->score;
}

P.S: Following code takes few seconds to properly load and get a "captcha-reponse" code, so you may need to disable all submit button and wait till you got a "captcha-reponse" to enable the submit button in form or you needs to implementent another way to delay the submit to execute only once you got a "captcha-response" code otherwise you will keep getting "missing-input-response" error message

<script src="https://www.google.com/recaptcha/api.js?render=MY_SITE_KEY"></script>
<script>
  grecaptcha.ready(function() {
    grecaptcha.execute('MY_SITE_KEY', {
      action: 'contact'
    }).then(function(token) {
      var recaptchaResponse = document.getElementById('captcha-response');
      recaptchaResponse.value = token;
    });
  });
</script>