Next.js: Issue with Recaptcha + React
Answered
Anay-208 posted this in #help-forum
Anay-208OP
So I'm using recaptcha script, however, I'm facing a issue with
I'm sharing the most relevant part of the code:
Now, the functions
useReducerI'm sharing the most relevant part of the code:
function onSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
if (!recaptchaReady) return;
console.log("executed");
if (!recaptchaRendered) {
window.grecaptcha.render("recaptcha", {
sitekey: process.env.NEXT_PUBLIC_RECAPTCHA_SITEKEY,
callback: action === "signin" ? signin : signup,
size: "invisible",
});
setRecaptchaRendered(true);
} else {
window.grecaptcha.reset();
}
window.grecaptcha.execute();
}Now, the functions
signup/signup, uses a useReducer state. The state doesn't get updated for some reason, I need to rerender the recaptcha, which recaptcha doesn't allow. What can I do?18 Replies
Anay-208OP
thats right
Any suggetsions on fixing this issue
i can heavily suggest u switchting to turnstile
Answer
Anay-208OP
I was thinking about it, however, Since I've already implemented it, I don't feel like switching for now
thats what i do
Anay-208OP
Oh alright, then, I guess I'll switch it later, I trust cloudflare docs will give me the easiest solution, thanks!
yeah np
its better
Anay-208OP
@gin a final question, I'm using turnstile invisible
So since its invisible, it'll be executed when user submits. So How do I execute it then? Should I store bound in a useState?
<Turnstile
sitekey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY}
onLoad={(widgetId, bound) => {
bound.execute()
}}
onVerify={(token) => {
console.log(token)
}}
/>So since its invisible, it'll be executed when user submits. So How do I execute it then? Should I store bound in a useState?
@Anay-208 <@759064479521701888> a final question, I'm using turnstile invisible
ts
<Turnstile
sitekey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY}
onLoad={(widgetId, bound) => {
bound.execute()
}}
onVerify={(token) => {
console.log(token)
}}
/>
So since its invisible, it'll be executed when user submits. So How do I execute it then? Should I store bound in a useState?
i would execute that when ur component where u need it loads
and store the vaue as u said in a useState