Open igops opened 1 year ago
After a small investigation I found out that loading reCAPTCHA V3 along with V2 breaks the latter.
A script loaded for V2: https://recaptcha.net/recaptcha/api.js?render=explicit
A script loaded for V3: https://www.google.com/recaptcha/api.js?render=xxxxxxxxxxxxxxxxx
When both loaded, V2 doesn't work anymore.
My tentative conclusion: do not use both version in the same app.
Hey @igops! Sorry for a late reply and thank you for your investigation!
I think we could do something like a cleanup on unmounting the Reaptcha
component which would allow to have a clean state on any other route, whatever version is used there. I will try to take a look at it this week, but not promising as I'm not a full-time open sourcerer 😅
@sarneeh hi Jacob, thank you for your response.
I'm not a front-end engineer, but I suspect this issue is probably out of scope of Reaptcha. Literally, Google scripts conflict with one another under the hood. To be honest, it's hard to imagine a real world case when both CAPTCHA versions are required in the same app (excepting the academic ones like mine 😄).
Nevertheless, I would appreciate any advise or contribution from your side! Thank you in advance!
Preface: I'm using both reCAPTCHA V3 and V2 versions in the same app, is it legal? 🤔
I'm getting quite weird error while navigating between the pages. Explicit render gives me the same result.
A workaround for me is to make React Router to reload the page, then error disappears.
That's how I render it so far: https://github.com/igops/tutorials/blob/main/njs-recaptcha-react/src/components/PhotoUnlockerRCv2.jsx#L41
P.S. I'm not an expert in React, so please don't be too harsh.