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.

Personal API Keys

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.
• 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

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: "