dimitar
59988a597e
The Phase 3 CSP was too strict for Clerk and blocked its browser-side runtime. Reported runtime error: ClerkRuntimeError: Failed to load Clerk JS, failed to load script: https://useful-louse-74.clerk.accounts.dev/npm/@clerk/clerk-js@6/ dist/clerk.browser.js (code='failed_to_load_clerk_js') Root cause: script-src allowed only 'self' 'unsafe-inline' 'unsafe- eval', so the browser blocked the Clerk JS bundle fetched from the per-instance frontend-API host. The connect-src allowlist of '*.clerk.accounts.dev' was also both too narrow (no production *.clerk.services host, no real FAPI host on the actual subdomain) and hard-coded — it didn't track changes in the publishable key. Fix: - next.config.ts now derives the active Clerk frontend-API host from NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY at build time: pk_test_<slug>-<suffix> -> <slug>.clerk.accounts.dev pk_live_<slug>-<suffix> -> <slug>.clerk.services The slug itself may contain digits and hyphens, so the suffix is captured as the final dash-group (regex: ^pk_(test|live)_(.+?)- ([a-z0-9]+)$). Verified against the user's actual key 'pk_test_useful-louse-74-O42m8W' -> 'useful-louse-74.clerk.accounts.dev'. - script-src now includes https://<fapiHost> so Clerk can pull its browser bundle from <fapiHost>/npm/@clerk/clerk-js@<v>/dist/... - connect-src now includes https://<fapiHost> + wss://<fapiHost> for Clerk's session/socket traffic. - img-src now whitelists https://img.clerk.com (Clerk-served user avatars) and keeps the open 'https:' for memorial images that we proxy through our own /api/image. - remotePatterns in next/image now lists img.clerk.com alongside the dynamic S3 host, so next/image (if/when adopted) will accept Clerk avatar URLs. - If the publishable key is absent, the FAPI host simply isn't added to either directive, so dev without Clerk configured stays functional. The build emits the exact right CSP for the active environment without any hand-editing when promoting test -> live. |
||
|---|---|---|
| .github/workflows | ||
| docs | ||
| prisma | ||
| public | ||
| scripts | ||
| src | ||
| .dockerignore | ||
| .env.example | ||
| .gitignore | ||
| docker-compose.dev.yaml | ||
| docker-compose.yaml | ||
| Dockerfile | ||
| Dockerfile.dev | ||
| eslint.config.mjs | ||
| next.config.ts | ||
| package-lock.json | ||
| package.json | ||
| postcss.config.mjs | ||
| tsconfig.json | ||
| vitest.config.ts | ||
This is a Next.js project bootstrapped with create-next-app.
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.