Customization
ApiKeyManager
Dashboard sub-component for issuing, revoking and rotating API keys. Includes scopes, last-seen, and reveal-once-on-create.
Usage
Pick your edition with the tabs. Selection syncs across all docs.
tsx
import { ApiKeyManager } from '@/components/organisms'
<ApiKeyManager
keys={apiKeys}
scopes={['read', 'write', 'admin']}
onCreate={async (input) => createKey(input)}
onRevoke={async (id) => revokeKey(id)}
onRotate={async (id) => rotateKey(id)}
/>Props
Same surface in both editions; HTML version exposes equivalents through Alpine x-data.
| Prop | Type | Default | Description |
|---|---|---|---|
| keys | ApiKey[] | [] | Array of keys with name, scopes, lastUsedAt, createdAt. |
| scopes | string[] | [] | Available scopes shown in the create form. |
| onCreate | (input) => Promise<ApiKey> | — | Resolve with the created key — value is shown once. |
| onRevoke | (id) => Promise<void> | — | Permanently revokes the key. |
| onRotate | (id) => Promise<ApiKey> | — | Issues a new value, invalidating the previous one. |
Accessibility
role
Native <table> with column headers and row scopes.
live
Newly created keys announce via aria-live='polite' once-only.