fix: use captcha imperatively (#2832)

apps/remix/app/components/forms/signin.tsx

@@ -89,7 +89,6 @@ export const SignInForm = ({
   const turnstileSiteKey = env('NEXT_PUBLIC_TURNSTILE_SITE_KEY');
   const turnstileRef = useRef<TurnstileInstance>(null);
   const twoFactorTurnstileRef = useRef<TurnstileInstance>(null);
-  const [captchaToken, setCaptchaToken] = useState<string | null>(null);
 
   const [isPasskeyLoading, setIsPasskeyLoading] = useState(false);
 
@@ -197,13 +196,31 @@ export const SignInForm = ({
   };
 
   const onFormSubmit = async ({ email, password, totpCode, backupCode }: TSignInFormSchema) => {
+    const $turnstile = isTwoFactorAuthenticationDialogOpen ? twoFactorTurnstileRef.current : turnstileRef.current;
+
     try {
+      let token: string | undefined;
+
+      if (turnstileSiteKey) {
+        token = await $turnstile?.getResponsePromise(3000).catch((_err) => undefined);
+
+        if (!token) {
+          toast({
+            title: _(msg`Human verification required`),
+            description: _(msg`Please complete the CAPTCHA challenge before signing in.`),
+            variant: 'destructive',
+          });
+
+          return;
+        }
+      }
+
       await authClient.emailPassword.signIn({
         email,
         password,
         totpCode,
         backupCode,
-        captchaToken: captchaToken ?? undefined,
+        captchaToken: token ?? undefined,
         redirectPath,
       });
     } catch (err) {
@@ -214,10 +231,6 @@ export const SignInForm = ({
       if (error.code === 'TWO_FACTOR_MISSING_CREDENTIALS') {
         setIsTwoFactorAuthenticationDialogOpen(true);
 
-        // Turnstile tokens are single-use. Clear the consumed one so the
-        // dialog's fresh widget mounts cleanly and the dialog can't be
-        // submitted with the stale token before a new one is issued.
-        setCaptchaToken(null);
         return;
       }
 
@@ -247,8 +260,7 @@ export const SignInForm = ({
         variant: 'destructive',
       });
 
-      turnstileRef.current?.reset();
-      setCaptchaToken(null);
+      $turnstile?.reset();
     }
   };
 
@@ -358,8 +370,6 @@ export const SignInForm = ({
             <Turnstile
               ref={turnstileRef}
               siteKey={turnstileSiteKey}
-              onSuccess={setCaptchaToken}
-              onExpire={() => setCaptchaToken(null)}
               options={{
                 size: 'flexible',
                 appearance: 'interaction-only',
@@ -499,8 +509,6 @@ export const SignInForm = ({
                   <Turnstile
                     ref={twoFactorTurnstileRef}
                     siteKey={turnstileSiteKey}
-                    onSuccess={setCaptchaToken}
-                    onExpire={() => setCaptchaToken(null)}
                     options={{
                       size: 'flexible',
                       appearance: 'interaction-only',
@@ -518,7 +526,7 @@ export const SignInForm = ({
                   )}
                 </Button>
 
-                <Button type="submit" loading={isSubmitting} disabled={Boolean(turnstileSiteKey) && !captchaToken}>
+                <Button type="submit" loading={isSubmitting}>
                   {isSubmitting ? <Trans>Signing in...</Trans> : <Trans>Sign In</Trans>}
                 </Button>
               </DialogFooter>

apps/remix/app/components/forms/signup.tsx

@@ -20,7 +20,7 @@ import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import type { TurnstileInstance } from '@marsidev/react-turnstile';
 import { Turnstile } from '@marsidev/react-turnstile';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import { useForm } from 'react-hook-form';
 import { FaIdCardClip } from 'react-icons/fa6';
 import { FcGoogle } from 'react-icons/fc';
@@ -86,8 +86,6 @@ export const SignUpForm = ({
   const turnstileSiteKey = env('NEXT_PUBLIC_TURNSTILE_SITE_KEY');
   const turnstileRef = useRef<TurnstileInstance>(null);
 
-  const [captchaToken, setCaptchaToken] = useState<string | null>(null);
-
   const hasSocialAuthEnabled = isGoogleSignupEnabled || isMicrosoftSignupEnabled || isOidcSignupEnabled;
 
   const form = useForm<TSignUpFormSchema>({
@@ -105,12 +103,28 @@ export const SignUpForm = ({
 
   const onFormSubmit = async ({ name, email, password, signature }: TSignUpFormSchema) => {
     try {
+      let token: string | undefined;
+
+      if (turnstileSiteKey) {
+        token = await turnstileRef.current?.getResponsePromise(3000).catch((_err) => undefined);
+
+        if (!token) {
+          toast({
+            title: _(msg`Human verification required`),
+            description: _(msg`Please complete the CAPTCHA challenge before signing in.`),
+            variant: 'destructive',
+          });
+
+          return;
+        }
+      }
+
       await authClient.emailPassword.signUp({
         name,
         email,
         password,
         signature,
-        captchaToken: captchaToken ?? undefined,
+        captchaToken: token ?? undefined,
       });
 
       await navigate(returnTo ? returnTo : '/unverified-account');
@@ -140,7 +154,6 @@ export const SignUpForm = ({
       });
 
       turnstileRef.current?.reset();
-      setCaptchaToken(null);
     }
   };
 
@@ -316,8 +329,6 @@ export const SignUpForm = ({
                 <Turnstile
                   ref={turnstileRef}
                   siteKey={turnstileSiteKey}
-                  onSuccess={setCaptchaToken}
-                  onExpire={() => setCaptchaToken(null)}
                   options={{
                     size: 'flexible',
                     appearance: 'interaction-only',