diff --git a/frontend/src/auth/clerk.tsx b/frontend/src/auth/clerk.tsx index 0582a09..02cff2c 100644 --- a/frontend/src/auth/clerk.tsx +++ b/frontend/src/auth/clerk.tsx @@ -17,11 +17,14 @@ import { import type { ComponentProps } from "react"; +import { isLikelyValidClerkPublishableKey } from "@/auth/clerkKey"; + export function isClerkEnabled(): boolean { - // Invariant: Clerk is disabled ONLY when the publishable key is absent. - // If a key is present, we assume Clerk is intended to be enabled and we let - // Clerk fail fast if the key is invalid/misconfigured. - return Boolean(process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY); + // IMPORTANT: keep this in sync with AuthProvider; otherwise components like + // may render without a and crash during prerender. + return isLikelyValidClerkPublishableKey( + process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY, + ); } export function SignedIn(props: { children: ReactNode }) { diff --git a/frontend/src/auth/clerkKey.ts b/frontend/src/auth/clerkKey.ts new file mode 100644 index 0000000..3e36186 --- /dev/null +++ b/frontend/src/auth/clerkKey.ts @@ -0,0 +1,22 @@ +// Shared Clerk publishable-key gating logic. +// +// IMPORTANT: keep this file dependency-free (no `"use client"`, no React, no Clerk imports) +// so it can be used from both client and server/edge entrypoints. + +export function isLikelyValidClerkPublishableKey(key: string | undefined): key is string { + if (!key) return false; + + // Clerk publishable keys look like: pk_test_... or pk_live_... + // In CI we want builds to stay secretless; if the key isn't present/valid, + // we skip Clerk entirely so `next build` can prerender. + // + // Note: this is a conservative heuristic (not an authoritative validation). + const m = /^pk_(test|live)_([A-Za-z0-9]+)$/.exec(key); + if (!m) return false; + + const body = m[2]; + if (body.length < 16) return false; + if (/^0+$/.test(body)) return false; + + return true; +} diff --git a/frontend/src/components/providers/AuthProvider.tsx b/frontend/src/components/providers/AuthProvider.tsx index 941063d..9130928 100644 --- a/frontend/src/components/providers/AuthProvider.tsx +++ b/frontend/src/components/providers/AuthProvider.tsx @@ -3,23 +3,7 @@ import { ClerkProvider } from "@clerk/nextjs"; import type { ReactNode } from "react"; -function isLikelyValidClerkPublishableKey( - key: string | undefined, -): key is string { - if (!key) return false; - // Clerk publishable keys look like: pk_test_... or pk_live_... - // In CI we want builds to stay secretless; if the key isn't present/valid, - // we skip Clerk entirely so `next build` can prerender. - // - // Note: Clerk appears to validate key *contents*, not just shape. We therefore - // use a conservative heuristic to avoid treating obvious placeholders as valid. - const m = /^pk_(test|live)_([A-Za-z0-9]+)$/.exec(key); - if (!m) return false; - const body = m[2]; - if (body.length < 16) return false; - if (/^0+$/.test(body)) return false; - return true; -} +import { isLikelyValidClerkPublishableKey } from "@/auth/clerkKey"; export function AuthProvider({ children }: { children: ReactNode }) { const publishableKey = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY; diff --git a/frontend/src/proxy.ts b/frontend/src/proxy.ts index c6fda3b..429d9ae 100644 --- a/frontend/src/proxy.ts +++ b/frontend/src/proxy.ts @@ -1,8 +1,10 @@ import { NextResponse } from "next/server"; import { clerkMiddleware } from "@clerk/nextjs/server"; +import { isLikelyValidClerkPublishableKey } from "@/auth/clerkKey"; + const isClerkEnabled = () => - Boolean(process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY); + isLikelyValidClerkPublishableKey(process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY); export default isClerkEnabled() ? clerkMiddleware() : () => NextResponse.next();