feat: developer access permission gates webhooks/API keys/BYOK (v0.71.0)

Webhooks, self-serve API keys, and BYOK AI provider keys had zero
access gating -- any logged-in user, any tier. Adds users.isDeveloper
(boolean, admin-toggled in admin/users/[id] alongside role/tier),
checked via a single hasDeveloperAccess() (lib/permissions.ts) so a
future subscription-tier auto-grant is a one-line change there, not
a redesign across call sites.

requireDeveloper() (lib/api-auth.ts) wraps requireSession() with a
fresh isDeveloper check (same reasoning as requireAdmin re-querying
role: session.user's cookieCache can be up to 5 minutes stale) and
replaces requireSession in all 8 gated routes: webhooks CRUD +
deliveries + redeliver, api-keys CRUD, ai-keys CRUD.

Settings UI: the sidebar hides API Keys/Webhooks nav entries for
non-developers; those pages and the BYOK section of Settings -> AI
show a locked notice instead of the manager component when accessed
directly.

Migration grandfathers in anyone who already has a webhook, API key,
or BYOK key row -- ships as a new gate on existing features, not a
silent lockout of active integrations.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

apps/web/app/(app)/settings/ai/page.tsx

@@ -6,6 +6,7 @@ import { UNLIMITED, getRecipeCount, getStorageUsedMb } from "@/lib/tiers";
 import { ByokManager } from "@/components/settings/byok-manager";
 import { ModelPrefsForm } from "@/components/settings/model-prefs-form";
 import { UsageQuotaSection } from "@/components/settings/usage-quota-section";
+import { DeveloperLockedNotice } from "@/components/settings/developer-locked-notice";
 import { getMessages, formatMessage } from "@/lib/i18n/server";
 
 export const metadata: Metadata = {};
@@ -27,7 +28,7 @@ export default async function AiSettingsPage() {
     }),
     // Tier comes from the DB, not the (up to 5-minute-stale) session cookie
     // cache, so a just-changed tier's limits show up immediately here.
-    db.query.users.findFirst({ where: eq(users.id, session.user.id), columns: { tier: true } }),
+    db.query.users.findFirst({ where: eq(users.id, session.user.id), columns: { tier: true, isDeveloper: true } }),
   ]);
 
   const [tierDef, usage, recipeCount, storageUsedMb] = await Promise.all([
@@ -80,7 +81,11 @@ export default async function AiSettingsPage() {
             {m.settings.byok.description}
           </p>
         </div>
-        <ByokManager initialKeys={aiKeys.map((k) => k.provider)} />
+        {dbUser?.isDeveloper ? (
+          <ByokManager initialKeys={aiKeys.map((k) => k.provider)} />
+        ) : (
+          <DeveloperLockedNotice message={m.settings.developerLockedNotice} />
+        )}
       </section>
 
       <section className="rounded-xl border p-6 space-y-4">

apps/web/app/(app)/settings/api-keys/page.tsx

@@ -3,8 +3,9 @@ import { headers } from "next/headers";
 import Link from "next/link";
 import { ExternalLink } from "lucide-react";
 import { auth } from "@/lib/auth/server";
-import { db, apiKeys, eq } from "@epicure/db";
+import { db, apiKeys, users, eq } from "@epicure/db";
 import { ApiKeysManager } from "@/components/settings/api-keys-manager";
+import { DeveloperLockedNotice } from "@/components/settings/developer-locked-notice";
 import { getMessages } from "@/lib/i18n/server";
 
 export const metadata: Metadata = {};
@@ -14,16 +15,20 @@ export default async function ApiKeysPage() {
   if (!session) return null;
   const m = getMessages((session.user as { locale?: string }).locale);
 
-  const keys = await db
-    .select({
-      id: apiKeys.id,
-      name: apiKeys.name,
-      scope: apiKeys.scope,
-      lastUsedAt: apiKeys.lastUsedAt,
-      createdAt: apiKeys.createdAt,
-    })
-    .from(apiKeys)
-    .where(eq(apiKeys.userId, session.user.id));
+  const dbUser = (await db.select({ isDeveloper: users.isDeveloper }).from(users).where(eq(users.id, session.user.id)).limit(1))[0];
+
+  const keys = dbUser?.isDeveloper
+    ? await db
+        .select({
+          id: apiKeys.id,
+          name: apiKeys.name,
+          scope: apiKeys.scope,
+          lastUsedAt: apiKeys.lastUsedAt,
+          createdAt: apiKeys.createdAt,
+        })
+        .from(apiKeys)
+        .where(eq(apiKeys.userId, session.user.id))
+    : [];
 
   return (
     <div className="space-y-8">
@@ -42,15 +47,18 @@ export default async function ApiKeysPage() {
             {m.settings.apiKeysPage.docsLink}
           </Link>
         </div>
-        <ApiKeysManager
-          initialKeys={keys.map((k) => ({
-            id: k.id,
-            name: k.name,
-            scope: k.scope,
-            lastUsedAt: k.lastUsedAt ? k.lastUsedAt.toISOString() : null,
-            createdAt: k.createdAt.toISOString(),
-          }))}
-        />
+        {!dbUser?.isDeveloper && <DeveloperLockedNotice message={m.settings.developerLockedNotice} />}
+        {dbUser?.isDeveloper && (
+          <ApiKeysManager
+            initialKeys={keys.map((k) => ({
+              id: k.id,
+              name: k.name,
+              scope: k.scope,
+              lastUsedAt: k.lastUsedAt ? k.lastUsedAt.toISOString() : null,
+              createdAt: k.createdAt.toISOString(),
+            }))}
+          />
+        )}
       </section>
     </div>
   );

apps/web/app/(app)/settings/layout.tsx

@@ -1,5 +1,6 @@
 import { headers } from "next/headers";
 import { auth } from "@/lib/auth/server";
+import { db, users, eq } from "@epicure/db";
 import { SettingsSidebar } from "@/components/settings/settings-sidebar";
 import { getMessages } from "@/lib/i18n/server";
 
@@ -7,6 +8,10 @@ export default async function SettingsLayout({ children }: { children: React.Rea
   const session = await auth.api.getSession({ headers: await headers() });
   const m = getMessages((session?.user as { locale?: string })?.locale);
 
+  const dbUser = session
+    ? (await db.select({ isDeveloper: users.isDeveloper }).from(users).where(eq(users.id, session.user.id)).limit(1))[0]
+    : undefined;
+
   return (
     <div className="max-w-5xl mx-auto">
       <div className="mb-8">
@@ -14,7 +19,7 @@ export default async function SettingsLayout({ children }: { children: React.Rea
         <p className="text-muted-foreground mt-1">{m.settings.subtitle}</p>
       </div>
       <div className="flex flex-col md:flex-row gap-4 md:gap-8 md:items-start">
-        <SettingsSidebar />
+        <SettingsSidebar isDeveloper={dbUser?.isDeveloper ?? false} />
         <main className="flex-1 min-w-0 space-y-6">{children}</main>
       </div>
     </div>

apps/web/app/(app)/settings/webhooks/page.tsx

@@ -1,8 +1,9 @@
 import type { Metadata } from "next";
 import { headers } from "next/headers";
 import { auth } from "@/lib/auth/server";
-import { db, webhooks, eq } from "@epicure/db";
+import { db, webhooks, users, eq } from "@epicure/db";
 import { WebhooksManager } from "@/components/settings/webhooks-manager";
+import { DeveloperLockedNotice } from "@/components/settings/developer-locked-notice";
 import { getMessages } from "@/lib/i18n/server";
 
 export const metadata: Metadata = {};
@@ -12,16 +13,20 @@ export default async function WebhooksPage() {
   if (!session) return null;
   const m = getMessages((session.user as { locale?: string }).locale);
 
-  const rows = await db
-    .select({
-      id: webhooks.id,
-      url: webhooks.url,
-      events: webhooks.events,
-      active: webhooks.active,
-      createdAt: webhooks.createdAt,
-    })
-    .from(webhooks)
-    .where(eq(webhooks.userId, session.user.id));
+  const dbUser = (await db.select({ isDeveloper: users.isDeveloper }).from(users).where(eq(users.id, session.user.id)).limit(1))[0];
+
+  const rows = dbUser?.isDeveloper
+    ? await db
+        .select({
+          id: webhooks.id,
+          url: webhooks.url,
+          events: webhooks.events,
+          active: webhooks.active,
+          createdAt: webhooks.createdAt,
+        })
+        .from(webhooks)
+        .where(eq(webhooks.userId, session.user.id))
+    : [];
 
   return (
     <div className="space-y-8">
@@ -32,15 +37,18 @@ export default async function WebhooksPage() {
             {m.settings.webhooksPage.description}
           </p>
         </div>
-        <WebhooksManager
-          initialWebhooks={rows.map((w) => ({
-            id: w.id,
-            url: w.url,
-            events: w.events,
-            active: w.active,
-            createdAt: w.createdAt.toISOString(),
-          }))}
-        />
+        {!dbUser?.isDeveloper && <DeveloperLockedNotice message={m.settings.developerLockedNotice} />}
+        {dbUser?.isDeveloper && (
+          <WebhooksManager
+            initialWebhooks={rows.map((w) => ({
+              id: w.id,
+              url: w.url,
+              events: w.events,
+              active: w.active,
+              createdAt: w.createdAt.toISOString(),
+            }))}
+          />
+        )}
       </section>
     </div>
   );