# 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](https://docs.propelauth.com/overview/authentication/api-keys).

## Create Personal API Key

Display Name (optional)

Expires

- Never
- Two Weeks
- One Month

Create API Key

---

## [Shadcn Installation](https://ui.propelauth.com/api-key-components/create-personal-api-key#shadcn-installation)

Install this component from our [shadcn registry](https://ui.propelauth.com/getting-started/component-registry).

```bash
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](https://ui.propelauth.com/api-key-components/create-personal-api-key#create-personal-api-key)

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

```javascript
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

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