Encrypt module secrets client-side

Author: ralyodio

apps/web/src/app/account/account-content.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, useCallback } from "react";
 import Link from "next/link";
 import { useAuth } from "@/lib/auth-context";
 import { authHeaders } from "@/lib/auth-client";
+import { decryptClientSecret, encryptClientSecret, isE2ESecret } from "@/lib/client-secret-crypto";
 import { parseWalletPaste, formatWalletCopyText } from "@/lib/wallet-import";
 
 interface ReferralWallet {
@@ -37,6 +38,10 @@ export default function AccountContent() {
   const [showAllWallets, setShowAllWallets] = useState(false);
   const [aiGatewayKeyDraft, setAiGatewayKeyDraft] = useState("");
   const [aiGatewayKeySet, setAiGatewayKeySet] = useState(false);
+  const [aiGatewayKeyE2E, setAiGatewayKeyE2E] = useState(false);
+  const [revealedAiGatewayKey, setRevealedAiGatewayKey] = useState("");
+  const [revealingAiGatewayKey, setRevealingAiGatewayKey] = useState(false);
+  const [copiedAiGatewayKey, setCopiedAiGatewayKey] = useState(false);
   const [settingsSaving, setSettingsSaving] = useState(false);
   const [settingsStatus, setSettingsStatus] = useState<string | null>(null);
   const [settingsError, setSettingsError] = useState<string | null>(null);
@@ -72,6 +77,7 @@ export default function AccountContent() {
         if (!res.ok) return;
         const data = await res.json();
         setAiGatewayKeySet(!!data.secrets?.AI_GATEWAY_API_KEY?.isSet);
+        setAiGatewayKeyE2E(!!data.secrets?.AI_GATEWAY_API_KEY?.e2eEncrypted);
       } catch {
         // ignore
       }
@@ -199,15 +205,19 @@ export default function AccountContent() {
     setSettingsStatus(null);
     setSettingsError(null);
     try {
+      if (!profile?.id) throw new Error("Account profile is still loading");
+      const secretValue = value === null ? null : await encryptClientSecret(profile.id, value.trim());
       const res = await fetch("/api/settings", {
         method: "PUT",
         headers: authHeaders({ "Content-Type": "application/json" }),
-        body: JSON.stringify({ secrets: { AI_GATEWAY_API_KEY: value } }),
+        body: JSON.stringify({ secrets: { AI_GATEWAY_API_KEY: secretValue } }),
       });
       const data = await res.json();
       if (!res.ok) throw new Error(data.error || "Failed to save settings");
       setAiGatewayKeySet(!!data.secrets?.AI_GATEWAY_API_KEY?.isSet);
+      setAiGatewayKeyE2E(!!data.secrets?.AI_GATEWAY_API_KEY?.e2eEncrypted);
       setAiGatewayKeyDraft("");
+      setRevealedAiGatewayKey("");
       setSettingsStatus(value === null ? "Cleared" : "Saved");
     } catch (error) {
       setSettingsError((error as Error).message);
@@ -216,6 +226,53 @@ export default function AccountContent() {
     }
   };
 
+  const revealAiGatewayKey = async () => {
+    setSettingsStatus(null);
+    setSettingsError(null);
+    setRevealingAiGatewayKey(true);
+    try {
+      if (!profile?.id) throw new Error("Account profile is still loading");
+      const res = await fetch("/api/settings?includeSecretValues=1", {
+        headers: authHeaders(),
+        cache: "no-store",
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Failed to load settings");
+
+      const stored = data.secretValues?.AI_GATEWAY_API_KEY;
+      if (typeof stored !== "string" || !stored) throw new Error("No saved Vercel key found");
+
+      const value = await decryptClientSecret(profile.id, stored);
+      setRevealedAiGatewayKey(value);
+
+      if (!isE2ESecret(stored)) {
+        const encrypted = await encryptClientSecret(profile.id, value);
+        const upgradeRes = await fetch("/api/settings", {
+          method: "PUT",
+          headers: authHeaders({ "Content-Type": "application/json" }),
+          body: JSON.stringify({ secrets: { AI_GATEWAY_API_KEY: encrypted } }),
+        });
+        if (upgradeRes.ok) {
+          const upgraded = await upgradeRes.json();
+          setAiGatewayKeySet(!!upgraded.secrets?.AI_GATEWAY_API_KEY?.isSet);
+          setAiGatewayKeyE2E(!!upgraded.secrets?.AI_GATEWAY_API_KEY?.e2eEncrypted);
+          setSettingsStatus("Revealed and upgraded to E2E encryption");
+        }
+      }
+    } catch (error) {
+      setSettingsError((error as Error).message);
+    } finally {
+      setRevealingAiGatewayKey(false);
+    }
+  };
+
+  const copyAiGatewayKey = async () => {
+    if (!revealedAiGatewayKey) return;
+    await navigator.clipboard?.writeText(revealedAiGatewayKey);
+    setCopiedAiGatewayKey(true);
+    setTimeout(() => setCopiedAiGatewayKey(false), 2000);
+  };
+
   return (
     <div className="min-h-screen bg-tc-darker">
       {/* Nav */}
@@ -342,18 +399,49 @@ export default function AccountContent() {
                   {settingsSaving ? "Saving..." : "Save"}
                 </button>
                 {aiGatewayKeySet && (
+                  <>
+                    <button
+                      onClick={revealAiGatewayKey}
+                      disabled={settingsSaving || revealingAiGatewayKey}
+                      className="border border-tc-border text-tc-text-dim px-4 py-2 rounded-lg text-sm hover:border-tc-green/40 hover:text-tc-green disabled:opacity-50"
+                    >
+                      {revealingAiGatewayKey ? "Decrypting..." : "Reveal"}
+                    </button>
+                    <button
+                      onClick={() => saveAiGatewayKey(null)}
+                      disabled={settingsSaving}
+                      className="border border-tc-border text-tc-text-dim px-4 py-2 rounded-lg text-sm hover:border-red-400/40 hover:text-red-400 disabled:opacity-50"
+                    >
+                      Clear
+                    </button>
+                  </>
+                )}
+              </div>
+              {revealedAiGatewayKey && (
+                <div className="mt-2 flex flex-col gap-2 rounded-lg border border-tc-border bg-black/40 p-2 sm:flex-row">
+                  <input
+                    readOnly
+                    type="text"
+                    value={revealedAiGatewayKey}
+                    className="flex-1 rounded border border-tc-border bg-tc-darker px-2 py-1.5 font-mono text-xs text-tc-text focus:outline-none"
+                  />
                   <button
-                    onClick={() => saveAiGatewayKey(null)}
-                    disabled={settingsSaving}
-                    className="border border-tc-border text-tc-text-dim px-4 py-2 rounded-lg text-sm hover:border-red-400/40 hover:text-red-400 disabled:opacity-50"
+                    type="button"
+                    onClick={copyAiGatewayKey}
+                    className="rounded border border-tc-border px-3 py-1.5 text-xs text-tc-text-dim hover:border-tc-green/40 hover:text-tc-green"
                   >
-                    Clear
+                    {copiedAiGatewayKey ? "Copied" : "Copy"}
                   </button>
-                )}
-              </div>
+                </div>
+              )}
               <p className="text-xs text-tc-text-dim mt-2">
                 Used by AI-powered modules such as DeepSec. The key is stored in your account settings, not in the public plugin store.
               </p>
+              {aiGatewayKeySet && (
+                <p className="text-xs text-tc-text-dim mt-1">
+                  {aiGatewayKeyE2E ? "E2E encrypted in this browser." : "Legacy secret; reveal once to upgrade it to E2E encryption."}
+                </p>
+              )}
               {settingsStatus && <p className="text-xs text-tc-green mt-2">{settingsStatus}</p>}
               {settingsError && <p className="text-xs text-red-400 mt-2">{settingsError}</p>}
             </div>

apps/web/src/app/api/settings/__tests__/route.test.ts

@@ -32,8 +32,8 @@ vi.mock("@/lib/settings-crypto", () => ({
 
 import { GET, PUT } from "@/app/api/settings/route";
 
-function request(body?: unknown) {
-  return new Request("http://localhost/api/settings", {
+function request(body?: unknown, url = "http://localhost/api/settings") {
+  return new Request(url, {
     method: body === undefined ? "GET" : "PUT",
     headers: { "Content-Type": "application/json", Authorization: "Bearer token" },
     body: body === undefined ? undefined : JSON.stringify(body),
@@ -67,11 +67,20 @@ describe("/api/settings", () => {
     expect(res.status).toBe(200);
     expect(body.plain).toEqual({ DEEPSEC_AGENT: "codex" });
     expect(body.secrets).toEqual({
-      AI_GATEWAY_API_KEY: { isSet: true, length: "vck_test_secret".length },
+      AI_GATEWAY_API_KEY: { isSet: true, length: "vck_test_secret".length, e2eEncrypted: false },
     });
+    expect(body.secretValues).toBeUndefined();
     expect(JSON.stringify(body)).not.toContain("vck_test_secret");
   });
 
+  it("returns secret values only for an explicit reveal request", async () => {
+    const res = await GET(request(undefined, "http://localhost/api/settings?includeSecretValues=1"));
+    const body = await res.json();
+
+    expect(res.status).toBe(200);
+    expect(body.secretValues).toEqual({ AI_GATEWAY_API_KEY: "vck_test_secret" });
+  });
+
   it("merges plain settings and encrypts updated secrets", async () => {
     const res = await PUT(request({
       plain: { DEEPSEC_AGENT: "claude" },
@@ -91,7 +100,7 @@ describe("/api/settings", () => {
       }),
       { onConflict: "user_id" },
     );
-    expect(body.secrets.AI_GATEWAY_API_KEY).toEqual({ isSet: true, length: 7 });
+    expect(body.secrets.AI_GATEWAY_API_KEY).toEqual({ isSet: true, length: 7, e2eEncrypted: false });
   });
 
   it("clears a secret when the value is null", async () => {

apps/web/src/app/api/settings/route.ts

@@ -16,6 +16,7 @@ type SettingsRow = {
 };
 
 const KEY_RE = /^[A-Z][A-Z0-9_]{1,100}$/;
+const E2E_SECRET_PREFIX = "tc_e2e_secret_v1:";
 
 function rowToCipher(row: SettingsRow | null): CipherBlob | null {
   if (!row?.payload_secret_ciphertext || !row.payload_secret_iv || !row.payload_secret_tag) return null;
@@ -28,7 +29,14 @@ function rowToCipher(row: SettingsRow | null): CipherBlob | null {
 
 function secretStatus(secrets: Record<string, string>) {
   return Object.fromEntries(
-    Object.entries(secrets).map(([key, value]) => [key, { isSet: true, length: value.length }]),
+    Object.entries(secrets).map(([key, value]) => [
+      key,
+      {
+        isSet: true,
+        length: value.startsWith(E2E_SECRET_PREFIX) ? undefined : value.length,
+        e2eEncrypted: value.startsWith(E2E_SECRET_PREFIX),
+      },
+    ]),
   );
 }
 
@@ -84,12 +92,23 @@ export async function GET(request: NextRequest) {
     secrets = {};
   }
 
-  return NextResponse.json({
+  const includeSecretValues = new URL(request.url).searchParams.get("includeSecretValues") === "1";
+  const response: {
+    plain: Record<string, unknown>;
+    secrets: ReturnType<typeof secretStatus>;
+    cryptoConfigured: boolean;
+    lastUpdatedAt: string | null;
+    secretValues?: Record<string, string>;
+  } = {
     plain: row?.payload_plain || {},
     secrets: secretStatus(secrets),
     cryptoConfigured: settingsCryptoConfigured(),
     lastUpdatedAt: row?.updated_at || null,
-  });
+  };
+
+  if (includeSecretValues) response.secretValues = secrets;
+
+  return NextResponse.json(response);
 }
 
 export async function PUT(request: NextRequest) {