react-google-recaptcha-v3: Timeout for executeRecaptcha on Mobile Chrome

On my Smartphone Chrome const token = await executeRecaptcha("contact");

fails with a timeout (Stacktrace below) It works fine on Mozilla and Desktop versions of chrome other mobile versions of chrome. The issue is probably located upstream. But this might be a good starting point.

Chrome is 83.0.4103.106 Android 10

  | __stack_frame_overlay_proxy_console__ | @ | index.js:2177
-- | -- | -- | --
  | (anonymous) | @ | recaptcha__en.js:92
  | Promise.catch (async) |   |  
  | (anonymous) | @ | recaptcha__en.js:92
  | (anonymous) | @ | recaptcha__en.js:132
  | h.<computed>.next | @ | recaptcha__en.js:156
  | (anonymous) | @ | recaptcha__en.js:326
  | (anonymous) | @ | recaptcha__en.js:326
  | (anonymous) | @ | recaptcha__en.js:131
  | (anonymous) | @ | recaptcha__en.js:91
  | (anonymous) | @ | recaptcha__en.js:206
  | (anonymous) | @ | react-google-recaptcha-v3.esm.js:105
  | Promise.then (async) |   |  
  | (anonymous) | @ | react-google-recaptcha-v3.esm.js:104
  | step | @ | react-google-recaptcha-v3.esm.js:75
  | (anonymous) | @ | react-google-recaptcha-v3.esm.js:56
  | (anonymous) | @ | react-google-recaptcha-v3.esm.js:49
  | __awaiter | @ | react-google-recaptcha-v3.esm.js:45
  | GoogleReCaptchaProvider._this.executeRecaptcha | @ | react-google-recaptcha-v3.esm.js:100
  | _callee$ | @ | SubscribeFooter.tsx:105
  | tryCatch | @ | runtime.js:45
  | invoke | @ | runtime.js:274
  | prototype.<computed> | @ | runtime.js:97
  | asyncGeneratorStep | @ | asyncToGenerator.js:3
  | _next | @ | asyncToGenerator.js:25
  | (anonymous) | @ | asyncToGenerator.js:32
  | (anonymous) | @ | asyncToGenerator.js:21
  | onSubmit | @ | SubscribeFooter.tsx:105
  | (anonymous) | @ | react-hook-form.es.js:1215
  | async function (async) |   |  
  | (anonymous) | @ | react-hook-form.es.js:1199
  | callCallback | @ | react-dom.development.js:189
  | invokeGuardedCallbackDev | @ | react-dom.development.js:238
  | invokeGuardedCallback | @ | react-dom.development.js:293
  | invokeGuardedCallbackAndCatchFirstError | @ | react-dom.development.js:307
  | executeDispatch | @ | react-dom.development.js:390
  | executeDispatchesInOrder | @ | react-dom.development.js:415
  | executeDispatchesAndRelease | @ | react-dom.development.js:3279
  | executeDispatchesAndReleaseTopLevel | @ | react-dom.development.js:3288
  | forEachAccumulated | @ | react-dom.development.js:3260
  | runEventsInBatch | @ | react-dom.development.js:3305
  | runExtractedPluginEventsInBatch | @ | react-dom.development.js:3515
  | handleTopLevel | @ | react-dom.development.js:3559
  | batchedEventUpdates$1 | @ | react-dom.development.js:21872
  | batchedEventUpdates | @ | react-dom.development.js:796
  | dispatchEventForLegacyPluginEventSystem | @ | react-dom.development.js:3569
  | attemptToDispatchEvent | @ | react-dom.development.js:4268
  | dispatchEvent | @ | react-dom.development.js:4190
  | unstable_runWithPriority | @ | scheduler.development.js:653
  | runWithPriority$1 | @ | react-dom.development.js:11040
  | discreteUpdates$1 | @ | react-dom.development.js:21888
  | discreteUpdates | @ | react-dom.development.js:807
  | dispatchDiscreteEvent | @ | react-dom.development.js:4169

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 8
Comments: 29 (8 by maintainers)

Links to this issue

javascript - Recaptcha timeouts on some browsers - Stack Overflow

Most upvoted comments

I have the same problem but it happens on multiple web browsers including Safari and Firefox. I think this project is not maintained anymore 😢

Hi @jpomykala, misleading and wrong information like this is not welcome. While I will try to address problem related to this library, please remember that it’s an open-source project and it’s not my responsibility or your entitlement that I have to address or fix your problem immediately.

It’s an open source project, which means if you really care about it or the problem that you’re facing, feel free to look at the codebase, debug, provide a solution and share it with others instead of crying and expect others to fix everything for you.

+22

t49tran on Jul 6, 2020

Sorry @jpomykala, I don’t see sharing false and misleading claim as finding and fixing problem. This kind of practice is not welcome in sharing / collaborative project.

You also didn’t answer my question on the chart.

+14

t49tran on Jul 6, 2020

I load the provider once, wrapping the entire page… still I am facing the issue

ohlr on Sep 12, 2020

I’m using Gatsby and I started to see ReCaptcha timeouts as well.

Thanks to @t49tran who pointed out that GoogleReCaptchaProvider should be loaded once per app. I had the GoogleReCaptchaProvider in my layout.js file – the core Layout that’s used across all pages.

However, as we know, in the latest version of Gatsby this Layout gets reloaded on navigations between pages.

I’m using gatsby-plugin-top-layout plugin, and when I moved GoogleReCaptchaProvider to its TopLayout.js file, the timeouts seem to have disappeared 🎉

dimileeh on Dec 30, 2020

Can confirm that wrapping my entire app with GoogleReCaptchaProvider and NOT just the component that I needed, fixed the timeout issue for me.

corncobb on Dec 23, 2020

@unCleanCode thanks for your commend. I appreciate it.

From what you have reported (and I have seen a few others report it as well) there might be a problem with the provider being loaded later on a specific page (rather than always be there). I will spend sometimes to investigate it and see if I can provide a fix this weekend.

In the meantime, if you can come up with a fix, please feel free to contribute.

t49tran on Sep 3, 2020