Error: No reCAPTCHA clients exist (reCAPTCHA v3)

Question

I've integrated reCAPTCHA v3 in one of my forms. In onload, there's a token produced and google captcha logo in the bottom right corner. But when I submit the form, in console there is an error shown, "Error: No reCAPTCHA clients exist". Also, it seems, no data is fetched by "g-recaptcha-response" and $_POST["g-recaptcha-response"] remains empty.

Here is the sample code:

<script type="text/javascript">
    var ReCaptchaCallbackV3 = function() {
        grecaptcha.ready(function() {
            grecaptcha.execute("site_key").then(function(token) {
                console.log("v3 Token: " + token);
            });
        });
    };
</script>

<script src="https://www.google.com/recaptcha/api.js?onload=ReCaptchaCallbackV3&render=site_key"></script>

It doesn't produce any "g-recaptcha-response" when the form is submitted.

I don't know much about google reCaptcha. I've followed the documentation provided by them and used a site and a secret key in the proper way.

Can anybody please tell me where might be the problem and what is the possible solution?

Solution 1

Have you tried loading the script before trying to send the request?

<script src="https://www.google.com/recaptcha/api.js?onload=ReCaptchaCallbackV3&render=site_key"></script>
<script type="text/javascript">
    var ReCaptchaCallbackV3 = function() {
        grecaptcha.ready(function() {
            grecaptcha.execute("site_key").then(function(token) {
                console.log("v3 Token: " + token);
            });
        });
    };
</script>

Solution 2

I believe this error occurs when the reCaptcha api.js loads, but your container is not present on the page yet (at least for v2). I had this error occur in a React app when I navigated to the page rather than loading it as the first on. Instead of using render=explicit and using a global namespace onLoadCallback, I was able to resolve it by rendering the captcha element manually.

Instead of creating a <div class="g-recaptcha"></div>, give the container div an id only (<div id="recaptcha-container"></div>) and render it in your JS code (e.g. in componentDidMount for a React app):

grecaptcha.ready(function() {
  grecaptcha.render("recaptcha-container", {
    "sitekey": "your-site-key"
  });
});

Solution 3

When I came across this problem with reCAPTCHA v3, it was because I didn't pass it the correct site key.

Solution 4

This also happens in Recaptcha 2 before user interacts with it. So, I have a submit button that triggers a JS function that checks the value of recaptcha. To solve the no client exists problem, I did:

try {
   data["reCaptcha"] = grecaptcha.getResponse();
} catch (err) {
   data["reCaptcha"] = "";
}

The data object then gets sent to a back-end script that validates the recaptcha. The back-end also checks for the field being empty.

Solution 5

I had this problem because I was calling grecaptcha.reset(); when there wasn't any Recaptcha active on the site

grecaptcha.reset();
recaptcha__en.js:507 Uncaught Error: No reCAPTCHA clients exist.
    at MX (recaptcha__en.js:507)
    at Object.Zn [as reset] (recaptcha__en.js:514)
    at <anonymous>:1:13

View more solutions

Comments

[Lucky Lam]

Great answer! Thanks

[Volodymyr Kotylo]

We had a legacy V2 code and .reset() is not even mentioned in V3 docs

[ehab]

Yes, for me i was passing undefined by mistake. The error should be more descriptive in this case, but unfortunately it is not.

[May Noppadol]

I use v3. if i want to re-gen, reset i need to call function window.grecaptcha.execute again to reset