feat(security): Move API Key to Cookies

CLAUDE.md

@@ -118,7 +118,7 @@ function MyComponent() {
   const {
     isAuthenticated, isHydrated,
     session, currentUser, googleProfile,
-    apiKeys, activeKey, addKey, removeKey, setKeys,
+    apiKeys, activeKey, addKey, removeKey,
     loginWithToken, logout,
   } = useAuth();
 }

app/(main)/keystore/page.tsx

@@ -13,8 +13,6 @@ import AddKeyModal from "@/app/components/keystore/AddKeyModal";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { useApp } from "@/app/lib/context/AppContext";
 import { useToast } from "@/app/hooks/useToast";
-import { apiFetch } from "@/app/lib/apiClient";
-import { APIKey } from "@/app/lib/types/credentials";
 
 export default function KaapiKeystore() {
   const { sidebarCollapsed } = useApp();
@@ -24,15 +22,11 @@ export default function KaapiKeystore() {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [newKeyLabel, setNewKeyLabel] = useState("");
   const [newKeyValue, setNewKeyValue] = useState("");
-  const [newKeyProvider, setNewKeyProvider] = useState("Kaapi");
-  const [visibleKeys, setVisibleKeys] = useState<Set<string>>(new Set());
-  const [copiedKeyId, setCopiedKeyId] = useState<string | null>(null);
   const [isValidating, setIsValidating] = useState(false);
 
   const resetForm = () => {
     setNewKeyLabel("");
     setNewKeyValue("");
-    setNewKeyProvider("Kaapi");
   };
 
   const handleAddKey = async () => {
@@ -41,63 +35,28 @@ export default function KaapiKeystore() {
       return;
     }
 
-    const trimmedKey = newKeyValue.trim();
     setIsValidating(true);
-
     try {
-      await apiFetch("/api/apikeys/verify", trimmedKey);
+      await addKey({ key: newKeyValue.trim(), label: newKeyLabel.trim() });
+      resetForm();
+      setIsModalOpen(false);
+      toast.success("API key added successfully");
     } catch (err) {
-      console.error("API key validation failed:", err);
-      toast.error("Invalid API key. Please check the key and try again.");
+      toast.error(
+        err instanceof Error
+          ? err.message
+          : "Invalid API key. Please check the key and try again.",
+      );
+    } finally {
       setIsValidating(false);
-      return;
     }
-
-    const newKey: APIKey = {
-      id: Date.now().toString(),
-      label: newKeyLabel.trim(),
-      key: trimmedKey,
-      provider: newKeyProvider,
-      createdAt: new Date().toISOString(),
-    };
-
-    addKey(newKey);
-    resetForm();
-    setIsModalOpen(false);
-    setIsValidating(false);
-    toast.success("API key added successfully");
   };
 
-  const handleDeleteKey = (id: string) => {
-    removeApiKey(id);
-    setVisibleKeys((prev) => {
-      const next = new Set(prev);
-      next.delete(id);
-      return next;
-    });
+  const handleDeleteKey = async (id: string) => {
+    await removeApiKey(id);
     toast.success("API key removed");
   };
 
-  const toggleKeyVisibility = (id: string) => {
-    setVisibleKeys((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  };
-
-  const copyToClipboard = async (text: string, id: string) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopiedKeyId(id);
-      toast.success("API key copied to clipboard");
-      setTimeout(() => setCopiedKeyId(null), 1500);
-    } catch {
-      toast.error("Failed to copy API key");
-    }
-  };
-
   const closeAddModal = () => {
     setIsModalOpen(false);
     resetForm();
@@ -118,10 +77,6 @@ export default function KaapiKeystore() {
             <div className="max-w-3xl mx-auto">
               <KeysCard
                 apiKeys={apiKeys}
-                visibleKeys={visibleKeys}
-                copiedKeyId={copiedKeyId}
-                onToggleVisibility={toggleKeyVisibility}
-                onCopy={copyToClipboard}
                 onDelete={handleDeleteKey}
                 onAddNew={() => setIsModalOpen(true)}
               />
@@ -134,11 +89,9 @@ export default function KaapiKeystore() {
         open={isModalOpen}
         newKeyLabel={newKeyLabel}
         newKeyValue={newKeyValue}
-        newKeyProvider={newKeyProvider}
         isValidating={isValidating}
         onLabelChange={setNewKeyLabel}
         onValueChange={setNewKeyValue}
-        onProviderChange={setNewKeyProvider}
         onAddKey={handleAddKey}
         onClose={closeAddModal}
       />

app/api/apikeys/route.ts

@@ -0,0 +1,72 @@
+import { NextRequest, NextResponse } from "next/server";
+import { apiClient } from "@/app/lib/apiClient";
+import { clearApiKeyCookies, setApiKeyCookies } from "@/app/lib/authCookie";
+import type { AddApiKeyRequest, ApiKeyMeta } from "@/app/lib/types/credentials";
+
+function maskKey(key: string): string {
+  const tail = key.slice(-4);
+  return `${"•".repeat(8)}${tail}`;
+}
+
+export async function POST(request: NextRequest) {
+  let body: AddApiKeyRequest;
+  try {
+    body = (await request.json()) as AddApiKeyRequest;
+  } catch {
+    return NextResponse.json(
+      { error: "Invalid request body" },
+      { status: 400 },
+    );
+  }
+
+  const key = body.key?.trim();
+  const label = body.label?.trim();
+
+  if (!key || !label) {
+    return NextResponse.json(
+      { error: "Both a label and an API key are required" },
+      { status: 400 },
+    );
+  }
+
+  const verifyRequest = new Request(request.url, {
+    headers: {
+      "X-API-KEY": key,
+      Cookie: request.headers.get("Cookie") || "",
+    },
+  });
+
+  let status: number;
+  try {
+    ({ status } = await apiClient(verifyRequest, "/api/v1/apikeys/verify"));
+  } catch {
+    return NextResponse.json(
+      { error: "Failed to reach backend for API key verification" },
+      { status: 502 },
+    );
+  }
+
+  if (status < 200 || status >= 300) {
+    return NextResponse.json(
+      { error: "Invalid API key. Please check the key and try again." },
+      { status: 401 },
+    );
+  }
+
+  const meta: ApiKeyMeta = {
+    id: crypto.randomUUID(),
+    label,
+    masked: maskKey(key),
+    createdAt: new Date().toISOString(),
+  };
+
+  const res = NextResponse.json({ data: meta }, { status: 200 });
+  setApiKeyCookies(res, key, meta);
+  return res;
+}
+
+export async function DELETE() {
+  const res = NextResponse.json({ success: true }, { status: 200 });
+  clearApiKeyCookies(res);
+  return res;
+}

app/api/auth/logout/route.ts

@@ -1,6 +1,10 @@
 import { NextRequest, NextResponse } from "next/server";
 import { apiClient } from "@/app/lib/apiClient";
-import { clearFeaturesCookie, clearRoleCookie } from "@/app/lib/authCookie";
+import {
+  clearApiKeyCookies,
+  clearFeaturesCookie,
+  clearRoleCookie,
+} from "@/app/lib/authCookie";
 
 export async function POST(request: NextRequest) {
   const { status, data, headers } = await apiClient(
@@ -18,6 +22,7 @@ export async function POST(request: NextRequest) {
 
   clearRoleCookie(res);
   clearFeaturesCookie(res);
+  clearApiKeyCookies(res);
 
   return res;
 }

app/api/evaluations/stt/runs/route.ts

@@ -1,5 +1,5 @@
 import { NextResponse } from "next/server";
-import { apiClient } from "@/app/lib/apiClient";
+import { apiClient, getRequestApiKey } from "@/app/lib/apiClient";
 
 export async function GET(request: Request) {
   try {
@@ -18,7 +18,7 @@ export async function GET(request: Request) {
 
 export async function POST(request: Request) {
   try {
-    const apiKey = request.headers.get("X-API-KEY");
+    const apiKey = getRequestApiKey(request);
     if (!apiKey) {
       return NextResponse.json(
         {

app/components/keystore/AddKeyModal.tsx

@@ -1,19 +1,15 @@
 "use client";
 
-import { Button, Field, Modal, Select } from "@/app/components/ui";
-import { InfoIcon } from "@/app/components/icons";
-
-const PROVIDERS = [{ value: "Kaapi", label: "Kaapi" }];
+import { Button, Field, Modal } from "@/app/components/ui";
+import { APP_NAME } from "@/app/lib/constants";
 
 interface AddKeyModalProps {
   open: boolean;
   newKeyLabel: string;
   newKeyValue: string;
-  newKeyProvider: string;
   isValidating?: boolean;
   onLabelChange: (value: string) => void;
   onValueChange: (value: string) => void;
-  onProviderChange: (value: string) => void;
   onAddKey: () => void;
   onClose: () => void;
 }
@@ -22,11 +18,9 @@ export default function AddKeyModal({
   open,
   newKeyLabel,
   newKeyValue,
-  newKeyProvider,
   isValidating,
   onLabelChange,
   onValueChange,
-  onProviderChange,
   onAddKey,
   onClose,
 }: AddKeyModalProps) {
@@ -43,20 +37,16 @@ export default function AddKeyModal({
       <div className="px-6 pb-2">
         <p className="text-sm mb-5 text-text-secondary">
           Add a new API key to use in your evaluation workflows. Keys are stored
-          locally in your browser.
+          securely server-side and cannot be viewed again after they are added.
         </p>
 
         <div className="space-y-4">
-          <div>
-            <label className="block text-xs font-medium text-text-secondary mb-1">
-              Provider
-            </label>
-            <Select
-              value={newKeyProvider}
-              onChange={(e) => onProviderChange(e.target.value)}
-              options={PROVIDERS}
-            />
-          </div>
+          <Field
+            label="Provider"
+            value={APP_NAME}
+            onChange={() => {}}
+            disabled
+          />
 
           <Field
             label="Label"
@@ -73,15 +63,6 @@ export default function AddKeyModal({
             placeholder="Paste your API key here"
           />
         </div>
-
-        <div className="mt-5 rounded-md p-3 bg-accent-primary/5 border border-accent-primary/20">
-          <div className="flex gap-2">
-            <InfoIcon className="w-4 h-4 shrink-0 mt-0.5 text-accent-primary" />
-            <p className="text-xs text-text-secondary">
-              API keys are stored in your browser&apos;s local storage.
-            </p>
-          </div>
-        </div>
       </div>
 
       <div className="border-t border-border px-6 py-4 flex items-center justify-end gap-3 shrink-0">