Create Personal API Key Component

PropelAuth's Create Org API Key Component allow you to customize the UI around creating a users' API Keys. For more information on API Keys, check out our docs here.

Create Personal API Key

Shadcn Installation

Install this component from our shadcn registry.

npx shadcn@latest add https://components.propelauth.com/r/create-personal-api-key.json

Reference APIs

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

createPersonalApiKey

Creates a Personal API key for the logged in user.

Arguments

Name
expirationOption *
Type
string
Description
Can be one of the following: 'TwoWeeks' | 'OneMonth' | 'ThreeMonths' | 'SixMonths' | 'OneYear' | 'Never'

Success Response

Name
api_key_id
Type
string
Description
The ID of the API Key.
Name
api_key_token
Type
string
Description
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
invalidExpirationOption
Description
Incorrect argument provided for 'expirationOption'
Name
noPersonalApiKeyPermission
Description
User does not have permission to create a personal API key.
Name
unauthorized
Description
The user is not logged in.
Name
unexpectedOrUnhandled
Description
An unexpected error occurred.

Request

const { createPersonalApiKey } = useAuthFrontendApis()

const response = await createPersonalApiKey('Never')
await response.handle({
    success: async () => {
        console.log('success')
    },
    invalidExpirationOption(error) {
        console.error('Invalid expiration option', error.user_facing_error)
    },
    noPersonalApiKeyPermission(error) {
        console.error('Forbidden', error.user_facing_error)
    },
    unexpectedOrUnhandled(error) {
        console.error('Unexpected or unhandled error', error.user_facing_error)
    },
})

Successful Response

{
    "api_key_id": "justAnId",
    "api_key_token": "dhopw42..."
}