fix(auth): remove captcha from login, fix signup captcha flow (#3753)

* fix(auth): remove captcha from login, fix signup captcha flow

* fix(auth): show Turnstile widget at normal size for Managed mode challenges

Author: waleedlatif1

apps/sim/app/(auth)/login/login-form.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import { useMemo, useRef, useState } from 'react'
-import { Turnstile, type TurnstileInstance } from '@marsidev/react-turnstile'
+import { useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { Eye, EyeOff } from 'lucide-react'
 import Link from 'next/link'
@@ -88,8 +87,6 @@ export default function LoginPage({
   const [passwordErrors, setPasswordErrors] = useState<string[]>([])
   const [showValidationError, setShowValidationError] = useState(false)
   const [formError, setFormError] = useState<string | null>(null)
-  const turnstileRef = useRef<TurnstileInstance>(null)
-  const turnstileSiteKey = useMemo(() => getEnv('NEXT_PUBLIC_TURNSTILE_SITE_KEY'), [])
   const buttonClass = useBrandedButtonClass()
 
   const callbackUrlParam = searchParams?.get('callbackUrl')
@@ -169,20 +166,6 @@ export default function LoginPage({
       const safeCallbackUrl = callbackUrl
       let errorHandled = false
 
-      // Execute Turnstile challenge on submit and get a fresh token
-      let token: string | undefined
-      if (turnstileSiteKey && turnstileRef.current) {
-        try {
-          turnstileRef.current.reset()
-          turnstileRef.current.execute()
-          token = await turnstileRef.current.getResponsePromise(15_000)
-        } catch {
-          setFormError('Captcha verification failed. Please try again.')
-          setIsLoading(false)
-          return
-        }
-      }
-
       setFormError(null)
       const result = await client.signIn.email(
         {
@@ -191,11 +174,6 @@ export default function LoginPage({
           callbackURL: safeCallbackUrl,
         },
         {
-          fetchOptions: {
-            headers: {
-              ...(token ? { 'x-captcha-response': token } : {}),
-            },
-          },
           onError: (ctx) => {
             logger.error('Login error:', ctx.error)
 
@@ -464,16 +442,6 @@ export default function LoginPage({
             </div>
           </div>
 
-          {turnstileSiteKey && (
-            <div className='absolute'>
-              <Turnstile
-                ref={turnstileRef}
-                siteKey={turnstileSiteKey}
-                options={{ size: 'invisible', execution: 'execute' }}
-              />
-            </div>
-          )}
-
           {resetSuccessMessage && (
             <div className='text-[#4CAF50] text-xs'>
               <p>{resetSuccessMessage}</p>

apps/sim/app/(auth)/signup/signup-form.tsx

@@ -93,6 +93,8 @@ function SignupFormContent({
   const [showEmailValidationError, setShowEmailValidationError] = useState(false)
   const [formError, setFormError] = useState<string | null>(null)
   const turnstileRef = useRef<TurnstileInstance>(null)
+  const captchaResolveRef = useRef<((token: string) => void) | null>(null)
+  const captchaRejectRef = useRef<((reason: Error) => void) | null>(null)
   const turnstileSiteKey = useMemo(() => getEnv('NEXT_PUBLIC_TURNSTILE_SITE_KEY'), [])
   const buttonClass = useBrandedButtonClass()
 
@@ -249,17 +251,30 @@ function SignupFormContent({
 
       const sanitizedName = trimmedName
 
-      // Execute Turnstile challenge on submit and get a fresh token
       let token: string | undefined
-      if (turnstileSiteKey && turnstileRef.current) {
+      const widget = turnstileRef.current
+      if (turnstileSiteKey && widget) {
+        let timeoutId: ReturnType<typeof setTimeout> | undefined
         try {
-          turnstileRef.current.reset()
-          turnstileRef.current.execute()
-          token = await turnstileRef.current.getResponsePromise(15_000)
+          widget.reset()
+          token = await Promise.race([
+            new Promise<string>((resolve, reject) => {
+              captchaResolveRef.current = resolve
+              captchaRejectRef.current = reject
+              widget.execute()
+            }),
+            new Promise<string>((_, reject) => {
+              timeoutId = setTimeout(() => reject(new Error('Captcha timed out')), 15_000)
+            }),
+          ])
         } catch {
           setFormError('Captcha verification failed. Please try again.')
           setIsLoading(false)
           return
+        } finally {
+          clearTimeout(timeoutId)
+          captchaResolveRef.current = null
+          captchaRejectRef.current = null
         }
       }
 
@@ -478,13 +493,14 @@ function SignupFormContent({
           </div>
 
           {turnstileSiteKey && (
-            <div className='absolute'>
-              <Turnstile
-                ref={turnstileRef}
-                siteKey={turnstileSiteKey}
-                options={{ size: 'invisible', execution: 'execute' }}
-              />
-            </div>
+            <Turnstile
+              ref={turnstileRef}
+              siteKey={turnstileSiteKey}
+              onSuccess={(token) => captchaResolveRef.current?.(token)}
+              onError={() => captchaRejectRef.current?.(new Error('Captcha verification failed'))}
+              onExpire={() => captchaRejectRef.current?.(new Error('Captcha token expired'))}
+              options={{ execution: 'execute' }}
+            />
           )}
 
           {formError && (

apps/sim/lib/auth/auth.ts

@@ -717,7 +717,7 @@ export const auth = betterAuth({
           captcha({
             provider: 'cloudflare-turnstile',
             secretKey: env.TURNSTILE_SECRET_KEY,
-            endpoints: ['/sign-up/email', '/sign-in/email'],
+            endpoints: ['/sign-up/email'],
           }),
         ]
       : []),