1

I am using the library "react-google-recaptcha-v3" for reCAPTCHA in React.

I have a SignUp component, which essentially is something along the lines of a form where users can add their credentials and then create an account.

The function looks like this:


const SignUp = () => {
...

  const { executeRecaptcha } = useGoogleReCaptcha();
  const handleReCaptchaVerify = useCallback(async () => {
    if (!executeRecaptcha) {
      console.log("Execute recaptcha not yet available");
      return;
    }

    const token = await executeRecaptcha();
    console.log(token);
  });
...

  return (
...
        <div
          onClick={() => {
            handleReCaptchaVerify().then(() => {
              createUserEmailPassword(email, password, username);
            });
          }}
          className="auth-sign-button"
        >
          Create a new account
        </div>
...
  );
};

As you can see the function handleReCaptchaVerify() is being called once the user tries to create a new account. This function provides me with a token, as the SignUp component is later rendered from within a component.

How do I, validate the user once I receive the token, from the handleReCaptchaVerify() function?

GabrielJSW
  • 184
  • 2
  • 10

0 Answers0