Wait for token on page load, to not get Execute recaptcha not yet available

[leopucci]

Hi. Thanks for your lib! I am using this library to login flow and register flow. Everything works fine when the user action is slow, so the user clicks on register, the flow runs ok without Execute recaptcha not yet available

This is my HOC

<GoogleReCaptchaProvider
         reCaptchaKey={process.env.REACT_APP_RECAPTCHA_SITE_ID}
         language={language}
         useRecaptchaNet={false}
         useEnterprise={false}
         scriptProps={{
           async: false, // optional, default to false,
           defer: false, // optional, default to false
           appendTo: "head", // optional, default to "head", can be "head" or "body",
           nonce: undefined, // optional, default undefined
         }}
       >
             <App />
       </GoogleReCaptchaProvider>

This is my Register button click:

if (!executeRecaptcha) {
        console.log(Execute recaptcha not yet available');
        return;
      }
      const recaptcha = await executeRecaptcha("Register");

This runs fine. Because the user is slow and the page loads complete.

But now I am creating the flow for reset password and confirm email.
On those flows, the page gets the query parameter from the url and makes the request for the recaptcha token, to be able to query the backend and validate the token.

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

    const recaptchatoken = await executeRecaptcha("confirmemail");
    console.log(recaptchatoken);

    if (token) {
      if (recaptchatoken != null) {
        dispatch(actions.confirmEmailTokenValidation(token, recaptchatoken));
      } else {
        dispatch(
          actions.notify("Recaptcha esta vindo em branco no ConfirmEmail", 1)
        );
      }
    }
    // Do whatever you want with the token
  }, [executeRecaptcha]);

  // You can use useEffect to trigger the verification as soon as the component being loaded
  useEffect(() => {
    handleReCaptchaVerify();
  }, [handleReCaptchaVerify]);

What happens is that on page load, The useEffect is trying to get the token but I always get the message: Execute recaptcha not yet available

Any hints on how to force to wait a token, then dispatch api events?
Thanks
Pucci

[leopucci]

#73 (comment) solved the problem.