fix(signup): fix turnstile key loading

[TheodoreSpeaks]

Summary

Signup form turnstile wasn't mounted as an env var. Using useEffect so we don't hit the missing captcha response error

the Turnstile component didn't appear in the DOM:

document.querySelector('[data-turnstile]') || document.querySelector('iframe[src*="challenges.cloudflare"]')
  → null

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation
• Other: ___________

Testing

• Hard to test in local, but turnstile component wasn't queryable in prod. Will test in staging.

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

Screenshots/Videos

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs	Ready	Preview, Comment	Apr 7, 2026 7:51pm

[cursor]

PR Summary

Low Risk
Low risk UI bug fix limited to signup captcha initialization. Main risk is a small behavior change in when the captcha widget mounts, which could affect edge-case rendering timing.

Overview
Fixes signup captcha initialization by switching Turnstile site key resolution from a useMemo call to a useEffect-initialized state value.

This makes the Turnstile widget mount only after the env var is read on the client, reducing "missing captcha response" failures during signup.

^{Reviewed by Cursor Bugbot for commit 570436e. Bugbot is set up for automated code reviews on this repo. Configure here.}

[greptile-apps]

Greptile Summary

This PR fixes the Cloudflare Turnstile CAPTCHA widget not mounting on the signup page by deferring the site key lookup to a useEffect instead of reading it synchronously at render time.

• Root cause: getEnv('NEXT_PUBLIC_TURNSTILE_SITE_KEY') uses next-runtime-env's runtimeEnv(), which reads from window.__ENV__ — only populated after client-side hydration. Reading it synchronously during render (including SSR) returned undefined, so the Turnstile widget either never mounted or initialized without a valid key, producing the downstream "missing captcha response" error on submit.
• Fix: Introduces a useState<string | undefined>() (initialized to undefined) and a useEffect with an empty dependency array to set the key post-mount. The <Turnstile> component at line 524 already conditionally renders on a truthy turnstileSiteKey, and the submit handler at line 250 guards on turnstileSiteKey && widget, so both are consistent with the fix.
• No logic regressions introduced. The fix is minimal and targeted. A minor pre-existing style deviation exists: the new useEffect (line 104) is placed between useState declarations rather than after all state/useMemo as the project component guidelines prescribe, but this mirrors the existing PostHog useEffect at line 89 and is not introduced by this PR.

Confidence Score: 5/5

Safe to merge — the fix correctly defers env var reading to a client-side useEffect, resolving the captcha initialization bug with no regressions.

Single-file change with a well-understood fix pattern for next-runtime-env. No logic bugs, no data loss risk, no security issues introduced. The minor hook ordering style deviation (useEffect interleaved among useState declarations) is pre-existing and does not affect behavior.

No files require special attention.

Important Files Changed

Filename	Overview
apps/sim/app/(auth)/signup/signup-form.tsx	Defers Turnstile site key lookup to useEffect post-hydration, fixing the missing captcha response error caused by next-runtime-env's window.ENV being unavailable at SSR/initial render time

Sequence Diagram

sequenceDiagram
    participant Browser
    participant React
    participant nextRuntimeEnv as next-runtime-env
    participant Turnstile

    Browser->>React: Page load / SSR render
    Note over React: turnstileSiteKey = undefined
    Note over React: Turnstile NOT rendered (key falsy)
    React-->>Browser: HTML (no widget)

    Browser->>React: Client hydration (window.__ENV__ set)
    React->>React: useEffect fires
    React->>nextRuntimeEnv: getEnv('NEXT_PUBLIC_TURNSTILE_SITE_KEY')
    nextRuntimeEnv-->>React: 'site-key-value'
    React->>React: setTurnstileSiteKey('site-key-value')
    React->>React: Re-render
    React->>Turnstile: Mount widget with valid siteKey
    Turnstile-->>React: Widget ready (execution: execute)

    Browser->>React: User submits form
    React->>Turnstile: widget.reset()
    React->>Turnstile: widget.execute()
    Turnstile-->>React: getResponsePromise() resolves with token
    React->>Browser: POST /signUp { x-captcha-response: token }

Loading

_{Reviews (1): Last reviewed commit: "fix(signup): fix turnstile key loading" | Re-trigger Greptile}