From 9422e94a8e22dc9ec573b80babec2db9d744fec1 Mon Sep 17 00:00:00 2001
From: Sanju Sivalingam <spikeysanju98@gmail.com>
Date: Tue, 17 Feb 2026 14:40:42 +0530
Subject: [PATCH] feat: add API keys management page

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/lib/api/api-keys.remote.ts            |  27 +++++
 web/src/lib/schema/api-keys.ts                |   5 +
 .../routes/dashboard/api-keys/+page.svelte    | 114 ++++++++++++++++++
 3 files changed, 146 insertions(+)
 create mode 100644 web/src/lib/api/api-keys.remote.ts
 create mode 100644 web/src/lib/schema/api-keys.ts
 create mode 100644 web/src/routes/dashboard/api-keys/+page.svelte

diff --git a/web/src/lib/api/api-keys.remote.ts b/web/src/lib/api/api-keys.remote.ts
new file mode 100644
index 0000000..65be17e
--- /dev/null
+++ b/web/src/lib/api/api-keys.remote.ts
@@ -0,0 +1,27 @@
+import { form, getRequestEvent, query } from '$app/server';
+import { auth } from '$lib/server/auth';
+import { createKeySchema } from '$lib/schema/api-keys';
+
+export const listKeys = query(async () => {
+	const { request } = getRequestEvent();
+	return await auth.api.listApiKeys({ headers: request.headers });
+});
+
+export const createKey = form(createKeySchema, async ({ name }) => {
+	const { request } = getRequestEvent();
+	const result = await auth.api.createApiKey({
+		body: { name, prefix: 'dc' },
+		headers: request.headers
+	});
+	return result;
+});
+
+export const deleteKey = form(async () => {
+	const { request } = getRequestEvent();
+	const formData = await request.clone().formData();
+	const keyId = formData.get('keyId') as string;
+	await auth.api.deleteApiKey({
+		body: { keyId },
+		headers: request.headers
+	});
+});
diff --git a/web/src/lib/schema/api-keys.ts b/web/src/lib/schema/api-keys.ts
new file mode 100644
index 0000000..aeca962
--- /dev/null
+++ b/web/src/lib/schema/api-keys.ts
@@ -0,0 +1,5 @@
+import { object, string, pipe, minLength } from 'valibot';
+
+export const createKeySchema = object({
+	name: pipe(string(), minLength(1))
+});
diff --git a/web/src/routes/dashboard/api-keys/+page.svelte b/web/src/routes/dashboard/api-keys/+page.svelte
new file mode 100644
index 0000000..389577c
--- /dev/null
+++ b/web/src/routes/dashboard/api-keys/+page.svelte
@@ -0,0 +1,114 @@
+<script lang="ts">
+	import { listKeys, createKey, deleteKey } from '$lib/api/api-keys.remote';
+
+	let newKeyValue = $state<string | null>(null);
+
+	$effect(() => {
+		if (createKey.result?.key) {
+			newKeyValue = createKey.result.key;
+		}
+	});
+</script>
+
+<h2 class="mb-6 text-2xl font-bold">API Keys</h2>
+
+<!-- Create new key -->
+<div class="mb-8 rounded-lg border border-neutral-200 p-6">
+	<h3 class="mb-4 font-semibold">Create New Key</h3>
+	<form {...createKey} class="flex items-end gap-4">
+		<label class="flex flex-1 flex-col gap-1">
+			<span class="text-sm text-neutral-600">Key Name</span>
+			<input
+				{...createKey.fields.name.as('text')}
+				placeholder="e.g. Production, Development"
+				class="rounded border border-neutral-300 px-3 py-2 text-sm focus:border-neutral-500 focus:outline-none"
+			/>
+			{#each createKey.fields.name.issues() ?? [] as issue (issue.message)}
+				<p class="text-sm text-red-600">{issue.message}</p>
+			{/each}
+		</label>
+		<button
+			type="submit"
+			class="rounded bg-neutral-800 px-4 py-2 text-sm text-white hover:bg-neutral-700"
+		>
+			Create
+		</button>
+	</form>
+</div>
+
+<!-- Newly created key warning -->
+{#if newKeyValue}
+	<div class="mb-8 rounded-lg border border-yellow-300 bg-yellow-50 p-6">
+		<h3 class="mb-2 font-semibold text-yellow-800">Save Your API Key</h3>
+		<p class="mb-3 text-sm text-yellow-700">
+			Copy this key now. It will not be shown again.
+		</p>
+		<div class="flex items-center gap-2">
+			<code class="flex-1 rounded bg-yellow-100 px-3 py-2 text-sm font-mono break-all">
+				{newKeyValue}
+			</code>
+			<button
+				onclick={() => {
+					navigator.clipboard.writeText(newKeyValue!);
+				}}
+				class="rounded border border-yellow-400 px-3 py-2 text-sm text-yellow-800 hover:bg-yellow-100"
+			>
+				Copy
+			</button>
+		</div>
+		<button
+			onclick={() => (newKeyValue = null)}
+			class="mt-3 text-sm text-yellow-600 hover:text-yellow-800"
+		>
+			Dismiss
+		</button>
+	</div>
+{/if}
+
+<!-- Existing keys list -->
+<div class="rounded-lg border border-neutral-200">
+	<div class="border-b border-neutral-200 px-6 py-4">
+		<h3 class="font-semibold">Your Keys</h3>
+	</div>
+
+	{#await listKeys()}
+		<div class="px-6 py-8 text-center text-sm text-neutral-500">Loading keys...</div>
+	{:then keys}
+		{#if keys && keys.length > 0}
+			<ul class="divide-y divide-neutral-100">
+				{#each keys as key (key.id)}
+					<li class="flex items-center justify-between px-6 py-4">
+						<div>
+							<p class="font-medium">{key.name ?? 'Unnamed Key'}</p>
+							<div class="mt-1 flex items-center gap-3 text-sm text-neutral-500">
+								{#if key.start}
+									<span class="font-mono">{key.start}...</span>
+								{/if}
+								<span>
+									Created {new Date(key.createdAt).toLocaleDateString()}
+								</span>
+							</div>
+						</div>
+						<form {...deleteKey}>
+							<input type="hidden" name="keyId" value={key.id} />
+							<button
+								type="submit"
+								class="rounded border border-red-200 px-3 py-1.5 text-sm text-red-600 hover:bg-red-50"
+							>
+								Delete
+							</button>
+						</form>
+					</li>
+				{/each}
+			</ul>
+		{:else}
+			<div class="px-6 py-8 text-center text-sm text-neutral-500">
+				No API keys yet. Create one above.
+			</div>
+		{/if}
+	{:catch}
+		<div class="px-6 py-8 text-center text-sm text-red-600">
+			Failed to load keys. Please try again.
+		</div>
+	{/await}
+</div>