react-google-recaptcha: calling ref.current.execute() in functional component fails to produce any results.

react-google-recaptcha version: 2.1.0 react-async-script version: 1.2.0

I have the most simple setup and I cannot seem to get it to work:

import React, { useRef, useState } from "react";
import { ReCAPTCHA } from "react-google-recaptcha";

export default function App() {
  const captchaRef = useRef();
  const [text, setText] = useState("Start editing to see some magic happen!");
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>{text}</h2>
      <button
        onClick={(event) => {
          setText("yes. it was a click");
          captchaRef.current.execute();
        }}
      >
        Click me
      </button>
      <ReCAPTCHA
        ref={captchaRef}
        sitekey="6LcYD3EaAAAAAM2GZpkWsEiCPTSMfAzSXiuG4k36"
        onChange={(value) => {
          setText(`There you go ${value}`);
        }}
        size="invisible"
      />
    </div>
  );
}

or check out the codesandbox

The problem is, that the current.execute never does anything. Clicking the button never fires any request. At the same time, a similar example seems to work just fine: https://codesandbox.io/s/gifted-cache-10q74jj593?file=/src/index.js

So what am I missing here? Is’nt my example even more dumbed down and simpler… have I forgot something?

About this issue

Original URL
State: open
Created 3 years ago
Comments: 16 (1 by maintainers)

Most upvoted comments

@OdifYltsaeb Thank you for the issue and the codesandbox example, it was incredibly helpful.

I was able to dig into the issue on your codesandbox and after a few minutes of complete bewilderment, I took a step back and started from the top.

Then I noticed the imports. ReCAPTCHA needs to be imported as the default.

- import { ReCAPTCHA } from "react-google-recaptcha";
+ import ReCAPTCHA from "react-google-recaptcha";

This fixes the issue in that sandbox example because the default export is wrapped in an HOC, react-async-script, that loads the google recaptcha javascript package.

This issue highlights some improvements we could make to improve the experience moving forward.

Some💡’s:

Add warnings/logs in dev mode when grecaptcha is not loaded and methods are being called
- ie: manually trigger execute but google recaptcha script is not loaded
Curious if we can get @dozoisch thoughts on removing the default export completely and only have named exports for v3?

+21

hartzis on Apr 8, 2021

I still have this problem, and I’m importing as the default.

Edit: Only for invisible recaptcha. Visible recaptcha works perfectly. Invisible recaptcha, calls to current.executeAsync() vanish into the void. No errors, no .then or .catch, just silence. current.execute() likewise does nothing.

+12

q00u on May 26, 2021

I also have encountered this issue when using executeAsync() on invisible recaptcha. I’ve been able to solve it by running captcharef.current.reset() before running executeAsync(), but now I’m curious if it prevents captcha from working at all? And why I can’t execute captcha multiple times without reset?

mylnikovD on Jul 6, 2022

I still have this problem, and I’m importing as the default.

Edit: Only for invisible recaptcha. Visible recaptcha works perfectly. Invisible recaptcha, calls to current.executeAsync() vanish into the void. No errors, no .then or .catch, just silence. current.execute() likewise does nothing.

yep same with invisible captcha and a fresh key, works fine with a 7 month old key, no idea why

astahmer on Jan 3, 2022

Thanks @beqramo, but I ended up using react-hook-recaptcha. See this: https://github.com/react-hook-form/react-hook-form/issues/1001#issuecomment-814974308.

ManuDoni on Apr 7, 2021