Add branded OAuth consent page

next.config.ts

@@ -1,6 +1,20 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
+  headers: async () => {
+    return [
+      {
+        source: "/oauth-consent",
+        headers: [
+          {
+            key: "Content-Security-Policy",
+            value: "frame-ancestors 'none'",
+          },
+          { key: "X-Frame-Options", value: "DENY" },
+        ],
+      },
+    ];
+  },
   redirects: async () => {
     return [
       {

package.json

@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@clerk/mcp-tools": "^0.1.1",
-    "@clerk/nextjs": "^6.39.2",
+    "@clerk/nextjs": "^7.7.1",
     "@clerk/themes": "^2.4.19",
     "@mcp-ui/server": "^5.10.0",
     "@modelcontextprotocol/sdk": "1.26.0",

src/app/layout.tsx

@@ -55,11 +55,11 @@ export default function RootLayout({
       appearance={{
         variables: {
           colorPrimary: '#81b300',
-          colorText: '#1c2024',
-          colorTextSecondary: '#60646c',
+          colorForeground: '#1c2024',
+          colorMutedForeground: '#60646c',
           colorBackground: '#f2f0e7',
-          colorInputBackground: '#f2f0e7',
-          colorInputText: '#1c2024',
+          colorInput: '#f2f0e7',
+          colorInputForeground: '#1c2024',
           fontFamily: 'var(--font-inter), Inter, sans-serif',
           borderRadius: '0px',
         },

src/app/oauth-consent/page.tsx

@@ -0,0 +1,35 @@
+import { OAuthConsent, RedirectToSignIn, Show } from "@clerk/nextjs";
+import type { Metadata } from "next";
+import { Col } from "@/components/col";
+import { KernelWordmark } from "@/components/icons";
+
+export const metadata: Metadata = {
+  title: "authorize access | Kernel",
+  referrer: "strict-origin-when-cross-origin",
+};
+
+export default function OAuthConsentPage(): React.ReactElement {
+  return (
+    <Show when="signed-in" fallback={<RedirectToSignIn />}>
+      <Col className="min-h-screen items-center justify-center p-8">
+        <Col className="w-full max-w-md items-center gap-8">
+          <KernelWordmark className="text-foreground" width={100} height={22} />
+          <OAuthConsent
+            appearance={{
+              elements: {
+                rootBox: "w-full",
+                cardBox: "w-full",
+                card: "w-full",
+              },
+            }}
+            fallback={
+              <p className="text-sm text-muted-foreground">
+                loading authorization...
+              </p>
+            }
+          />
+        </Col>
+      </Col>
+    </Show>
+  );
+}

src/app/select-org/page.tsx

@@ -2,7 +2,7 @@
 
 import {
   CreateOrganization,
-  UserButton,
+  SignOutButton,
   useAuth,
   useOrganizationList,
   useUser,
@@ -244,9 +244,11 @@ function SelectOrgContent(): React.ReactElement {
     return (
       <Col className="min-h-screen items-center justify-center">
         <div className="absolute top-6 right-6">
-          <UserButton
-            afterSignOutUrl={`/select-org?${searchParams.toString()}`}
-          />
+          <SignOutButton redirectUrl={`/select-org?${searchParams.toString()}`}>
+            <button className="border-[0.5px] border-foreground px-4 py-2 text-sm cursor-pointer hover:underline">
+              switch account
+            </button>
+          </SignOutButton>
         </div>
         <Col className="text-center max-w-md mx-auto p-8 gap-8">
           <Col className="items-center gap-4">
@@ -279,9 +281,11 @@ function SelectOrgContent(): React.ReactElement {
   return (
     <Col className="min-h-screen items-center justify-center">
       <div className="absolute top-6 right-6">
-        <UserButton
-          afterSignOutUrl={`/select-org?${searchParams.toString()}`}
-        />
+        <SignOutButton redirectUrl={`/select-org?${searchParams.toString()}`}>
+          <button className="border-[0.5px] border-foreground px-4 py-2 text-sm cursor-pointer hover:underline">
+            switch account
+          </button>
+        </SignOutButton>
       </div>
 
       <Col className="max-w-md w-full mx-auto p-8 gap-8">