Add API key management UI

Author: SirEdvin

frontend/src/api/index.ts

@@ -103,6 +103,22 @@ export interface AuthUser {
   mustResetPassword?: boolean;
 }
 
+export interface ApiKeyMetadata {
+  id: string;
+  name: string;
+  prefix: string;
+  scopes: string[];
+  lastUsedAt: string | null;
+  revokedAt: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface CreateApiKeyResponse {
+  apiKey: ApiKeyMetadata;
+  token: string;
+}
+
 export const authStatus = async (): Promise<AuthStatusResponse> => {
   const response = await axios.get<AuthStatusResponse>(
     `${API_URL}/auth/status`,
@@ -162,6 +178,20 @@ export const authRegister = async (
   return response.data;
 };
 
+export const listApiKeys = async (): Promise<ApiKeyMetadata[]> => {
+  const response = await api.get<{ apiKeys: ApiKeyMetadata[] }>("/auth/api-keys");
+  return response.data.apiKeys;
+};
+
+export const createApiKey = async (name: string): Promise<CreateApiKeyResponse> => {
+  const response = await api.post<CreateApiKeyResponse>("/auth/api-keys", { name });
+  return response.data;
+};
+
+export const revokeApiKey = async (id: string): Promise<void> => {
+  await api.delete(`/auth/api-keys/${id}`);
+};
+
 export const authOnboardingChoice = async (
   enableAuth: boolean
 ): Promise<{ authEnabled: boolean; authOnboardingCompleted: boolean; bootstrapRequired: boolean }> => {

frontend/src/pages/Profile.apiKeys.test.tsx

@@ -0,0 +1,105 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import type React from "react";
+import { MemoryRouter } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { Profile } from "./Profile";
+import * as api from "../api";
+
+const { mockLogout } = vi.hoisted(() => ({
+  mockLogout: vi.fn(),
+}));
+
+vi.mock("../context/AuthContext", () => ({
+  useAuth: () => ({
+    user: { id: "user-1", email: "user@example.com", name: "User One" },
+    logout: mockLogout,
+    authEnabled: true,
+  }),
+}));
+
+vi.mock("../components/Layout", () => ({
+  Layout: ({ children }: { children: React.ReactNode }) => <main>{children}</main>,
+}));
+
+vi.mock("../api", () => ({
+  api: {
+    put: vi.fn(),
+    post: vi.fn(),
+  },
+  isAxiosError: vi.fn(() => false),
+  getCollections: vi.fn(),
+  createCollection: vi.fn(),
+  updateCollection: vi.fn(),
+  deleteCollection: vi.fn(),
+  listApiKeys: vi.fn(),
+  createApiKey: vi.fn(),
+  revokeApiKey: vi.fn(),
+}));
+
+const existingApiKey = {
+  id: "key-1",
+  name: "Existing Key",
+  prefix: "exd_key_abc123",
+  scopes: ["drawings:read", "drawings:write"],
+  createdAt: "2026-05-01T12:00:00.000Z",
+  updatedAt: "2026-05-01T12:00:00.000Z",
+  lastUsedAt: null,
+  revokedAt: null,
+};
+
+describe("Profile API keys", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(api.getCollections).mockResolvedValue([]);
+    vi.mocked(api.listApiKeys).mockResolvedValue([existingApiKey]);
+    vi.mocked(api.createApiKey).mockResolvedValue({
+      apiKey: {
+        ...existingApiKey,
+        id: "key-2",
+        name: "CI Token",
+        prefix: "exd_key_new456",
+      },
+      token: "exd_key_new456.secret-token-value",
+    });
+    vi.mocked(api.revokeApiKey).mockResolvedValue(undefined);
+    Object.defineProperty(navigator, "clipboard", {
+      configurable: true,
+      value: { writeText: vi.fn().mockResolvedValue(undefined) },
+    });
+    vi.spyOn(window, "confirm").mockReturnValue(true);
+  });
+
+  it("lists, creates, copies, and revokes API keys", async () => {
+    render(
+      <MemoryRouter>
+        <Profile />
+      </MemoryRouter>
+    );
+
+    expect(await screen.findByText("Existing Key")).toBeInTheDocument();
+    expect(screen.getByText("exd_key_abc123")).toBeInTheDocument();
+    expect(screen.getByText("drawings:read, drawings:write")).toBeInTheDocument();
+    expect(screen.getAllByText("Never").length).toBeGreaterThan(0);
+
+    fireEvent.change(screen.getByLabelText(/api key name/i), {
+      target: { value: "CI Token" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: /create api key/i }));
+
+    expect(await screen.findByDisplayValue("exd_key_new456.secret-token-value")).toBeInTheDocument();
+    expect(screen.getByText(/copy this token now/i)).toBeInTheDocument();
+    expect(api.createApiKey).toHaveBeenCalledWith("CI Token");
+
+    fireEvent.click(screen.getByRole("button", { name: /copy generated api token/i }));
+    await waitFor(() => {
+      expect(navigator.clipboard?.writeText).toHaveBeenCalledWith("exd_key_new456.secret-token-value");
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: /revoke api key ci token/i }));
+
+    await waitFor(() => {
+      expect(api.revokeApiKey).toHaveBeenCalledWith("key-2");
+    });
+    expect(await screen.findByText("API key revoked")).toBeInTheDocument();
+  });
+});