#Next.js: Issue with Recaptcha + React

20 messages · Page 1 of 1 (latest)

tardy kite
#

So I'm using recaptcha script, however, I'm facing a issue with useReducer

I'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?

sly escarpBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

civic bough
#

oof

tardy kite
#

thats right

#

Any suggetsions on fixing this issue

civic bough
#

i can heavily suggest u switchting to turnstile

#

and use this then https://www.npmjs.com/package/react-turnstile

npm
react-turnstile

React library for Cloudflare's Turnstile CAPTCHA alternative. Latest version: 1.1.3, last published: 3 months ago. Start using react-turnstile in your project by running npm i react-turnstile. There is 1 other project in the npm registry using react-turnstile.

tardy kite
#

I was thinking about it, however, Since I've already implemented it, I don't feel like switching for now

civic bough
#

thats what i do

civic bough
#

look at this :)

tardy kite
#

Oh alright, then, I guess I'll switch it later, I trust cloudflare docs will give me the easiest solution, thanks!

sly escarpBOT
#
✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1243282312121159813 message)

civic bough
#

yeah np

#

its better

tardy kite
#

@civic bough a final question, I'm using turnstile invisible

      <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?

civic bough