Fix missing Clerk auth UI on sign-in and sign-up

[DevCalebR]

Root cause:
This issue was primarily CSP, not Clerk path routing. The live production SignUp page loaded Clerk from the custom Frontend API origin https://clerk.callbackcloser.com, but our production CSP only allowed https://.clerk.com and https://.clerk.accounts.dev. The browser blocked clerk.browser.js, so the page shell rendered but the right-side Clerk SignUp/SignIn UI stayed blank.

Secondary path/routing hardening:
The auth pages were also passing env-normalized Clerk URLs into the widget path props. That was not the production blank-state root cause, but the page now uses stable base paths (/sign-up and /sign-in) for Clerk routing and strips query params from env-derived auth URLs to avoid future path mismatches.

What changed:

• decode the Clerk Frontend API origin from NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and include it in production CSP
• add the Clerk-required CSP allowances for the custom Frontend API origin, img.clerk.com, worker-src, and challenges.cloudflare.com
• keep stable Clerk widget paths by using /sign-up and /sign-in directly in the SignUp and SignIn components
• normalize env auth URLs to base paths only in lib/clerk-config.ts
• if Clerk env is invalid, let /sign-in and /sign-up render a clear auth-unavailable state instead of a blank right column

Validation:

• npm run typecheck
• npm run lint
• npm test
• npm run build

Manual incognito QA results:

• Reproduced on live production before the fix with Playwright against https://callbackcloser.com/sign-up?intent=pilot
• Browser console showed CSP errors blocking https://clerk.callbackcloser.com/npm/@clerk/clerk-js@5/dist/clerk.browser.js
• Verified the live publishable key decodes to clerk.callbackcloser.com, matching the blocked script origin exactly
• Verified locally in production mode after the fix that /sign-up and /sign-in now emit CSP headers including https://clerk.callbackcloser.com, img.clerk.com, worker-src, and challenges.cloudflare.com
• Verified locally in a browser that the prior CSP error is gone; the remaining localhost browser error is expected because the production Clerk key is restricted to callbackcloser.com and rejects localhost as an origin

Notes:

• Because the production Clerk key is domain-locked, full widget rendering can only be finally confirmed on callbackcloser.com or a properly configured preview domain after deploy. The local production-mode run confirms the CSP block itself is resolved.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
callbackcloser	Ready	Preview, Comment	May 25, 2026 11:09pm