feat: Encrypt API keys on the server before saving (#392)

bracesproul · web-flow · commit a825e82abd7d · 2025-09-10T16:31:01.000-07:00
diff --git a/apps/web-v2/.env.example b/apps/web-v2/.env.example
@@ -33,3 +33,9 @@ SUPABASE_JWT_SECRET=""
 
 # Client side id for feature flags
 NEXT_PUBLIC_LD_CLIENT_SIDE_ID=""
+
+# Encryption key for secrets (e.g. API keys)
+# Generate with `openssl rand -hex 32`.
+# This value must be the same across all instances
+# of the app, and where the secrets are read.
+SECRETS_ENCRYPTION_KEY=""
diff --git a/apps/web-v2/src/app/api/settings/api-keys/route.ts b/apps/web-v2/src/app/api/settings/api-keys/route.ts
@@ -1,6 +1,44 @@
 import { NextRequest, NextResponse } from "next/server";
 import { getSupabaseClient } from "@/lib/auth/supabase-client";
 import { decodeJWT } from "@/lib/jwt-utils";
+import { decryptSecret, encryptSecret } from "@/lib/crypto";
+
+function encryptApiKeys(
+  apiKeys: Record<string, string>,
+): Record<string, string> {
+  const encryptionKey = process.env.SECRETS_ENCRYPTION_KEY;
+  if (!encryptionKey) {
+    throw new Error("Encryption key not found");
+  }
+
+  const encryptedApiKeys = Object.fromEntries(
+    Object.entries(apiKeys).map(([key, value]) => {
+      return [key, encryptSecret(value, encryptionKey)];
+    }),
+  );
+  return encryptedApiKeys;
+}
+
+function decryptApiKeys(
+  apiKeys: Record<string, string>,
+): Record<string, string> {
+  const encryptionKey = process.env.SECRETS_ENCRYPTION_KEY;
+  if (!encryptionKey) {
+    throw new Error("Encryption key not found");
+  }
+
+  const decryptedApiKeys = Object.fromEntries(
+    Object.entries(apiKeys).map(([key, value]) => {
+      return [key, decryptSecret(value, encryptionKey)];
+    }),
+  );
+  return decryptedApiKeys;
+}
+
+function isTokenExpired(exp: number): boolean {
+  const currentTime = Date.now() / 1000;
+  return currentTime > exp;
+}
 
 export async function POST(request: NextRequest) {
   try {
@@ -18,7 +56,7 @@ export async function POST(request: NextRequest) {
     }
 
     const payload = decodeJWT(accessToken, jwtSecret);
-    if (!payload || !payload.sub) {
+    if (!payload || !payload.sub || isTokenExpired(payload.exp)) {
       return NextResponse.json(
         { error: "Invalid or expired token" },
         { status: 401 },
@@ -39,10 +77,11 @@ export async function POST(request: NextRequest) {
 
     // Filter out null, undefined, or empty string values
     const nonNullApiKeys = Object.fromEntries(
-      Object.entries(apiKeys).filter(([_, value]) => {
+      Object.entries<string>(apiKeys).filter(([_, value]) => {
         return value && typeof value === "string" && value.trim() !== "";
       }),
     );
+    const encryptedApiKeys = encryptApiKeys(nonNullApiKeys);
 
     await supabase.auth.setSession({
       access_token: accessToken,
@@ -52,7 +91,7 @@ export async function POST(request: NextRequest) {
     const { error: upsertError } = await supabase.from("users_config").upsert(
       {
         user_id: userId,
-        api_keys: nonNullApiKeys,
+        api_keys: encryptedApiKeys,
       } as any,
       {
         onConflict: "user_id",
@@ -82,3 +121,75 @@ export async function POST(request: NextRequest) {
     );
   }
 }
+
+export async function GET(request: NextRequest) {
+  try {
+    const supabase = getSupabaseClient();
+
+    const accessToken = request.headers.get("x-access-token");
+    const refreshToken = request.headers.get("x-refresh-token");
+    const jwtSecret = process.env.SUPABASE_JWT_SECRET;
+
+    if (!accessToken || !refreshToken || !jwtSecret) {
+      return NextResponse.json(
+        { error: "Authentication required" },
+        { status: 401 },
+      );
+    }
+
+    const payload = decodeJWT(accessToken, jwtSecret);
+    if (!payload || !payload.sub || isTokenExpired(payload.exp)) {
+      return NextResponse.json(
+        { error: "Invalid or expired token" },
+        { status: 401 },
+      );
+    }
+
+    const userId = payload.sub;
+
+    await supabase.auth.setSession({
+      access_token: accessToken,
+      refresh_token: refreshToken,
+    });
+
+    const { data, error } = await supabase
+      .from("users_config")
+      .select("api_keys")
+      .eq("user_id", userId)
+      .single();
+
+    if (error && error.code === "PGRST116") {
+      return NextResponse.json({ error: "No API keys found" }, { status: 404 });
+    }
+
+    if (!data || error) {
+      return NextResponse.json(
+        { error: "Failed to fetch API keys" },
+        { status: 500 },
+      );
+    }
+
+    if (!("api_keys" in data)) {
+      return NextResponse.json(
+        { error: "API keys not found" },
+        { status: 404 },
+      );
+    }
+
+    const encryptedApiKeys = (data as Record<string, any>).api_keys;
+    const decryptedApiKeys = decryptApiKeys(encryptedApiKeys);
+
+    return NextResponse.json(
+      {
+        apiKeys: decryptedApiKeys,
+      },
+      { status: 200 },
+    );
+  } catch (error) {
+    console.error("API keys save error:", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 },
+    );
+  }
+}
diff --git a/apps/web-v2/src/features/settings/index.tsx b/apps/web-v2/src/features/settings/index.tsx
@@ -1,36 +1,66 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Settings, Loader2 } from "lucide-react";
 import { Separator } from "@/components/ui/separator";
 import { PasswordInput } from "@/components/ui/password-input";
 import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
-import { useLocalStorage } from "@/hooks/use-local-storage";
 import { toast } from "sonner";
 import { useAuthContext } from "@/providers/Auth";
+import { Session } from "@/lib/auth/types";
+
+async function getSavedApiKeys(
+  session: Session,
+): Promise<Record<string, string>> {
+  try {
+    if (!session.accessToken || !session.refreshToken) {
+      toast.error("No session found", { richColors: true });
+      return {};
+    }
+
+    const response = await fetch("/api/settings/api-keys", {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        "x-access-token": session.accessToken,
+        "x-refresh-token": session.refreshToken,
+      },
+    });
+
+    if (response.status === 404) {
+      const errorData = await response.json();
+      if (errorData.error === "No API keys found") {
+        return {};
+      }
+    }
+
+    if (!response.ok) {
+      throw new Error("Failed to fetch API keys");
+    }
+
+    const data = await response.json();
+    return data.apiKeys;
+  } catch (error) {
+    console.error("Error fetching API keys:", error);
+    toast.error("Failed to fetch API keys", { richColors: true });
+    return {};
+  }
+}
 
 /**
  * The Settings interface component containing API Keys configuration.
  */
 export default function SettingsInterface(): React.ReactNode {
-  // Use localStorage hooks for each API key
-  const [openaiApiKey, setOpenaiApiKey] = useLocalStorage<string>(
-    "lg:settings:openaiApiKey",
-    "",
-  );
-  const [anthropicApiKey, setAnthropicApiKey] = useLocalStorage<string>(
-    "lg:settings:anthropicApiKey",
-    "",
-  );
-  const [googleApiKey, setGoogleApiKey] = useLocalStorage<string>(
-    "lg:settings:googleApiKey",
-    "",
-  );
-
+  const [loading, setLoading] = useState(true);
   const [isSaving, setIsSaving] = useState(false);
 
+  const [openaiApiKey, setOpenaiApiKey] = useState("");
+  const [anthropicApiKey, setAnthropicApiKey] = useState("");
+  const [googleApiKey, setGoogleApiKey] = useState("");
+
   const { session } = useAuthContext();
+
   const handleSaveApiKeys = async () => {
     if (!session?.accessToken || !session?.refreshToken) {
       toast.error("You must be logged in to save API keys");
@@ -80,6 +110,20 @@ export default function SettingsInterface(): React.ReactNode {
     }
   };
 
+  const hasRequestedInitialApiKeys = useRef(false);
+  useEffect(() => {
+    if (!session || !session.accessToken || !session.refreshToken) return;
+    if (hasRequestedInitialApiKeys.current) return;
+    getSavedApiKeys(session)
+      .then((apiKeys) => {
+        setOpenaiApiKey(apiKeys.OPENAI_API_KEY || "");
+        setAnthropicApiKey(apiKeys.ANTHROPIC_API_KEY || "");
+        setGoogleApiKey(apiKeys.GOOGLE_API_KEY || "");
+      })
+      .finally(() => setLoading(false));
+    hasRequestedInitialApiKeys.current = true;
+  }, [session]);
+
   return (
     <div className="flex w-full flex-col gap-4 p-6">
       <div className="flex w-full items-center justify-start gap-6">
@@ -102,6 +146,7 @@ export default function SettingsInterface(): React.ReactNode {
               placeholder="Enter your OpenAI API key"
               value={openaiApiKey}
               onChange={(e) => setOpenaiApiKey(e.target.value)}
+              disabled={loading || isSaving}
             />
           </div>
 
@@ -113,6 +158,7 @@ export default function SettingsInterface(): React.ReactNode {
               placeholder="Enter your Anthropic API key"
               value={anthropicApiKey}
               onChange={(e) => setAnthropicApiKey(e.target.value)}
+              disabled={loading || isSaving}
             />
           </div>
 
@@ -124,6 +170,7 @@ export default function SettingsInterface(): React.ReactNode {
               placeholder="Enter your Google Gen AI API key"
               value={googleApiKey}
               onChange={(e) => setGoogleApiKey(e.target.value)}
+              disabled={loading || isSaving}
             />
           </div>
         </div>
@@ -132,7 +179,7 @@ export default function SettingsInterface(): React.ReactNode {
         <div className="flex justify-end">
           <Button
             onClick={handleSaveApiKeys}
-            disabled={isSaving}
+            disabled={isSaving || loading}
             className="min-w-[120px]"
           >
             {isSaving ? (
diff --git a/apps/web-v2/src/lib/crypto.ts b/apps/web-v2/src/lib/crypto.ts
