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?

Possibly related? https://stackoverflow.com/questions/49927941/reload-recaptcha-after-ajaxcomplete — Matthew Schlachter, Dec 20 '18 at 21:00
Is it possible to have an [MVCE](https://stackoverflow.com/help/mcve)? — Nino Filiu, Dec 20 '18 at 21:50
Tried https://stackoverflow.com/questions/49927941/reload-recaptcha-after-ajaxcomplete. The problem still there. @NinoFiliu, code snippet added. — Hossain Amin, Dec 21 '18 at 10:58

score 22 · Answer 1 · answered Jul 06 '19 at 10:39

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"
  });
});

To give some more color to this, you also don't even have to specify an id; you can pass a reference to the HTML element (e.g. an angular `ElementRef`'s `nativeElement`). — ollien, Jan 04 '23 at 18:41

score 10 · Answer 2 · answered Sep 02 '19 at 08:20

10

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

answered Sep 02 '19 at 08:20

Piquan

452
4
8

Yes, for me i was passing undefined by mistake. The error should be more descriptive in this case, but unfortunately it is not. – ehab Jan 25 '21 at 11:51
Same for us @ehab, we were passing undefined by mistake. The error should be more descriptive in this case, but unfortunately it is not. – Chris Apr 26 '23 at 21:56

score 7 · Accepted Answer · answered Feb 12 '19 at 05:00

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>

score 2 · Answer 4 · answered Apr 23 '19 at 09:39

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.

score 2 · Answer 5 · answered Mar 12 '20 at 02:34

2

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

answered Mar 12 '20 at 02:34

SSpoke

5,656
10
72
124

3

We had a legacy V2 code and .reset() is not even mentioned in V3 docs – Volodymyr Kotylo Apr 24 '20 at 10:59
I use v3. if i want to re-gen, reset i need to call function window.grecaptcha.execute again to reset – May Noppadol Jun 12 '22 at 14:03

score 1 · Answer 6 · answered Oct 13 '20 at 19:51

1

I was using React and only rendering my captcha container sometimes. Fixed by hiding the captcha button instead of not rendering it.

answered Oct 13 '20 at 19:51

Stuart Rucker

189
3
7

score 1 · Answer 7 · answered Jul 13 '22 at 19:38

In my case grecaptcha.reset(); was present from previous code snippet, and I was programmatically invoking it.

As the captcha verification is going on the fly every time. Resetting wasn't required.
After eliminating this grecaptcha.reset(); my code works perfectly fine.

Maybe this hint can help someone.

score 0 · Answer 8 · answered Jun 09 '22 at 14:57

We received this because we have a second environment with another domain and forgot to add this domain to the reCaptcha admin site. The solution was to add the new domain to the settings. The steps are Open www.google/recaptcha/admin/site Select the site you're working on Click on the settings gear Add the domain in its respective section

Error: No reCAPTCHA clients exist (reCAPTCHA v3)

8 Answers8

Linked