add page to retrieve user virtual api keys

messages/en-US.json

@@ -1667,7 +1667,6 @@
     "virtualApiKeysNoResources": "No resources",
     "virtualApiKeysSecret": "Key",
     "virtualApiKeysCopyKey": "Copy this key. You can view it again later from the table or when editing.",
-    "virtualApiKeysSecretHint": "Use this value as a Bearer token: vk-[id].[secret]",
     "virtualApiKeysViewSecret": "View Secret",
     "virtualApiKeysViewSecretTitle": "Virtual API Key Secret",
     "virtualApiKeysViewSecretDescription": "This secret grants access to the public inference resources assigned to this key",
@@ -1692,6 +1691,24 @@
     "virtualApiKeysErrorFetchSecret": "Error loading secret",
     "virtualApiKeysErrorFetchSecretDescription": "Failed to load the virtual API key secret",
     "virtualApiKeysFilterUnassigned": "Unassigned",
+    "myVirtualApiKeysTitle": "Your API Keys",
+    "myVirtualApiKeysDescription": "View your identity key and any virtual API keys attributed to you in this organization",
+    "myVirtualApiKeysResourceTitle": "Your API Keys for This Resource",
+    "myVirtualApiKeysResourceDescription": "View your identity key and virtual API keys attributed to you that can access this resource",
+    "myVirtualApiKeysIdentityTitle": "Identity Key",
+    "myVirtualApiKeysIdentityHeadline": "Your Personal API Key",
+    "myVirtualApiKeysIdentityDescription": "Your personal key for this organization. It is unique to your account and used to identify you when calling AI Gateway resources.",
+    "myVirtualApiKeysIdentityResourceHeadline": "Your Personal API Key for This Resource",
+    "myVirtualApiKeysIdentityResourceDescription": "Your personal key for this organization. Use it to call this AI Gateway resource.",
+    "myVirtualApiKeysManualTitle": "Attributed Keys",
+    "myVirtualApiKeysManualDescription": "Manual virtual API keys an admin associated with your account",
+    "myVirtualApiKeysManualResourceDescription": "Manual virtual API keys associated with your account that can access this resource",
+    "myVirtualApiKeysManualEmpty": "No attributed keys yet",
+    "myVirtualApiKeysKindUser": "Identity",
+    "myVirtualApiKeysKindManual": "Manual",
+    "myVirtualApiKeysUnnamed": "Unnamed key",
+    "myVirtualApiKeysRevealSecret": "Reveal Secret",
+    "myVirtualApiKeysViewSecretDescription": "This secret authenticates you to AI Gateway resources",
     "aiProvidersTitle": "AI Providers",
     "aiProvidersDescription": "Connect model providers for AI workloads in this organization",
     "aiProvidersAdd": "Add Provider",

server/routers/external.ts

@@ -1650,6 +1650,18 @@ authenticated.get(
     virtualApiKey.listVirtualApiKeys
 );
 
+authenticated.get(
+    "/org/:orgId/my-virtual-api-keys",
+    verifyOrgAccess,
+    virtualApiKey.listMyVirtualApiKeys
+);
+
+authenticated.get(
+    "/org/:orgId/my-virtual-api-keys/:virtualApiKeyId",
+    verifyOrgAccess,
+    virtualApiKey.getMyVirtualApiKey
+);
+
 authenticated.get(
     "/virtual-api-key/:virtualApiKeyId",
     verifyVirtualApiKeyAccess,

server/routers/virtualApiKey/getMyVirtualApiKey.ts

@@ -0,0 +1,113 @@
+import { Request, Response, NextFunction } from "express";
+import { z } from "zod";
+import { db, virtualApiKeyResources, virtualApiKeys } from "@server/db";
+import response from "@server/lib/response";
+import HttpCode from "@server/types/HttpCode";
+import createHttpError from "http-errors";
+import logger from "@server/logger";
+import { fromError } from "zod-validation-error";
+import { OpenAPITags, registry } from "@server/openApi";
+import { and, eq } from "drizzle-orm";
+import { toPublicVirtualApiKey } from "@server/lib/virtualApiKey";
+import type { GetMyVirtualApiKeyResponse } from "@server/routers/virtualApiKey/types";
+
+const paramsSchema = z.strictObject({
+    orgId: z.string().nonempty(),
+    virtualApiKeyId: z.string().nonempty()
+});
+
+registry.registerPath({
+    method: "get",
+    path: "/org/{orgId}/my-virtual-api-keys/{virtualApiKeyId}",
+    description:
+        "Get a virtual API key owned by the signed-in user, including the decrypted secret.",
+    tags: [OpenAPITags.VirtualApiKey],
+    request: {
+        params: paramsSchema
+    },
+    responses: {
+        200: {
+            description: "Successful response"
+        }
+    }
+});
+
+export async function getMyVirtualApiKey(
+    req: Request,
+    res: Response,
+    next: NextFunction
+): Promise<any> {
+    try {
+        const parsedParams = paramsSchema.safeParse(req.params);
+        if (!parsedParams.success) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    fromError(parsedParams.error).toString()
+                )
+            );
+        }
+
+        const { orgId, virtualApiKeyId } = parsedParams.data;
+        const userId = req.user?.userId;
+
+        if (!userId) {
+            return next(
+                createHttpError(HttpCode.UNAUTHORIZED, "User not authenticated")
+            );
+        }
+
+        if (orgId !== req.userOrgId) {
+            return next(
+                createHttpError(
+                    HttpCode.FORBIDDEN,
+                    "User does not have access to this organization"
+                )
+            );
+        }
+
+        const [key] = await db
+            .select()
+            .from(virtualApiKeys)
+            .where(
+                and(
+                    eq(virtualApiKeys.virtualApiKeyId, virtualApiKeyId),
+                    eq(virtualApiKeys.orgId, orgId),
+                    eq(virtualApiKeys.userId, userId)
+                )
+            )
+            .limit(1);
+
+        if (!key) {
+            return next(
+                createHttpError(
+                    HttpCode.NOT_FOUND,
+                    `Virtual API key with ID ${virtualApiKeyId} not found`
+                )
+            );
+        }
+
+        const resourceRows = await db
+            .select({ resourceId: virtualApiKeyResources.resourceId })
+            .from(virtualApiKeyResources)
+            .where(eq(virtualApiKeyResources.virtualApiKeyId, virtualApiKeyId));
+
+        return response<GetMyVirtualApiKeyResponse>(res, {
+            data: {
+                virtualApiKey: {
+                    ...toPublicVirtualApiKey(key, { includeSecret: true }),
+                    resourceIds: resourceRows.map((row) => row.resourceId)
+                }
+            },
+            success: true,
+            error: false,
+            message: "Virtual API key retrieved successfully",
+            status: HttpCode.OK
+        });
+    } catch (error) {
+        logger.error(error);
+        return next(
+            createHttpError(HttpCode.INTERNAL_SERVER_ERROR, "An error occurred")
+        );
+    }
+}

server/routers/virtualApiKey/index.ts

@@ -1,6 +1,8 @@
 export * from "./createVirtualApiKey";
 export * from "./listVirtualApiKeys";
+export * from "./listMyVirtualApiKeys";
 export * from "./getVirtualApiKey";
+export * from "./getMyVirtualApiKey";
 export * from "./updateVirtualApiKey";
 export * from "./deleteVirtualApiKey";
 export * from "./types";

server/routers/virtualApiKey/listMyVirtualApiKeys.ts

@@ -0,0 +1,219 @@
+import { Request, Response, NextFunction } from "express";
+import { z } from "zod";
+import {
+    db,
+    resources,
+    virtualApiKeyResources,
+    virtualApiKeys,
+    type VirtualApiKey
+} from "@server/db";
+import response from "@server/lib/response";
+import HttpCode from "@server/types/HttpCode";
+import createHttpError from "http-errors";
+import logger from "@server/logger";
+import { fromError } from "zod-validation-error";
+import { OpenAPITags, registry } from "@server/openApi";
+import { and, asc, eq, exists, inArray, or } from "drizzle-orm";
+import {
+    getOrCreateUserVirtualApiKey,
+    toPublicVirtualApiKey
+} from "@server/lib/virtualApiKey";
+import type { ListMyVirtualApiKeysResponse } from "@server/routers/virtualApiKey/types";
+
+const paramsSchema = z.strictObject({
+    orgId: z.string().nonempty()
+});
+
+const querySchema = z.object({
+    resourceGuid: z.string().nonempty().optional()
+});
+
+registry.registerPath({
+    method: "get",
+    path: "/org/{orgId}/my-virtual-api-keys",
+    description:
+        "List the signed-in user's identity virtual API key and manual keys attributed to them.",
+    tags: [OpenAPITags.VirtualApiKey],
+    request: {
+        params: paramsSchema,
+        query: querySchema
+    },
+    responses: {
+        200: {
+            description: "Successful response"
+        }
+    }
+});
+
+async function resourceIdsForKeys(
+    keyIds: string[]
+): Promise<Map<string, number[]>> {
+    const resourceIdsByKey = new Map<string, number[]>();
+    if (keyIds.length === 0) {
+        return resourceIdsByKey;
+    }
+
+    const resourceRows = await db
+        .select()
+        .from(virtualApiKeyResources)
+        .where(inArray(virtualApiKeyResources.virtualApiKeyId, keyIds));
+
+    for (const row of resourceRows) {
+        const existing = resourceIdsByKey.get(row.virtualApiKeyId) ?? [];
+        existing.push(row.resourceId);
+        resourceIdsByKey.set(row.virtualApiKeyId, existing);
+    }
+
+    return resourceIdsByKey;
+}
+
+function toKeyWithResources(
+    row: VirtualApiKey,
+    resourceIdsByKey: Map<string, number[]>
+) {
+    return {
+        ...toPublicVirtualApiKey(row),
+        resourceIds: resourceIdsByKey.get(row.virtualApiKeyId) ?? []
+    };
+}
+
+export async function listMyVirtualApiKeys(
+    req: Request,
+    res: Response,
+    next: NextFunction
+): Promise<any> {
+    try {
+        const parsedParams = paramsSchema.safeParse(req.params);
+        if (!parsedParams.success) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    fromError(parsedParams.error).toString()
+                )
+            );
+        }
+
+        const parsedQuery = querySchema.safeParse(req.query);
+        if (!parsedQuery.success) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    fromError(parsedQuery.error).toString()
+                )
+            );
+        }
+
+        const { orgId } = parsedParams.data;
+        const { resourceGuid } = parsedQuery.data;
+        const userId = req.user?.userId;
+
+        if (!userId) {
+            return next(
+                createHttpError(HttpCode.UNAUTHORIZED, "User not authenticated")
+            );
+        }
+
+        if (orgId !== req.userOrgId) {
+            return next(
+                createHttpError(
+                    HttpCode.FORBIDDEN,
+                    "User does not have access to this organization"
+                )
+            );
+        }
+
+        let resourceId: number | undefined;
+        if (resourceGuid) {
+            const [resource] = await db
+                .select({
+                    resourceId: resources.resourceId
+                })
+                .from(resources)
+                .where(
+                    and(
+                        eq(resources.resourceGuid, resourceGuid),
+                        eq(resources.orgId, orgId)
+                    )
+                )
+                .limit(1);
+
+            if (!resource) {
+                return next(
+                    createHttpError(
+                        HttpCode.NOT_FOUND,
+                        `Resource with GUID ${resourceGuid} not found`
+                    )
+                );
+            }
+
+            resourceId = resource.resourceId;
+        }
+
+        const { key: userKeyRow } = await getOrCreateUserVirtualApiKey({
+            orgId,
+            userId,
+            createdByUserId: userId
+        });
+
+        const manualConditions = [
+            eq(virtualApiKeys.orgId, orgId),
+            eq(virtualApiKeys.userId, userId),
+            eq(virtualApiKeys.kind, "manual")
+        ];
+
+        if (resourceId !== undefined) {
+            manualConditions.push(
+                or(
+                    eq(virtualApiKeys.allResources, true),
+                    exists(
+                        db
+                            .select()
+                            .from(virtualApiKeyResources)
+                            .where(
+                                and(
+                                    eq(
+                                        virtualApiKeyResources.virtualApiKeyId,
+                                        virtualApiKeys.virtualApiKeyId
+                                    ),
+                                    eq(
+                                        virtualApiKeyResources.resourceId,
+                                        resourceId
+                                    )
+                                )
+                            )
+                    )
+                )!
+            );
+        }
+
+        const manualRows = await db
+            .select()
+            .from(virtualApiKeys)
+            .where(and(...manualConditions))
+            .orderBy(asc(virtualApiKeys.name), asc(virtualApiKeys.createdAt));
+
+        const allKeyIds = [
+            userKeyRow.virtualApiKeyId,
+            ...manualRows.map((row) => row.virtualApiKeyId)
+        ];
+        const resourceIdsByKey = await resourceIdsForKeys(allKeyIds);
+
+        return response<ListMyVirtualApiKeysResponse>(res, {
+            data: {
+                userKey: toKeyWithResources(userKeyRow, resourceIdsByKey),
+                manualKeys: manualRows.map((row) =>
+                    toKeyWithResources(row, resourceIdsByKey)
+                )
+            },
+            success: true,
+            error: false,
+            message: "Virtual API keys retrieved successfully",
+            status: HttpCode.OK
+        });
+    } catch (error) {
+        logger.error(error);
+        return next(
+            createHttpError(HttpCode.INTERNAL_SERVER_ERROR, "An error occurred")
+        );
+    }
+}

server/routers/virtualApiKey/types.ts

@@ -3,14 +3,27 @@ import type { PaginatedResponse } from "@server/types/Pagination";
 
 export type { PublicVirtualApiKey };
 
+export type VirtualApiKeyWithResources = PublicVirtualApiKey & {
+    resourceIds: number[];
+};
+
 export type ListVirtualApiKeysResponse = PaginatedResponse<{
-    virtualApiKeys: (PublicVirtualApiKey & { resourceIds: number[] })[];
+    virtualApiKeys: VirtualApiKeyWithResources[];
 }>;
 
 export type GetVirtualApiKeyResponse = {
-    virtualApiKey: PublicVirtualApiKey & { resourceIds: number[] };
+    virtualApiKey: VirtualApiKeyWithResources;
 };
 
 export type CreateOrEditVirtualApiKeyResponse = {
-    virtualApiKey: PublicVirtualApiKey & { resourceIds: number[] };
+    virtualApiKey: VirtualApiKeyWithResources;
+};
+
+export type ListMyVirtualApiKeysResponse = {
+    userKey: VirtualApiKeyWithResources;
+    manualKeys: VirtualApiKeyWithResources[];
+};
+
+export type GetMyVirtualApiKeyResponse = {
+    virtualApiKey: VirtualApiKeyWithResources;
 };

src/app/[orgId]/keys/page.tsx

@@ -0,0 +1,113 @@
+import { Layout } from "@app/components/Layout";
+import UserVirtualApiKeys from "@app/components/UserVirtualApiKeys";
+import { commandBarNavSections } from "@app/app/navigation";
+import { internal } from "@app/lib/api";
+import { authCookieHeader } from "@app/lib/api/cookies";
+import { verifySession } from "@app/lib/auth/verifySession";
+import { pullEnv } from "@app/lib/pullEnv";
+import UserProvider from "@app/providers/UserProvider";
+import { ListUserOrgsResponse } from "@server/routers/org";
+import { GetOrgOverviewResponse } from "@server/routers/org/getOrgOverview";
+import type { ListMyVirtualApiKeysResponse } from "@server/routers/virtualApiKey/types";
+import { AxiosResponse } from "axios";
+import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+import { redirect } from "next/navigation";
+import { cache } from "react";
+
+export async function generateMetadata(): Promise<Metadata> {
+    const t = await getTranslations();
+    return {
+        title: t("myVirtualApiKeysTitle")
+    };
+}
+
+type KeysPageProps = {
+    params: Promise<{ orgId: string }>;
+};
+
+export const dynamic = "force-dynamic";
+
+export default async function KeysPage(props: KeysPageProps) {
+    const params = await props.params;
+    const orgId = params.orgId;
+
+    if (!orgId) {
+        redirect(`/`);
+    }
+
+    const getUser = cache(verifySession);
+    const user = await getUser();
+
+    if (!user) {
+        redirect("/");
+    }
+
+    const cookieHeader = await authCookieHeader();
+
+    let overview: GetOrgOverviewResponse | undefined;
+    try {
+        const res = await internal.get<AxiosResponse<GetOrgOverviewResponse>>(
+            `/org/${orgId}/overview`,
+            cookieHeader
+        );
+        overview = res.data.data;
+    } catch {
+        // leave undefined
+    }
+
+    let orgs: ListUserOrgsResponse["orgs"] = [];
+    try {
+        const getOrgs = cache(async () =>
+            internal.get<AxiosResponse<ListUserOrgsResponse>>(
+                `/user/${user.userId}/orgs`,
+                cookieHeader
+            )
+        );
+        const res = await getOrgs();
+        if (res && res.data.data.orgs) {
+            orgs = res.data.data.orgs;
+        }
+    } catch {
+        // leave empty
+    }
+
+    if (!orgs.some((org) => org.orgId === orgId)) {
+        redirect("/");
+    }
+
+    let keysData: ListMyVirtualApiKeysResponse | null = null;
+    try {
+        const res = await internal.get<
+            AxiosResponse<ListMyVirtualApiKeysResponse>
+        >(`/org/${orgId}/my-virtual-api-keys`, cookieHeader);
+        keysData = res.data.data;
+    } catch {
+        redirect(`/${orgId}`);
+    }
+
+    if (!keysData) {
+        redirect(`/${orgId}`);
+    }
+
+    const env = pullEnv();
+    const primaryOrg = orgs.find((o) => o.orgId === orgId)?.isPrimaryOrg;
+    const isAdminOrOwner = Boolean(overview?.isAdmin || overview?.isOwner);
+
+    return (
+        <UserProvider user={user}>
+            <Layout
+                orgId={orgId}
+                orgs={orgs}
+                navItems={[]}
+                commandNavItems={commandBarNavSections(env, {
+                    isPrimaryOrg: primaryOrg
+                })}
+                showSidebar={false}
+                showViewAsAdmin={isAdminOrOwner}
+            >
+                <UserVirtualApiKeys orgId={orgId} initialData={keysData} />
+            </Layout>
+        </UserProvider>
+    );
+}

src/app/[orgId]/resource/[resourceGuid]/keys/page.tsx

@@ -0,0 +1,121 @@
+import { Layout } from "@app/components/Layout";
+import UserVirtualApiKeys from "@app/components/UserVirtualApiKeys";
+import { commandBarNavSections } from "@app/app/navigation";
+import { internal } from "@app/lib/api";
+import { authCookieHeader } from "@app/lib/api/cookies";
+import { verifySession } from "@app/lib/auth/verifySession";
+import { pullEnv } from "@app/lib/pullEnv";
+import UserProvider from "@app/providers/UserProvider";
+import { ListUserOrgsResponse } from "@server/routers/org";
+import { GetOrgOverviewResponse } from "@server/routers/org/getOrgOverview";
+import type { ListMyVirtualApiKeysResponse } from "@server/routers/virtualApiKey/types";
+import { AxiosResponse } from "axios";
+import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+import { redirect } from "next/navigation";
+import { cache } from "react";
+
+export async function generateMetadata(): Promise<Metadata> {
+    const t = await getTranslations();
+    return {
+        title: t("myVirtualApiKeysResourceTitle")
+    };
+}
+
+type ResourceKeysPageProps = {
+    params: Promise<{ orgId: string; resourceGuid: string }>;
+};
+
+export const dynamic = "force-dynamic";
+
+export default async function ResourceKeysPage(props: ResourceKeysPageProps) {
+    const params = await props.params;
+    const orgId = params.orgId;
+    const resourceGuid = params.resourceGuid;
+
+    if (!orgId || !resourceGuid) {
+        redirect(`/`);
+    }
+
+    const getUser = cache(verifySession);
+    const user = await getUser();
+
+    if (!user) {
+        redirect("/");
+    }
+
+    const cookieHeader = await authCookieHeader();
+
+    let overview: GetOrgOverviewResponse | undefined;
+    try {
+        const res = await internal.get<AxiosResponse<GetOrgOverviewResponse>>(
+            `/org/${orgId}/overview`,
+            cookieHeader
+        );
+        overview = res.data.data;
+    } catch {
+        // leave undefined
+    }
+
+    let orgs: ListUserOrgsResponse["orgs"] = [];
+    try {
+        const getOrgs = cache(async () =>
+            internal.get<AxiosResponse<ListUserOrgsResponse>>(
+                `/user/${user.userId}/orgs`,
+                cookieHeader
+            )
+        );
+        const res = await getOrgs();
+        if (res && res.data.data.orgs) {
+            orgs = res.data.data.orgs;
+        }
+    } catch {
+        // leave empty
+    }
+
+    if (!orgs.some((org) => org.orgId === orgId)) {
+        redirect("/");
+    }
+
+    let keysData: ListMyVirtualApiKeysResponse | null = null;
+    try {
+        const res = await internal.get<
+            AxiosResponse<ListMyVirtualApiKeysResponse>
+        >(
+            `/org/${orgId}/my-virtual-api-keys?resourceGuid=${encodeURIComponent(resourceGuid)}`,
+            cookieHeader
+        );
+        keysData = res.data.data;
+    } catch {
+        redirect(`/${orgId}/keys`);
+    }
+
+    if (!keysData) {
+        redirect(`/${orgId}/keys`);
+    }
+
+    const env = pullEnv();
+    const primaryOrg = orgs.find((o) => o.orgId === orgId)?.isPrimaryOrg;
+    const isAdminOrOwner = Boolean(overview?.isAdmin || overview?.isOwner);
+
+    return (
+        <UserProvider user={user}>
+            <Layout
+                orgId={orgId}
+                orgs={orgs}
+                navItems={[]}
+                commandNavItems={commandBarNavSections(env, {
+                    isPrimaryOrg: primaryOrg
+                })}
+                showSidebar={false}
+                showViewAsAdmin={isAdminOrOwner}
+            >
+                <UserVirtualApiKeys
+                    orgId={orgId}
+                    resourceGuid={resourceGuid}
+                    initialData={keysData}
+                />
+            </Layout>
+        </UserProvider>
+    );
+}

src/components/UserVirtualApiKeys.tsx

@@ -0,0 +1,277 @@
+"use client";
+
+import { useState } from "react";
+import { useTranslations } from "next-intl";
+import { AxiosResponse } from "axios";
+import moment from "moment";
+import { Badge } from "@app/components/ui/badge";
+import { Button } from "@app/components/ui/button";
+import CopyTextBox from "@app/components/CopyTextBox";
+import CopyToClipboard from "@app/components/CopyToClipboard";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import {
+    SettingsContainer,
+    SettingsFormCell,
+    SettingsFormGrid,
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionHeader,
+    SettingsSectionTitle as SectionTitle
+} from "@app/components/Settings";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { toast } from "@app/hooks/useToast";
+import type {
+    GetMyVirtualApiKeyResponse,
+    ListMyVirtualApiKeysResponse,
+    VirtualApiKeyWithResources
+} from "@server/routers/virtualApiKey/types";
+
+type UserVirtualApiKeysProps = {
+    orgId: string;
+    resourceGuid?: string;
+    initialData: ListMyVirtualApiKeysResponse;
+};
+
+function keyPreview(virtualApiKeyId: string, lastChars: string): string {
+    return `vk-${virtualApiKeyId}••••${lastChars}`;
+}
+
+function useRevealSecret(orgId: string, virtualApiKeyId: string) {
+    const t = useTranslations();
+    const api = createApiClient(useEnvContext());
+    const [credential, setCredential] = useState<string | null>(null);
+    const [loading, setLoading] = useState(false);
+
+    const revealSecret = () => {
+        if (credential || loading) {
+            return;
+        }
+
+        setLoading(true);
+        api.get<AxiosResponse<GetMyVirtualApiKeyResponse>>(
+            `/org/${orgId}/my-virtual-api-keys/${virtualApiKeyId}`
+        )
+            .then((res) => {
+                const secret = res.data.data.virtualApiKey.secret;
+                if (secret) {
+                    setCredential(`vk-${virtualApiKeyId}.${secret}`);
+                } else {
+                    toast({
+                        variant: "destructive",
+                        title: t("virtualApiKeysErrorFetchSecret"),
+                        description: t(
+                            "virtualApiKeysErrorFetchSecretDescription"
+                        )
+                    });
+                }
+            })
+            .catch((e) => {
+                toast({
+                    variant: "destructive",
+                    title: t("virtualApiKeysErrorFetchSecret"),
+                    description: formatAxiosError(
+                        e,
+                        t("virtualApiKeysErrorFetchSecretDescription")
+                    )
+                });
+            })
+            .finally(() => {
+                setLoading(false);
+            });
+    };
+
+    return { credential, loading, revealSecret };
+}
+
+function OwnedKeySecret({
+    orgId,
+    virtualApiKeyId,
+    lastChars
+}: {
+    orgId: string;
+    virtualApiKeyId: string;
+    lastChars: string;
+}) {
+    const t = useTranslations();
+    const preview = keyPreview(virtualApiKeyId, lastChars);
+    const { credential, loading, revealSecret } = useRevealSecret(
+        orgId,
+        virtualApiKeyId
+    );
+    const displayValue = credential ?? preview;
+
+    return (
+        <div className="flex items-center gap-3 min-w-0">
+            <div className="min-w-0 flex-1">
+                <CopyToClipboard
+                    text={displayValue}
+                    displayText={displayValue}
+                />
+            </div>
+            {!credential ? (
+                <Button
+                    variant="link"
+                    size="sm"
+                    className="shrink-0 px-0 h-auto"
+                    loading={loading}
+                    onClick={revealSecret}
+                >
+                    {t("myVirtualApiKeysRevealSecret")}
+                </Button>
+            ) : null}
+        </div>
+    );
+}
+
+function IdentityKeyCenterpiece({
+    orgId,
+    virtualApiKeyId,
+    lastChars,
+    resourceGuid
+}: {
+    orgId: string;
+    virtualApiKeyId: string;
+    lastChars: string;
+    resourceGuid?: string;
+}) {
+    const t = useTranslations();
+    const preview = keyPreview(virtualApiKeyId, lastChars);
+    const { credential, loading, revealSecret } = useRevealSecret(
+        orgId,
+        virtualApiKeyId
+    );
+    const displayValue = credential ?? preview;
+    const headline = resourceGuid
+        ? t("myVirtualApiKeysIdentityResourceHeadline")
+        : t("myVirtualApiKeysIdentityHeadline");
+    const description = resourceGuid
+        ? t("myVirtualApiKeysIdentityResourceDescription")
+        : t("myVirtualApiKeysIdentityDescription");
+
+    return (
+        <div className="flex flex-col items-center text-center py-10 md:py-14 px-4">
+            <h2 className="text-2xl font-semibold tracking-tight max-w-xl">
+                {headline}
+            </h2>
+            <p className="mt-3 text-muted-foreground max-w-lg text-sm">
+                {description}
+            </p>
+            <div className="mt-8 w-full max-w-2xl">
+                <div className="[&_pre]:text-base [&_code]:font-mono [&_code]:tracking-wide">
+                    <CopyTextBox text={displayValue} wrapText={false} />
+                </div>
+                {!credential ? (
+                    <div className="mt-3 flex justify-center">
+                        <Button
+                            variant="link"
+                            className="px-0 h-auto"
+                            loading={loading}
+                            onClick={revealSecret}
+                        >
+                            {t("myVirtualApiKeysRevealSecret")}
+                        </Button>
+                    </div>
+                ) : null}
+            </div>
+        </div>
+    );
+}
+
+function ManualKeyRow({
+    orgId,
+    keyRow
+}: {
+    orgId: string;
+    keyRow: VirtualApiKeyWithResources;
+}) {
+    const t = useTranslations();
+
+    return (
+        <div className="flex flex-col gap-3 border rounded-md p-4">
+            <div className="space-y-1 min-w-0">
+                <div className="flex items-center gap-2 flex-wrap">
+                    <p className="font-medium truncate">
+                        {keyRow.name || t("myVirtualApiKeysUnnamed")}
+                    </p>
+                </div>
+                {keyRow.description ? (
+                    <p className="text-sm text-muted-foreground">
+                        {keyRow.description}
+                    </p>
+                ) : null}
+                <div className="pt-1">
+                    <OwnedKeySecret
+                        orgId={orgId}
+                        virtualApiKeyId={keyRow.virtualApiKeyId}
+                        lastChars={keyRow.lastChars}
+                    />
+                </div>
+                <p className="text-xs text-muted-foreground">
+                    {t("created")} {moment(keyRow.createdAt).format("lll")}
+                </p>
+            </div>
+        </div>
+    );
+}
+
+export default function UserVirtualApiKeys({
+    orgId,
+    resourceGuid,
+    initialData
+}: UserVirtualApiKeysProps) {
+    const t = useTranslations();
+
+    const title = resourceGuid
+        ? t("myVirtualApiKeysResourceTitle")
+        : t("myVirtualApiKeysTitle");
+    const description = resourceGuid
+        ? t("myVirtualApiKeysResourceDescription")
+        : t("myVirtualApiKeysDescription");
+
+    return (
+        <>
+            <SettingsContainer>
+                <IdentityKeyCenterpiece
+                    orgId={orgId}
+                    virtualApiKeyId={initialData.userKey.virtualApiKeyId}
+                    lastChars={initialData.userKey.lastChars}
+                    resourceGuid={resourceGuid}
+                />
+
+                {initialData.manualKeys.length > 0 ? (
+                    <SettingsSection>
+                        <SettingsSectionHeader>
+                            <SectionTitle>
+                                {t("myVirtualApiKeysManualTitle")}
+                            </SectionTitle>
+                            <SettingsSectionDescription>
+                                {resourceGuid
+                                    ? t(
+                                          "myVirtualApiKeysManualResourceDescription"
+                                      )
+                                    : t("myVirtualApiKeysManualDescription")}
+                            </SettingsSectionDescription>
+                        </SettingsSectionHeader>
+                        <SettingsSectionBody>
+                            <SettingsFormGrid>
+                                {initialData.manualKeys.map((keyRow) => (
+                                    <SettingsFormCell
+                                        key={keyRow.virtualApiKeyId}
+                                        span="half"
+                                    >
+                                        <ManualKeyRow
+                                            orgId={orgId}
+                                            keyRow={keyRow}
+                                        />
+                                    </SettingsFormCell>
+                                ))}
+                            </SettingsFormGrid>
+                        </SettingsSectionBody>
+                    </SettingsSection>
+                ) : null}
+            </SettingsContainer>
+        </>
+    );
+}