Personal API Key Table Component

PropelAuth's Personal API Key Table Component allow 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.

Personal API Keys

Key ID	Created	Expires	Delete Key
80d51e93a891...	3/26/2026, 3:38:59 PM	Never
c575c0751162...	3/26/2026, 3:38:59 PM	Never

Shadcn Installation

Install this component from our shadcn registry.

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

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.

Success Response

Name
api_keys
Type
PersonalApiKey[]
Description
An array of API Keys belonging to the logged in user.
- 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 of 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

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: "' + fieldErrorMessage + '" for field: "' + field + '"')
        }
    },
    unexpectedOrUnhandled(error) {
        console.error('Unexpected or unhandled error', error.user_facing_error)
    },
})

Successful Response

{
    "api_keys": [
        {
            "api_key_id": "26bafab...",
            "created_at": 1736553453,
            "expires_at_seconds": 1737763053,
            "metadata": null
        },
        {
            "api_key_id": "df71d4e1...",
            "created_at": 1736553453,
            "expires_at_seconds": 1737763053,
            "metadata": {
                "test": "example"
            }
        }
    ],
    "total_api_keys": 2,
    "current_page": 0,
    "page_size": 10,
    "has_more_results": false
}

deleteApiKey

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

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

{}