API Key

The API key plugin adds programmatic API key management to your Solid/Zaidan authentication settings. Users can create, reveal once, copy, list, and revoke API keys from security and organization settings.

It contributes:

• An <ApiKeys /> card rendered by the copied SecuritySettings component when the API Key plugin is enabled
• An <OrganizationApiKeys /> card for organization-owned keys when apiKeyPlugin({ organization: true }) is registered
• Solid query and mutation wiring through listApiKeysOptions, createApiKeyOptions, and deleteApiKeyOptions
• App-owned API key cards, empty state, loading placeholder, create dialog, new-key reveal dialog, and delete confirmation dialog

Setup

import { apiKey } from "@better-auth/api-key"
import { betterAuth } from "better-auth"

export const auth = betterAuth({
  // ...
  plugins: [
    apiKey() 
  ]
})

import { apiKeyClient } from "@better-auth/api-key/client"
import { createAuthClient } from "@better-auth-ui/solid"

export const authClient = createAuthClient({
  plugins: [
    apiKeyClient() 
  ]
})

npx shadcn@latest add https://better-auth-ui.com/r/solid/api-key.json

import { apiKeyPlugin } from "@/lib/auth/api-key-plugin"

<AuthProvider
  authClient={authClient}
  plugins={[
    apiKeyPlugin({ organization: true }) 
  ]}
>
  {children}
</AuthProvider>

Components

<ApiKeys />

The <ApiKeys /> security card is rendered on the security settings page when your settings layout includes the copied SecuritySettings component and the API Key plugin is enabled. It uses the Solid runtime APIs from @better-auth-ui/solid to list, create, and revoke keys.

Usage

import { ApiKeys } from "@/components/auth/api-key/api-keys"

<ApiKeys />

This component is normally mounted by SecuritySettings; render it manually only if you are building a custom settings layout.

Props

<OrganizationApiKeys />

A thin wrapper around <ApiKeys /> that resolves the active organization with useActiveOrganization, checks the current user with useListOrganizationMembers, and renders nothing unless the user is an organization owner.

To enable, opt in on the copied UI plugin and add a matching API key configuration to your Better Auth server config. The organization API key config uses a fixed configId of "organization", so the server entry must be { configId: "organization", references: "organization" }:

import { apiKeyPlugin } from "@/lib/auth/api-key-plugin"

<AuthProvider
  authClient={authClient}
  plugins={[
    apiKeyPlugin({ organization: true }) 
  ]}
>
  {children}
</AuthProvider>

import { apiKey } from "@better-auth/api-key"
import { betterAuth } from "better-auth"
import { organization } from "better-auth/plugins"

export const auth = betterAuth({
  // ...
  plugins: [
    organization(),
    apiKey([
      { configId: "default", references: "user" },
      { configId: "organization", references: "organization" } 
    ])
  ]
})

See the Better Auth docs for role-based permissions on organization-owned keys.

Usage

import { OrganizationApiKeys } from "@/components/auth/api-key/organization-api-keys"

<OrganizationApiKeys />

Props

Options

Runtime API references

List API keys

Create API key

Delete API key

Localization