API Keys
Credentials, listed and revocable. A key is shown in full exactly once — after that only the prefix and last four, because a list that can reveal every key means a session holds every secret.
src/components/ui/api-keys.tsxAbout
From the component's own source, where it was written.
API credentials, listed and revocable.
A key is shown in full exactly once — when it is created. After that only the prefix and last four characters are available, because a list that can reveal every key on demand means anyone with a session has every secret. secret is therefore optional and expected to be absent for existing keys.
Revoking is confirmed inline rather than in a dialog. The confirmation needs to sit beside the key it affects — a modal saying "revoke this key?" with the list hidden behind it is how the wrong one gets revoked.
Install
npx astralyx-ui add api-keys
Usage
import { ApiKeys } from '@/components/ui/api-keys'
<ApiKeys keys={keys} onRevoke={revoke} />Composer
Change the props and the source below follows.
- Productionreadwrite
ax_live_••••••••a91fCreated Last used
- CI runnerread
ax_live_••••••••4c2eCreated Last used
- Local developmentCopy it now
ax_test_••••••••7b10Created Never used
<ApiKeys keys={keys} onRevoke={revoke} />Examples
Keys
<ApiKeys keys={keys} onRevoke={revoke} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
ApiKeys
Extends Omit<ComponentProps<'div'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| keys | ApiKey[] | required | { id, name, prefix, last4, created, lastUsed?, scopes?, secret? }. |
| onRevoke | (id: string) => void | — | Confirmed inline beside the key — a modal with the list hidden behind it is how the wrong key gets revoked. |
| now | Date | — | — |
| emptyLabel | ReactNode | 'No API keys yet' | — |
| freshLabel | ReactNode | 'Copy it now' | Badge on a key whose secret is still visible. |
| revealLabel | string | 'Reveal key' | — |
| hideLabel | string | 'Hide key' | — |
| copyLabel | string | 'Copy key' | — |
| revokeLabel | ReactNode | 'Revoke' | — |
| revokeActionLabel | (name: string) => string | DEFAULT_REVOKE_ACTION_LABEL | Accessible name for the revoke control, given the key's name. |
| createdLabel | ReactNode | 'Created' | — |
| lastUsedLabel | ReactNode | 'Last used' | — |
| neverUsedLabel | ReactNode | 'Never used' | — |
| confirmNote | ReactNode | 'Revoking is immediate and cannot be undone.' | — |
| cancelLabel | ReactNode | 'Cancel' | — |
Types
ApiKey
API credentials, listed and revocable.
| Field | Type | Description |
|---|---|---|
| id | string | — |
| name | string | — |
| prefix | string | Shown as sk_live_…abcd. |
| last4 | string | — |
| created | Date | — |
| lastUsed? | Date | — |
| scopes? | string[] | — |
| secret? | string | Present only for a key just created. Its absence is what makes older keys unrevealable rather than a UI choice. |