<APIKeys /> component
The <APIKeys /> component is used to manage API keys for your application. It allows you to create, edit, and revoke API keys for your application.
To utilize the <APIKeys /> component, you must first enable API keys in the Clerk Dashboard.
Properties
All props are optional.
- Name
type- Type
'api_key'- Description
The type of API key to filter by. Currently, only 'api_key' is supported.
- Name
perPage- Type
number- Description
The number of API keys to show per page. Defaults to 5.
- Name
appearance- Type
Appearance | undefined- Description
Optional object to style your components. Will only affect Clerk components and not Account Portal pages.
- Name
fallback?- Type
ReactNode- Description
An optional element to be rendered while the component is mounting.
Usage with frameworks
The following example includes a basic implementation of the <APIKeys /> component. You can use this as a starting point for your own implementation.
import { APIKeys } from '@clerk/nextjs'
export default function Page() {
return <APIKeys />
}import { APIKeys } from '@clerk/clerk-react'
export default function Page() {
return <APIKeys />
}import { APIKeys } from '@clerk/react-router'
export default function Page() {
return <APIKeys />
}import { APIKeys } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/api-keys')({
component: Page,
})
function Page() {
return <APIKeys />
}Usage with JavaScript
The following methods available on an instance of the Clerk class are used to render and control the <APIKeys /> component:
The following examples assume that you followed the quickstart to add Clerk to your JavaScript app.
mountApiKeys()
function mountApiKeys(node: HTMLDivElement, props?: APIKeysProps): void- Name
node- Type
HTMLDivElement- Description
The container
<div>element used to render in the<APIKeys />component
- Name
props?- Type
APIKeysProps- Description
The properties to pass to the
<APIKeys />component
import { Clerk } from '@clerk/clerk-js'
// Initialize Clerk with your Clerk Publishable Key
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
const clerk = new Clerk(clerkPubKey)
await clerk.load()
document.getElementById('app').innerHTML = `
<div id="api-keys"></div>
`
const apiKeysDiv = document.getElementById('api-keys')
clerk.mountApiKeys(apiKeysDiv)function unmountApiKeys(node: HTMLDivElement): void- Name
node- Type
HTMLDivElement- Description
The container
<div>element with a rendered<APIKeys />component instance
import { Clerk } from '@clerk/clerk-js'
// Initialize Clerk with your Clerk Publishable Key
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
const clerk = new Clerk(clerkPubKey)
await clerk.load()
document.getElementById('app').innerHTML = `
<div id="api-keys"></div>
`
const apiKeysDiv = document.getElementById('api-keys')
clerk.mountApiKeys(apiKeysDiv)
// ...
clerk.unmountApiKeys(apiKeysDiv)Customization
To learn about how to customize Clerk components, see the customization guide.
Feedback
Last updated on