API keys
BlockList, create and revoke API keys — each new key shown once with copy, then only its masked form; revoking asks first.
- SaaS
- 11 components
- 1 file
Loading the example…
pnpm dlx @dowel-ui/cli add api-keysimport { ApiKeysBlock } from "@/components/blocks/api-keys"; export default function Page() { return <ApiKeysBlock />;}<ApiKeysBlock>
| Prop | Type | Default |
|---|---|---|
description | string | "Keys let your servers call the API. Treat them like passwords." |
headingLevelThe headline's level. | 1 | 2 | 3 | 4 | 5 | 6 | 2 |
keysThe keys there are now. | ApiKey[] | DEFAULT_KEYS |
localeLocale for dates. | string | — |
onCreateMakes a key on the server and returns it with its secret, which is shown once. Without it, a key is made in the browser — for demos only. | (input: { name: string; scopes: string[]; }) => Promise<{ key: ApiKey; secret: string }> | — |
onRevokeRevokes a key on the server. Reject to keep it listed. | (id: string) => void | Promise<void> | — |
scopes | ApiKeyScope[] | DEFAULT_SCOPES |
title | string | "API keys" |
Plus every attribute of <section> except title.
Keys are a real table with a caption, scrolling inside a named, focusable region. Each Revoke button names its key, and revoking asks in a destructive alert dialog that says what stops working. Creating asks for a name and at least one permission (a fieldset with a legend), checked on submit with errors in words. The new key is shown once with copy and an acknowledgement, and a status line announces each key created and revoked.