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.

Organization API Keys

Shadcn Installation

Install this component from our shadcn registry.

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

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

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

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

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

{}

updateApiKey

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

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

{}