executeRecaptcha hangs second time

[olemartin]

It seems like executeRecaptcha hangs the second time I call it. When users navigate on our site, we don't reload the script.

[t49tran]

Hi @olemartin, as much as I would like to, I cannot help you with such a brief, can you at least please provide an example of your code and the console log ?

[olemartin]

@t49tran
I didnt know how to describe it better :-)

I have this code:

const { executeRecaptcha } = useGoogleReCaptcha();
vote() {
console.log('voting2');
        try {
            const captchaToken = await executeRecaptcha('voting_card');
            console.log('voting3');
...
}

voting2 is always printed, voting3 is only printed the first time.

In the application this happens when I use the backbutton to navigate back to where the recaptcha code is and execute the vote-function.

[t49tran]

So what you've caught inside the catch phrase, what is the error there ?

[olemartin]

@t49tran It's no error. The function call just hangs.

[t49tran]

@t49tran It's no error. The function call just hangs.

Have you checked the function can reach the catch phrase, since you use try - catch there. The error might not be thrown into console log as it might be swallowed inside the catch phrase.

Without knowing the error I could not assist you further and must close this issue.

[olemartin]

@t49tran I didn't have a try-catch in the start. I added the try-catch in an attempt to figure out what was wrong, but the function call just hangs. So, I don't have an error message, but the component doesn't work as expected.

[olemartin]

It might be that the recaptcha token is expired. How do you handle that?

[olemartin]

This seems to work:

const captchaToken2 = await window.grecaptcha.execute('secret', {
    action: 'kimh_banner',
});
const captchaToken = await executeRecaptcha('kimh_banner');

captchaToken2 gets a value, but captchaToken does not.

[turistua]

I wonder if anyone looks at this issue?

[turistua]

@olemartin we face this issue for gatsby websites. Do you develop static website as well?

[cahuizar]

I am also facing a similar issue as to what has been mentioned, the first time my app fully renders and I submit my form, the excuteRecaptcha returns back a value. But in the instance that it gets verified by the backend and or it expires. I get an error back from the API and if I try to resubmit values.RecaptchaToken = await executeRecaptcha('homepage'); addSmsInfo(values, setErrors);
the function call hangs and I never get a token back. I saw this mentioned on this #5 but anyway to generate a brand new token?

[Razum]

+1
Have the same issue. executeRecaptcha method just returns Promise that is in "pending" state all the time

[akin-tekeoglu]

@t49tran I opened PR. I tried it on my local machine and it worked. It doesn't hang when component remounts

[t49tran]

@akin-tekeoglu thanks for the PR, I will publish the fix as soon as possible.