API Keys Widget

A widget for displaying and managing API keys.

The <ApiKeys /> widget allows users to create, view, and revoke API keys, all within the widget. It supports two scopes via the scope prop:

"organization" (the default): manage API keys owned by the organization.
"user": manage API keys owned by individual users.

Organization API keys

The default scope="organization" mode allows admins to manage API keys in an organization. Admins can create API keys with specific permissions, view details of existing API keys, and revoke API keys.

In order to use the widget with scope="organization", a user must have a role that has the widgets:api-keys:manage permission.

JavaScript

 import { ApiKeys, WorkOsWidgets } from '@workos-inc/widgets';

/**
 * @param {string} authToken - A widget token that was fetched in your backend. See the
 * "Tokens" section of this guide for details on how to generate the token
 */
export function ApiKeysPage({ authToken }) {
  return (
    <WorkOsWidgets>
      <ApiKeys authToken={authToken} />
    </WorkOsWidgets>
  );
}

User API keys

Setting scope="user" puts the widget into user API key management. In order to use the widget with scope="user", a user must have a role that has at least one of the following permissions:

widgets:user-api-keys:manage-self: the user can create, view, and revoke their own API keys.
widgets:user-api-keys:manage-all: includes everything manage-self grants, plus the ability to view and revoke API keys owned by any other user in the organization.

JavaScript

 import { ApiKeys, WorkOsWidgets } from '@workos-inc/widgets';

/**
 * @param {string} authToken - A widget token that was fetched in your backend
 * with one of `widgets:user-api-keys:manage-self` or
 * `widgets:user-api-keys:manage-all`. See the "Tokens" section of this guide
 * for details on how to generate the token.
 */
export function UserApiKeysPage({ authToken }) {
  return (
    <WorkOsWidgets>
      <ApiKeys authToken={authToken} scope="user" />
    </WorkOsWidgets>
  );
}

API Reference

Prop	Type	Default	Required
`authToken`	`AuthToken`	No default value	Required
`scope`	`"organization" \| "user"`	`"organization"`	Not required