# Personal API Key Table Component

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

## Personal API Keys

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

## [Shadcn Installation](https://ui.propelauth.com/api-key-components/personal-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/personal-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.

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

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

## Arguments

- 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 PersonalApiKey[] Description

An array of API Keys belonging to the logged in user.

- `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 user.
- 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 `personalApiKeysDisabled` Description API keys are not enabled in your PropelAuth project.
- Name `badRequest` Description Incorrect arguments provided.
- Name `unauthorized` Description The user is not logged in.
- Name `unexpectedOrUnhandled` Description An unexpected error occurred.

### Request

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

const response = await fetchPersonalApiKeys({
    page_number: 0,
    page_size: 10,
    api_key_search: '1189c444-8a...',
})
await response.handle({
    success: (data) => {
        console.log(data)
    },
    personalApiKeysDisabled(error) {
        console.error('Personal API keys are disabled', error.user_facing_error)
    },
    badRequest(error) {
        for (const [field, fieldErrorMessage] of Object.entries(error.user_facing_errors)) {
            console.log('Error: "