API Key

The API key plugin adds programmatic API key management to your authentication UI. Users can create, copy, and revoke API keys from a security card in account settings.

It contributes:

• An <ApiKeys /> card to the security settings tab for user-owned keys
• An <OrganizationApiKeys /> card to <OrganizationSettings /> for organization-owned keys (opt-in via apiKeyPlugin({ organization: true }); requires the organization plugin and a matching server-side API key config)

Setup

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

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

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

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

import { AuthProvider } from "@better-auth-ui/heroui"
import { apiKeyPlugin } from "@better-auth-ui/heroui/plugins"

import { authClient } from "@/lib/auth-client"

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

Components

<ApiKeys />

The <ApiKeys /> security card is automatically rendered in <SecuritySettings /> when the plugin is registered. Pass organizationId to scope the list and create payload to an organization instead of the signed-in user.

Usage

import { ApiKeys } from "@better-auth-ui/heroui/plugins"

<ApiKeys />

Props

<OrganizationApiKeys />

A thin wrapper around <ApiKeys /> that resolves the active organization via useActiveOrganization and forwards its id. Rendered inside <OrganizationSettings /> only when the plugin is registered with { organization: true }.

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

import { AuthProvider } from "@better-auth-ui/heroui"
import { apiKeyPlugin } from "@better-auth-ui/heroui/plugins"

import { authClient } from "@/lib/auth-client"

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

import { betterAuth } from "better-auth"
import { apiKey } from "@better-auth/api-key"
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 "@better-auth-ui/heroui/plugins"

<OrganizationApiKeys />

Props

Options

Localization