ApiKeys

List, create and revoke API keys. A new key is shown once.

SourcePackage @kerf-js/veneer

Preview

tsx

import { state } from '@kerf-js/core'import { ApiKeys, Toaster } from '@kerf-js/veneer'import type { ApiKey } from '@kerf-js/veneer'export function Test() {  const keys = state<readonly ApiKey[]>(API_KEYS)  const create = async (draft: {    name: string    scopes: string[]  }) => {    await wait(600)    keys.value = [      {        id: draft.name,        name: draft.name,        prefix: 'tsl_test_77aa',        scopes: draft.scopes,        created: 'Today',      },      ...keys.value,    ]    return 'tsl_test_77aa_sample_not_a_real_key'  }  return (    <>      <ApiKeys        keys={keys}        now={NOW}        onCreate={create}        onRevoke={(key) => {          keys.value = keys.value.filter((k) => k !== key)        }}      />      <Toaster />    </>  )}const NOW = '2026-10-31T17:00:00Z'const API_KEYS: ApiKey[] = [  {    id: 'k1',    name: 'CI deploys',    prefix: 'tsl_test_8c2f',    scopes: ['deploy'],    created: 'Sep 30',    lastUsed: '2026-10-31T16:42:00Z',  },  {    id: 'k2',    name: 'Metrics export',    prefix: 'tsl_test_41ab',    scopes: ['read'],    created: 'Aug 2',    lastUsed: '2026-10-12T10:00:00Z',  },  {    id: 'k3',    name: 'Staging smoke tests',    prefix: 'tsl_test_e07d',    scopes: ['read', 'deploy'],    created: 'Jul 19',    lastUsed: '2026-10-30T04:10:00Z',  },  {    id: 'k4',    name: 'Old Jenkins box',    prefix: 'tsl_test_19c4',    scopes: ['deploy'],    created: 'Mar 3',  },]const wait = (ms: number) =>  new Promise<void>((done) => {    setTimeout(done, ms)  })

Installation

npm install @kerf-js/veneer

Usage

tsx

import { ApiKeys } from '@kerf-js/veneer'

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and veneer's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`keys`	`readonly ApiKey[] \| State<readonly ApiKey[]>`	—	The keys: only ever a prefix, never the secret.
`kind`	`"live" \| "test"`	`'test'`	`test` or `live`, for the words on the page.
`now`	`string`	—	The current time, for "last used" and the one-day revoke rule.
`scopes`	`{ value: string; label: string; }[]`	`SCOPES`	The scopes to offer.
`expiries`	`{ value: string; label: string; }[]`	`EXPIRIES`	The expiry choices.

Event	Type	Default	Description
`onReauth`	`((reason: string) => Promise<boolean>)`	—	Ask for a fresh sign-in first. Resolve false to stop.
`onCreate`	`(draft: KeyDraft) => Promise<string>`	—	Creates the key and returns its full secret.
`onRevoke`	`(key: ApiKey) => void \| Promise<void>`	—	Revokes it.

RelatedReauth dialog Sign gate Webhooks