Create Personal API Key Component

PropelAuth's Create Org API Key Component allows 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

Display Name (optional)

Expires

• Never
• Two Weeks
• One Month

Create 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

• expirationOption

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

• displayName

  • Type: string
  • Description: The display name of the API key

Success Response

• api_key_id

  • Type: string
  • Description: The ID of the API Key.

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

• success

  • Description: Successful request.

• invalidExpirationOption

  • Description: Incorrect argument provided for 'expirationOption'

• noPersonalApiKeyPermission

  • Description: User does not have permission to create a personal API key.

• unauthorized

  • Description: The user is not logged in.

• badRequest

  • Description: Incorrect arguments provided.

• unexpectedOrUnhandled

  • Description: An unexpected error occurred.

Request

const { createPersonalApiKey } = useAuthFrontendApis()

const response = await createPersonalApiKey('Never', 'My API Key')
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)
    },
    badRequest(error) {
        console.error(error.user_facing_errors.display_name)
    },
})

Successful Response

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