Triggering issue

[reeexpert]

Hello there. I've been facing a problem when I click on the button that triggers the invisible hCaptcha in my Next.js project. Sometimes it doesn't trigger at all, I would have to refresh the page sometimes multiple times for it to work. And this happens from time to time and mostly on mobile as well. I'm not sure if that's a problem with hCaptcha or my code.

my _app.jsx

my Search.js component:

As you can see the button triggers handleSubmit() which does trigger the invisble captcha then if the captcha is solved it send the token and other suff to my api which verifies the token and approve the request. I think the problem might have something to do with loading the hCaptcha script or caching i'm not sure but I hope you could help me with that. Thanks

[zoryana94]

Hi @reeexpert ,

I see that you load hCaptcha in your _app.jsx That is not needed, as hCaptcha loads when you place HCaptcha component. Please check if removing it helps to fix the issue.

Also could you please try adding {async: true} as the argument to the execute? You can also get the token the following way:

const executeCaptcha = async () => {
    try {
      const captchaResponse = await captchaRef.current.execute({
        async: true
      });
      const responseToken = captchaResponse.response;

      console.log('Verified asynchronously: ', responseToken);
    } catch (error) {
      console.log(error);
    }
  };

I checked the react-hCaptcha in the test Next app and I couldn’t reproduce any issues. So, if mentioned above doesn’t help, it would be good if you send us some basic app that we can start and reproduce the issue.

Best Regards, hCaptcha Dev Team

[reeexpert]

Thank you so much seems like this solved the issue as I can see! <3

[zoryana94]

Hi @reeexpert ,

I'm glad the issue is fixed! Thank for reaching out to us and helping to improve the overall experience with hCaptcha! Hope you will enjoy using our products!

Best Regards, hCaptcha Dev Team