fix(auth): fix Turnstile captcha blocking all logins

[waleedlatif1]

Summary

The invisible Turnstile iframe was wrapped in h-0 w-0 overflow-hidden to fix a layout gap, but this clipped the iframe and prevented Turnstile from executing challenges. Every login/signup attempt failed with "Captcha verification failed."

Replaced with absolute positioning which takes the element out of flow (no layout gap) without clipping the iframe, so Turnstile can execute normally.

Test plan

• Verify login works with Turnstile keys configured
• Verify signup works with Turnstile keys configured
• Verify no layout gap between password field and submit button

[cursor]

PR Summary

Low Risk
Low risk UI/layout change in auth forms; main risk is unintended positioning/z-index side effects on the login/signup pages.

Overview
Fixes invisible Cloudflare Turnstile captcha rendering on login and signup by changing the wrapper around Turnstile from h-0 w-0 overflow-hidden (which clipped the iframe) to absolute positioning.

This keeps the captcha out of layout flow while allowing the challenge iframe to execute, unblocking captcha-protected submissions.

^{Written by Cursor Bugbot for commit b7cdc3d. Configure here.}

[vercel]

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

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Mar 23, 2026 6:38pm

[greptile-apps]

Greptile Summary

This PR fixes a regression where Cloudflare Turnstile's invisible captcha was being clipped by h-0 w-0 overflow-hidden, preventing its iframe from executing challenges and causing every login/signup to fail with "Captcha verification failed." The fix swaps the wrapper to absolute positioning, which removes the element from normal flow (eliminating the layout gap) without clipping the iframe.

Changes:

• login-form.tsx — wrapper div class changed from h-0 w-0 overflow-hidden to absolute
• signup-form.tsx — same one-line fix applied identically

Observations:

• The root-cause analysis and fix are correct: overflow: hidden on a zero-dimension container clips iframe content, while position: absolute takes the element out of flow without clipping.
• The absolute wrapper has no relative ancestor at the form level and carries no explicit positional offset (top/left etc.), so the widget's position is inherited from an ancestor higher in the tree. For an invisible Turnstile widget (size: 'invisible', execution: 'execute') this is harmless, but adding opacity-0 overflow-hidden pointer-events-none would make the intent more explicit and guard against edge cases where a visible challenge could leak.

Confidence Score: 5/5

• This PR is safe to merge — it is a minimal, targeted fix to a production-blocking bug with no regressions introduced.
• The change is two identical single-line CSS class swaps that directly address the documented root cause (iframe clipping). The absolute approach is a well-understood CSS pattern for removing invisible elements from flow. The only open P2 is adding defensive classes for clarity, which is non-blocking.
• No files require special attention beyond the minor style suggestion already noted.

Important Files Changed

Filename	Overview
apps/sim/app/(auth)/login/login-form.tsx	Replaces h-0 w-0 overflow-hidden with absolute on the Turnstile wrapper, removing the clipping that blocked captcha execution. The fix is functionally correct; the wrapper lacks a relative parent but is harmless for an invisible widget.
apps/sim/app/(auth)/signup/signup-form.tsx	Identical Turnstile wrapper fix as login-form.tsx — same trade-offs apply.

Sequence Diagram

sequenceDiagram
    participant User
    participant Form as Login/Signup Form
    participant TurnstileDiv as Turnstile Wrapper div
    participant TurnstileIframe as Turnstile iframe

    User->>Form: Submit credentials
    Form->>TurnstileDiv: execute() via ref

    note over TurnstileDiv: BEFORE fix: h-0 w-0 overflow-hidden<br/>→ iframe clipped → challenge blocked

    note over TurnstileDiv: AFTER fix: absolute<br/>→ out of flow, not clipped

    TurnstileDiv->>TurnstileIframe: Execute challenge (now works)
    TurnstileIframe-->>Form: Return captcha token
    Form->>Form: Include token in auth request
    Form-->>User: Login/Signup succeeds

Loading

_{Reviews (1): Last reviewed commit: "fix(auth): use absolute positioning for ..." | Re-trigger Greptile}

[greptile-apps]

absolute without a relative ancestor or positional constraints

The absolute div has no explicit relative positioned parent at the form level (the nearest relative ancestor in the tree is the password input wrapper at line 436). This means the Turnstile wrapper will be positioned relative to whatever positioned ancestor exists further up in the layout tree, which is unpredictable.

For an invisible captcha this is harmless today, but the intent could be made more explicit and defensive by also suppressing pointer events and using overflow-hidden to prevent any edge-case visible challenge from leaking into the layout:

Suggested change

	<div className='absolute'>
	<div className='absolute overflow-hidden opacity-0 pointer-events-none'>

The same concern applies in signup-form.tsx at line 481.