# Organization API Key Table Component

PropelAuth's Org API Key Table Component allows you to customize the UI around managing and deleting an org's API Keys. For more information on API Keys, check out our [docs here](https://docs.propelauth.com/overview/authentication/api-keys).

## Organization API Keys

| Name        | Key ID             | Created                     | Expires |  |
| ----------- | ------------------ | --------------------------- | ------- | --- |
| My API Key  | 80d51e93a891...    | 6/4/2026, 9:35:54 PM       | Never   | …<br>Update NameDelete |
| My API Key  | c575c0751162...    | 6/4/2026, 9:35:54 PM       | Never   | …<br>Update NameDelete |

## [Shadcn Installation](https://ui.propelauth.com/api-key-components/org-api-key-table#shadcn-installation)

Install this component from our [shadcn registry](https://ui.propelauth.com/getting-started/component-registry).

```bash
npx shadcn@latest add https://components.propelauth.com/r/org-api-key-table.json
```

# Reference APIs

These are the APIs that are used by the above component. You can use these APIs directly in your own code.

## [fetchOrgApiKeys](https://ui.propelauth.com/api-key-components/org-api-key-table#fetch-org-api-keys)

Fetches a paginated list of an org's API keys. This will not return the full API key, just the Key ID, expiration, created at, and metadata.

## Arguments

- Name `org_id`  \* Type string  Description The ID of the org to fetch expired invites for.
- Name `page_number` Type number Description The page number to return. Starts at 0.
- Name `page_size` Type number Description The amount of results per page.
- Name `api_key_search` Type string Description Filter by Key ID.
- Name `sort_by` Type string Description Can be one of the following: 'CreatedAtAsc' | 'CreatedAtDesc' | 'ExpiresAtAsc' | 'ExpiresAtDesc'

## Success Response

- Name `api_keys` Type OrgApiKey[] Description

An array of API Keys belonging to the provided org.
  - `display_name` _string | null_
  - `api_key_id` _string_
  - `created_at` _number_
  - `expires_at_seconds` _number | null_
  - `metadata` _object | null_

- Name `total_api_keys` Type number Description The total amount of API keys belonging to the org.
- Name `current_page` Type number Description The current page.
- Name `page_size` Type number Description The maximum amount of results of the page.
- Name `has_more_results` Type boolean Description Returns true if there are more results beyond the current page.

## Response Functions

The response object has a **handle** function that you can use to handle the response. These functions can be async, and you can return values from them.

- Name `success` Description Successful request.
- Name `orgApiKeysDisabled` Description Org API keys are not enabled in your PropelAuth project.
- Name `badRequest` Description Incorrect arguments provided.
- Name `orgNotFound` Description The provided Org ID was not found.
- Name `cannotAccessOrgApiKeys` Description The user does not have permission to access org API keys.
- Name `unauthorized` Description The user is not logged in.
- Name `unexpectedOrUnhandled` Description An unexpected error occurred.

### Request

```javascript
const { fetchOrgApiKeys } = useAuthFrontendApis()

const response = await fetchOrgApiKeys({
    org_id: '1189c444-8a2d-4c41-8b4b-ae43ce79a492',
    page_number: 0,
    page_size: 10,
    api_key_search: '31c41c16-c2...',
})
await response.handle({
    success: (data) => {
        console.log(data)
    },
    orgApiKeysDisabled(error) {
        console.error('Org API keys are disabled', error.user_facing_error)
    },
    orgNotFound(error) {
        console.error('Org not found', error.user_facing_error)
    },
    cannotAccessOrgApiKeys(error) {
        console.error('Cannot access org API keys', error.user_facing_error)
    },
    badRequest(error) {
        for (const [field, fieldErrorMessage] of Object.entries(error.user_facing_errors)) {
            console.log('Error: "' + fieldErrorMessage + '" for field: "' + field + '"
        }
    },
    unexpectedOrUnhandled(error) {
        console.error('Unexpected or unhandled error', error.user_facing_error)
    },
})
```

### Successful Response

```json
{
    "api_keys": [
    {
        "display_name": "My API Key",
        "api_key_id": "eeb1dfea92cadc475dfce6d93aeac567",
        "created_at": 1732639470,
        "expires_at_seconds": 1732645813,
        "metadata": null
    },
    {
        "api_key_id": "e51c60d190d85d196c07c0caa44389c4",
        "created_at": 1731707412,
        "expires_at_seconds": null,
        "metadata": {
            "example": "test"
        }
    }
    ],
    "total_api_keys": 2,
    "current_page": 0,
    "page_size": 10,
    "has_more_results": false
}
```

## [deleteApiKey](https://ui.propelauth.com/api-key-components/org-api-key-table#delete-api-key)

Deletes the provided API Key.

## Arguments

- Name `apiKeyId`  \* Type string Description The ID of the API Key to be deleted.

## Response Functions

The response object has a **handle** function that you can use to handle the response. These functions can be async, and you can return values from them.

- Name `success` Description Successful request.
- Name `apiKeyNotFound` Description API Key ID not associated with an API key that belongs to the user.
- Name `noApiKeyPermission` Description User does not have permission to delete the API key.
- Name `unauthorized` Description The user is not logged in.
- Name `unexpectedOrUnhandled` Description An unexpected error occurred.

### Request

```javascript
const { deleteApiKey } = useAuthFrontendApis()

const response = await deleteApiKey("justAnId")
await response.handle({
    success: async () => {
        console.log('success')
    },
    apiKeyNotFound(error) {
        console.error('API key not found', error.user_facing_error)
    },
    noApiKeyPermission(error) {
        console.error('Forbidden', error.user_facing_error)
    },
    unexpectedOrUnhandled(error) {
        console.error('Unexpected or unhandled error', error.user_facing_error)
    },
})
```

### Successful Response

```json
{}
```

## [updateApiKey](https://ui.propelauth.com/api-key-components/org-api-key-table#update-api-key)

Updates the display name of an API Key.

## Arguments

- Name `api_key_id`  \* Type string Description The ID of the API Key to be updated.
- Name `display_name`  \* Type string Description The new name of the API Key.

## Response Functions

The response object has a **handle** function that you can use to handle the response. These functions can be async, and you can return values from them.

- Name `success` Description Successful request.
- Name `apiKeyNotFound` Description API Key ID not associated with an API key that belongs to the user.
- Name `noApiKeyPermission` Description User does not have permission to update the API key.
- Name `unauthorized` Description The user is not logged in.
- Name `badRequest` Description Incorrect arguments given.
- Name `unexpectedOrUnhandled` Description An unexpected error occurred.

### Request

```javascript
const { updateApiKey } = useAuthFrontendApis()

const response = await updateApiKey({
    api_key_id: 'c45ccb5055080ad0ebb03d43e6332f5d',
    display_name: 'My API Key',
})
response.handle({
    success: async () => {
        console.log('success')
    },
    apiKeyNotFound(error) {
        console.error('API key not found', error.user_facing_error)
    },
    noApiKeyPermission(error) {
        console.error('Forbidden', error.user_facing_error)
    },
    unexpectedOrUnhandled(error) {
        console.error('Unexpected or unhandled error', error.user_facing_error)
    },
    badRequest(error) {
        console.error(error.user_facing_errors.display_name)
    },
})
```

### Successful Response

```json
{}
```