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?