<ApiKeysCard />

The <ApiKeysCard /> component provides a complete interface for managing API keys, including creating, viewing, and deleting API keys for programmatic access to your application.

Usage

import { ApiKeysCard } from '@daveyplate/better-auth-ui'

export function ApiKeysSettingsPage() {
  return (
    <ApiKeysCard />
  )
}

Features

• Create API Keys: Generate new API keys with custom names and expiration
• View API Keys: List all active API keys with masked values
• Delete API Keys: Remove API keys that are no longer needed
• Expiration Management: Set expiration dates for API keys
• Copy to Clipboard: Easy copying of newly created keys

Reference

Examples

Basic Usage

<ApiKeysCard />

With Custom Class Names

<ApiKeysCard 
  classNames={{
    base: "shadow-md",
    button: "rounded-full",
    cell: "hover:bg-accent"
  }}
/>

With Custom Localization

<ApiKeysCard 
  localization={{
    API_KEYS: "Developer Keys",
    CREATE_API_KEY: "Generate New Key",
    DELETE: "Revoke"
  }}
/>

API Key Creation

When creating a new API key, users can:

1. Set a Name: Identify the key's purpose
2. Set Expiration: Choose from predefined durations or no expiration
   • 1 day
   • 7 days
   • 30 days
   • 60 days
   • 90 days
   • 180 days
   • 1 year
   • No expiration

Security Features

• One-Time Display: API keys are shown only once after creation
• Masked Display: Only the first few characters are shown in the list
• Secure Storage: Keys are hashed and stored securely
• Immediate Revocation: Keys can be deleted instantly

Requirements

The API Key plugin must be enabled in your auth configuration:

<AuthUIProvider
  authClient={authClient}
  apiKey={{
    prefix: "app_", // Optional: Custom prefix for keys
    metadata: {      // Optional: Additional metadata
      environment: "production"
    }
  }}
>
  {children}
</AuthUIProvider>

Display Components

API Key List

Shows all active API keys with:

• Key name
• Masked key value (first 4 characters + asterisks)
• Expiration date or "Never expires"
• Delete button

Create Dialog

Modal for creating new keys with:

• Name input field
• Expiration dropdown
• Create button with loading state

Display Dialog

Shows newly created key with:

• Full API key value
• Copy to clipboard button
• Warning about one-time display
• Done button to close

Best Practices

1. Naming Convention: Use descriptive names for keys
2. Expiration Policy: Always set expiration for production keys
3. Key Rotation: Regularly rotate API keys
4. Access Control: Limit who can create/delete keys
5. Monitoring: Track API key usage