ApiKeysCard

The ApiKeysCard component provides a complete interface for managing API keys, including listing existing keys, creating new ones, and revoking access.

Usage

import { ApiKeysCard } from '@bettercone/ui';
import { authClient } from '@/lib/auth-client';

export default function DeveloperPage() {
  return (
    <div className="max-w-4xl mx-auto space-y-8">
      <ApiKeysCard authClient={authClient} />
    </div>
  );
}

Features

✅ List all API keys
✅ Create new API keys with name, expiration, and scopes
✅ Copy keys to clipboard (shown once on creation)
✅ Revoke keys with confirmation
✅ Last used tracking
✅ Masked key display for security
✅ Rate limits and refill configuration

Props

Prop	Type	Default	Description
`authClient`	`AnyAuthClient`	required	Better Auth client instance
`onKeyCreated`	`(key: ApiKey) => void`	-	Callback after successful key creation
`onKeyRevoked`	`(keyId: string) => void`	-	Callback after key revocation
`className`	`string`	-	Additional CSS classes

Sub-components

The ApiKeysCard component uses these sub-components internally:

ApiKeyCell - Individual API key list item
CreateApiKeyDialog - Dialog for creating new keys
UpdateApiKeyDialog - Dialog for editing existing keys

Examples

Basic Usage

<ApiKeysCard authClient={authClient} />

With Callbacks

<ApiKeysCard 
  authClient={authClient}
  onKeyCreated={(key) => {
    console.log('New key created:', key.name);
    toast.success('API key created successfully');
  }}
  onKeyRevoked={(keyId) => {
    console.log('Key revoked:', keyId);
    toast.success('API key revoked');
  }}
/>

ApiKeyUsageCard - View usage statistics for a specific key
CreateApiKeyDialog - Standalone create dialog
UpdateApiKeyDialog - Standalone update dialog

ApiKeysCard

On this page