BUG FOUND: Token returns null on onVerify (Using ReactJS).

[georgeka98]

I found a bug with the react-google-recaptcha-v3 package on ReactJS. The token returns "null" As soon as the component reloads. When the submit event occurs, the token would be taken from the captcha state and sent to the backend for verification.

Please, use the following code to reproduce the error. I am not sure what's wrong with the package lately, as I can only find very limited information about people experiencing this bug. It might be caused by the latest version. If this is the case, please, let me know what's the latest stable version to use for my project.

import React, {useState } from "react";
import { GoogleReCaptchaProvider, GoogleReCaptcha } from "react-google-recaptcha-v3";

const Auth = ({ screen }) => {

  const [captcha, setCaptcha] = useState(null);
  const [refreshReCaptcha, setRefreshReCaptcha] = useState(false);
  // const history = useHistory();

  const setTokenFunc = (getToken) => {
    console.log(getToken, "token");
    setCaptcha(getToken);
  };

  return (
      <div> 

        <GoogleReCaptchaProvider reCaptchaKey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI">
          <GoogleReCaptcha
            className="google-recaptcha-custom-class"
            action={"signup"}
            onVerify={setTokenFunc}
            refreshReCaptcha={refreshReCaptcha}
          />
        </GoogleReCaptchaProvider>
      </div>
  );
};

export default Auth;

The version I am using as shown in the package.json is:

"react-google-recaptcha-v3": "^1.10.1".

[wojtekmaj]

Yeah, the way this package loads the library is a little complex due to the nature of Google's script. I think the null here is unavoidable here actually. You just need to filter it out.