Turnstile Example

[MiraiTunga]

I am trying to use react-hook-forms with cloud flare https://developers.cloudflare.com/turnstile/

can someone help me with a full example ?

[Moshyfawn]

Never used Turnstile before. Take a look at #1001; should be close enough, I believe.

[evgeny-kim]

useForm register API essentially creates four properties for an input:

const { onChange, onBlur, name, ref } = register('input-name');

You can register Turnstile input and then wire up the events manually:

const {
    register,
    setValue
} = useForm();

// register manually
useEffect(() => {
    register('cf-turnstile-response', {
        required: 'Please verify you are human'
    });
}, [register]);

// set Turnstile widget callback
// once captcha is solved, set token value and re-validate
widgetId = turnstile.render('#cf-turnstile', {
    sitekey: siteKey,
    callback: (token) => {
        setValue('cf-turnstile-response', token, { shouldValidate: true });
    }
});

[jackywxd]

@evgeny-kim Thanks! That helps me to figure out. Below is more details about the implementation in Nextjs:

Make sure load turstile script

 <Script
        src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback"
        strategy="afterInteractive"
      />

Below is the form client component

const FormSchema = z.object({
  email: z.string().min(1).max(255).email(),
  cfTurnstileResponse: z.string(),
});

export default function LoginForm() {
  const form = useForm<FormValues>({
    resolver: zodResolver(FormSchema),
    mode: 'onSubmit',
    defaultValues,
  });

  const { register, setValue } = form;

  useEffect(() => {
    register('cfTurnstileResponse', {
      required: 'Please verify you are human',
    });

    let widgetId: string;

    // 定义回调函数
    window.onloadTurnstileCallback = () => {
      // 如果 turnstile 已经加载，并且 render 方法存在，并且 widgetId 不存在，则初始化
      if (window.turnstile && typeof window.turnstile.render === 'function' && !widgetId) {
        widgetId = window.turnstile.render('#cf-turnstile', {
          sitekey: process.env.NEXT_PUBLIC_CF_TURNSTILE_SITE_KEY!,
          callback: (token: string) => {
            setValue('cfTurnstileResponse', token, { shouldValidate: true });
          },
          theme: 'light',
        });
      }
    };

    // 如果 turnstile 已经加载，直接初始化
    if (window.turnstile) {
      window.onloadTurnstileCallback();
    }

    return () => {
      if (widgetId && window.turnstile) {
        window.turnstile.remove(widgetId);
      }
    };
  }, [register, setValue]);

  async function submitForm(data: FormValues) {
    try {
      const token = data.cfTurnstileResponse as string;
      const email = data.email;

      await login({ email, captchaToken: token });
      toast.success('Login successful');
      redirect(`?email=${encodeURIComponent(email)}`);
    }
    catch (error) {
      console.error({ error }, 'Login failed');
      toast.error(`Failed to login: ${error instanceof Error ? error.message : 'Unknown error'}`);
    }
  }

  return (
    <>
      <FormProvider {...form}>
        <form onSubmit={form.handleSubmit(submitForm)} method="POST" className="mt-10 grid grid-cols-1 gap-y-8">
          <EmailField />
          <div className="cf-turnstile" id="cf-turnstile"></div>
          <SubmitButton />
        </form>
      </FormProvider>
    </>
  );
}