From fd954238ea1129b2e20d9d5e6ac82ec0ada9141c Mon Sep 17 00:00:00 2001
From: "Ishan (OpenClaw)" <ishan+openclaw@localhost>
Date: Sat, 7 Feb 2026 10:09:21 +0000
Subject: [PATCH] refactor(frontend): share Clerk publishable-key heuristic
 across client+server

---
 frontend/src/auth/clerk.tsx                   | 20 ++++-------------
 frontend/src/auth/clerkKey.ts                 | 22 +++++++++++++++++++
 .../src/components/providers/AuthProvider.tsx |  4 ++--
 frontend/src/proxy.ts                         |  5 ++++-
 4 files changed, 32 insertions(+), 19 deletions(-)
 create mode 100644 frontend/src/auth/clerkKey.ts

diff --git a/frontend/src/auth/clerk.tsx b/frontend/src/auth/clerk.tsx
index fed6cf24..d8d270c7 100644
--- a/frontend/src/auth/clerk.tsx
+++ b/frontend/src/auth/clerk.tsx
@@ -17,26 +17,14 @@ import {
 
 import type { ComponentProps } from "react";
 
-export function isValidClerkPublishableKey(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 isClerkEnabled(): boolean {
   // IMPORTANT: keep this in sync with AuthProvider; otherwise components like
   // <SignedOut/> may render without a <ClerkProvider/> and crash during prerender.
-  return isValidClerkPublishableKey(process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY);
+  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 00000000..3e361862
--- /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 30000cf1..24234def 100644
--- a/frontend/src/components/providers/AuthProvider.tsx
+++ b/frontend/src/components/providers/AuthProvider.tsx
@@ -3,12 +3,12 @@
 import { ClerkProvider } from "@clerk/nextjs";
 import type { ReactNode } from "react";
 
-import { isValidClerkPublishableKey } from "@/auth/clerk";
+import { isLikelyValidClerkPublishableKey } from "@/auth/clerkKey";
 
 export function AuthProvider({ children }: { children: ReactNode }) {
   const publishableKey = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY;
 
-  if (!isValidClerkPublishableKey(publishableKey)) {
+  if (!isLikelyValidClerkPublishableKey(publishableKey)) {
     return <>{children}</>;
   }
 
diff --git a/frontend/src/proxy.ts b/frontend/src/proxy.ts
index 75b30866..429d9ae8 100644
--- a/frontend/src/proxy.ts
+++ b/frontend/src/proxy.ts
@@ -1,7 +1,10 @@
 import { NextResponse } from "next/server";
 import { clerkMiddleware } from "@clerk/nextjs/server";
 
-const isClerkEnabled = () => Boolean(process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY);
+import { isLikelyValidClerkPublishableKey } from "@/auth/clerkKey";
+
+const isClerkEnabled = () =>
+  isLikelyValidClerkPublishableKey(process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY);
 
 export default isClerkEnabled() ? clerkMiddleware() : () => NextResponse.next();