Skip to content

fix(signup): fix turnstile key loading#4021

Merged
TheodoreSpeaks merged 1 commit intostagingfrom
fix/manual-login
Apr 7, 2026
Merged

fix(signup): fix turnstile key loading#4021
TheodoreSpeaks merged 1 commit intostagingfrom
fix/manual-login

Conversation

@TheodoreSpeaks
Copy link
Copy Markdown
Collaborator

@TheodoreSpeaks TheodoreSpeaks commented Apr 7, 2026

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
Copy link
Copy Markdown

vercel bot commented Apr 7, 2026

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

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

Request Review

@cursor
Copy link
Copy Markdown

cursor bot commented Apr 7, 2026

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.

@TheodoreSpeaks TheodoreSpeaks merged commit cd3cb87 into staging Apr 7, 2026
12 checks passed
@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps bot commented Apr 7, 2026

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant