ApiKeys

Code

import { ApiKeys, type ApiKeyRecord } from "@fadymondy/nasaq/web";declare const keys: ApiKeyRecord[];declare const api: {  create(input: { name: string; scopes: string[]; expiresInDays: number | null }): Promise<{ secret: string }>;  revoke(id: string): Promise<void>;};export function Keys() {  return (    <ApiKeys      keys={keys}      scopes={[        { id: "read", label: "Read" },        { id: "write", label: "Write" },      ]}      onCreate={async (input) => ({ secret: (await api.create(input)).secret })}      onRevoke={(id) => api.revoke(id)}    />  );}

Developer Tools · beta

Live examples and controls: ApiKeys in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/api-keys.json

Create, see and retire API keys. The secret is shown once, in a dialog with a copy button, and never again: the list only has the public prefix and the last four characters. It has no backend: your callbacks call your server and you pass the updated keys back.

When to useCopy Anchor Link

• A developer or settings page where people make keys for scripts and servers.
• Any place a secret must be shown exactly once.

When not to useCopy Anchor Link

• Session or OAuth tokens: those are not managed by hand.
• Showing a secret you keep readable: this component assumes you cannot show it again.

ImportCopy Anchor Link

import { ApiKeys } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { ApiKeys, type ApiKeyRecord } from "@fadymondy/nasaq/web";

declare const keys: ApiKeyRecord[];
declare const api: {
  create(input: { name: string; scopes: string[]; expiresInDays: number | null }): Promise<{ secret: string }>;
  revoke(id: string): Promise<void>;
};

export function Keys() {
  return (
    <ApiKeys
      keys={keys}
      scopes={[
        { id: "read", label: "Read" },
        { id: "write", label: "Write" },
      ]}
      onCreate={async (input) => ({ secret: (await api.create(input)).secret })}
      onRevoke={(id) => api.revoke(id)}
    />
  );
}

AnatomyCopy Anchor Link

ApiKeys                         data-slot="api-keys" (Card)
├─ header + Create key          opens the create Dialog: name, scope checkboxes, expiry Select
├─ list                         data-slot="api-key" (data-status="active|expiring|expired|revoked")
│  ├─ name, masked key          nsq_live_a1b2••••9f3c (dir="ltr")
│  ├─ scope badges, status      Status: Active, Expires soon, Expired, Revoked
│  ├─ created, last used, expires
│  └─ Rotate and Revoke         each a ConfirmButton (AlertDialog)
└─ reveal dialog                data-slot="api-key-secret": Alert "copy it now" + CopyField

APICopy Anchor Link

ApiKeys: every div prop except children, plus:

Helpers (pure, tested): maskKey(prefix, last4), keyStatus(record, now?), expiryFromDays(days, now?), daysLeft(date, now?), toggleScope(all, selected, id), EXPIRING_DAYS (7).

ExamplesCopy Anchor Link

Rotate

import { ApiKeys, type ApiKeyRecord } from "@fadymondy/nasaq/web";

declare const keys: ApiKeyRecord[];
declare const api: { rotate(id: string): Promise<string> };

export const Rotating = () => (
  <ApiKeys
    keys={keys}
    scopes={[{ id: "read", label: "Read" }]}
    onCreate={async () => ({ error: "Not in this example" })}
    onRotate={async (id) => ({ secret: await api.rotate(id) })}
  />
);

AccessibilityCopy Anchor Link

• Dialogs trap focus and return it. The confirm dialogs are AlertDialog: focus lands on Cancel, Escape closes.
• Status is text plus colour, never colour alone. Scope checkboxes are in a labelled group.
• The reveal dialog announces that the secret will not be shown again. Errors are role="alert".

RTL & i18nCopy Anchor Link

• English and Arabic strings follow the Nasaq locale. Keys, prefixes and secrets are dir="ltr".

Styling & tokensCopy Anchor Link

• Built on Card, Dialog, AlertDialog, Status, Badge, CopyField and --nq-* tokens.
• Target [data-slot="api-key"][data-status="expiring"].

Do / Don'tCopy Anchor Link

• Do store only a hash of the secret on the server and return the secret from onCreate once.
• Do give every key the narrowest scopes and an expiry.
• Don't log the returned secret or keep it in client state after the dialog closes. The component drops it after close.
• Don't show the full key in the list.

RelatedCopy Anchor Link

• McpConnect
• CopyButton
• AlertDialog

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-developer-tools-api-keys--docs