API keys managerPro
Create scoped live/test keys, reveal once, copy, and revoke with confirmation.
What's inside
- Live and test environments
- Scope picker
- Reveal-once with copy
- Revoke with confirmation
When to use
- Developer settings in any API product.
When not to use
- OAuth apps: those need client id and secret flows.
Installation
Usage
Import it from @/components/blocks/api-keys-manager after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.
example.tsx
import { ApiKeysManager } from "@/components/blocks/api-keys-manager";
export default function Page() {
return (
<main className="mx-auto max-w-6xl p-6">
<ApiKeysManager />
</main>
);
}API reference
ApiKeysManager
Create scoped live and test keys, reveal once with copy, and revoke with confirmation. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.
No props.
Keyboard interactions
| Keys | Action |
|---|---|
| Tab | Move through keys and buttons |
| Esc | Close the create or revoke dialog |
Accessibility
- Dialogs trap focus; scopes are labelled checkboxes.
- Copy announces success.
Motion
- New keys slide into the list; revoked keys collapse out.
Responsive behavior
- Key rows become two lines below 768px.
Performance
- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.
Notes for AI
- Generate and hash keys on the server; show the secret only in the create response.
This page as Markdown, for assistants and coding agents:
/blocks/api-keys-manager/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt