feat: add scoped API keys for programmatic site access
Introduce ApiKey model, CRUD endpoints, and admin UI so agents can authenticate with permission-scoped keys. Normalize pubkeys to hex on login, dedupe legacy npub/hex user rows, and ignore .cursor in git. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
bbe
@@ -0,0 +1,305 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { api } from "@/lib/api";
|
||||
import { useAuth } from "@/hooks/useAuth";
|
||||
import { formatDate } from "@/lib/utils";
|
||||
import { Copy, Check, KeyRound, Plus, Trash2, ShieldAlert } from "lucide-react";
|
||||
|
||||
interface PermissionDef {
|
||||
key: string;
|
||||
label: string;
|
||||
group: string;
|
||||
}
|
||||
|
||||
interface ApiKey {
|
||||
id: string;
|
||||
name: string;
|
||||
prefix: string;
|
||||
permissions: string[];
|
||||
createdByPubkey: string;
|
||||
lastUsedAt: string | null;
|
||||
revokedAt: string | null;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export default function ApiKeysPage() {
|
||||
const { can } = useAuth();
|
||||
const allowed = can("api_keys.manage");
|
||||
|
||||
const [permissions, setPermissions] = useState<PermissionDef[]>([]);
|
||||
const [keys, setKeys] = useState<ApiKey[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const [name, setName] = useState("");
|
||||
const [selected, setSelected] = useState<Record<string, boolean>>({});
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [revealedKey, setRevealedKey] = useState<{ name: string; key: string } | null>(null);
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const load = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [registry, list] = await Promise.all([
|
||||
api.getPermissionRegistry(),
|
||||
api.getApiKeys(),
|
||||
]);
|
||||
setPermissions(registry.permissions);
|
||||
setKeys(list);
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (allowed) load();
|
||||
else setLoading(false);
|
||||
}, [allowed]);
|
||||
|
||||
const groups = useMemo(() => {
|
||||
const order: string[] = [];
|
||||
const byGroup: Record<string, PermissionDef[]> = {};
|
||||
for (const perm of permissions) {
|
||||
if (!byGroup[perm.group]) {
|
||||
byGroup[perm.group] = [];
|
||||
order.push(perm.group);
|
||||
}
|
||||
byGroup[perm.group].push(perm);
|
||||
}
|
||||
return order.map((group) => ({ group, perms: byGroup[group] }));
|
||||
}, [permissions]);
|
||||
|
||||
const selectedKeys = useMemo(
|
||||
() => Object.entries(selected).filter(([, v]) => v).map(([k]) => k),
|
||||
[selected]
|
||||
);
|
||||
|
||||
const toggle = (key: string) => {
|
||||
setSelected((prev) => ({ ...prev, [key]: !prev[key] }));
|
||||
};
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!name.trim() || selectedKeys.length === 0) return;
|
||||
setCreating(true);
|
||||
setError("");
|
||||
try {
|
||||
const created = await api.createApiKey({ name: name.trim(), permissions: selectedKeys });
|
||||
setRevealedKey({ name: created.name, key: created.key });
|
||||
setCopied(false);
|
||||
setName("");
|
||||
setSelected({});
|
||||
await load();
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRevoke = async (id: string) => {
|
||||
setError("");
|
||||
try {
|
||||
await api.revokeApiKey(id);
|
||||
await load();
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCopy = async () => {
|
||||
if (!revealedKey) return;
|
||||
try {
|
||||
await navigator.clipboard.writeText(revealedKey.key);
|
||||
setCopied(true);
|
||||
window.setTimeout(() => setCopied(false), 2000);
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
};
|
||||
|
||||
if (!allowed) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[60vh]">
|
||||
<div className="text-on-surface/50">
|
||||
You do not have permission to manage API keys.
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[60vh]">
|
||||
<div className="text-on-surface/50">Loading API keys...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const labelFor = (key: string) => permissions.find((p) => p.key === key)?.label ?? key;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-on-surface">API Keys</h1>
|
||||
<p className="text-on-surface/60 text-sm mt-1">
|
||||
Create scoped API keys for programmatic access. A key is shown in full
|
||||
only once, right after you create it, so copy it immediately.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && <p className="text-error text-sm">{error}</p>}
|
||||
|
||||
{revealedKey && (
|
||||
<div className="bg-primary-container/10 border border-primary/30 rounded-xl p-6 space-y-3">
|
||||
<div className="flex items-center gap-2 text-primary font-semibold">
|
||||
<ShieldAlert size={18} />
|
||||
Copy your new key now — it won't be shown again
|
||||
</div>
|
||||
<p className="text-on-surface/70 text-sm">
|
||||
Key for <span className="font-semibold">{revealedKey.name}</span>:
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<code className="flex-1 bg-surface-container-highest text-on-surface rounded-lg px-4 py-3 font-mono text-sm break-all">
|
||||
{revealedKey.key}
|
||||
</code>
|
||||
<button
|
||||
onClick={handleCopy}
|
||||
className="flex items-center gap-2 px-4 py-3 rounded-lg bg-gradient-to-r from-primary to-primary-container text-on-primary font-semibold text-sm hover:opacity-90 transition-opacity whitespace-nowrap"
|
||||
>
|
||||
{copied ? <Check size={16} /> : <Copy size={16} />}
|
||||
{copied ? "Copied" : "Copy"}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setRevealedKey(null)}
|
||||
className="text-on-surface/50 text-sm hover:text-on-surface transition-colors"
|
||||
>
|
||||
I've saved it, dismiss
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create form */}
|
||||
<div className="bg-surface-container-low rounded-xl p-6 space-y-5">
|
||||
<h2 className="text-sm font-semibold text-on-surface/70">Create API Key</h2>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-bold uppercase tracking-widest text-on-surface-variant mb-2">
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="e.g. Blog publishing bot"
|
||||
maxLength={100}
|
||||
className="w-full bg-surface-container-highest text-on-surface rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-1 focus:ring-primary/40"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-xs font-bold uppercase tracking-widest text-on-surface-variant mb-3">
|
||||
Permissions
|
||||
</p>
|
||||
<div className="space-y-4">
|
||||
{groups.map(({ group, perms }) => (
|
||||
<div key={group}>
|
||||
<p className="text-xs font-bold uppercase tracking-wide text-on-surface/40 mb-2">
|
||||
{group}
|
||||
</p>
|
||||
<div className="grid sm:grid-cols-2 gap-2">
|
||||
{perms.map((perm) => (
|
||||
<label
|
||||
key={perm.key}
|
||||
className="flex items-start gap-2 cursor-pointer text-sm text-on-surface"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={!!selected[perm.key]}
|
||||
onChange={() => toggle(perm.key)}
|
||||
className="mt-0.5 h-4 w-4 accent-primary cursor-pointer"
|
||||
/>
|
||||
<span>
|
||||
{perm.label}
|
||||
<span className="block text-on-surface/40 text-xs font-mono">
|
||||
{perm.key}
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleCreate}
|
||||
disabled={!name.trim() || selectedKeys.length === 0 || creating}
|
||||
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-primary to-primary-container text-on-primary font-semibold text-sm hover:opacity-90 transition-opacity disabled:opacity-50"
|
||||
>
|
||||
<Plus size={16} />
|
||||
{creating ? "Creating..." : "Create API Key"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Existing keys */}
|
||||
<div className="space-y-3">
|
||||
<h2 className="text-sm font-semibold text-on-surface/70">Existing Keys</h2>
|
||||
{keys.length === 0 ? (
|
||||
<div className="bg-surface-container-low rounded-xl p-8 text-center">
|
||||
<KeyRound size={32} className="text-on-surface-variant/30 mx-auto mb-3" />
|
||||
<p className="text-on-surface-variant/60 text-sm">No API keys yet.</p>
|
||||
</div>
|
||||
) : (
|
||||
keys.map((key) => (
|
||||
<div
|
||||
key={key.id}
|
||||
className={`bg-surface-container-low rounded-xl p-6 ${key.revokedAt ? "opacity-60" : ""}`}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<h3 className="font-semibold text-on-surface">{key.name}</h3>
|
||||
{key.revokedAt && (
|
||||
<span className="text-xs font-bold text-error bg-error/10 px-2 py-0.5 rounded-full">
|
||||
Revoked
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="font-mono text-sm text-on-surface/60 mt-1">{key.prefix}…</p>
|
||||
<p className="text-on-surface/40 text-xs mt-1">
|
||||
Created {formatDate(key.createdAt)}
|
||||
{key.lastUsedAt ? ` · Last used ${formatDate(key.lastUsedAt)}` : " · Never used"}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-1.5 mt-3">
|
||||
{key.permissions.map((p) => (
|
||||
<span
|
||||
key={p}
|
||||
className="text-xs font-semibold text-primary bg-primary/10 px-2 py-0.5 rounded-full"
|
||||
title={p}
|
||||
>
|
||||
{labelFor(p)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{!key.revokedAt && (
|
||||
<button
|
||||
onClick={() => handleRevoke(key.id)}
|
||||
className="text-on-surface-variant/50 hover:text-error transition-colors p-2 rounded-lg hover:bg-error/10 shrink-0"
|
||||
title="Revoke key"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user