# Update User Property Component

PropelAuth's Update Property component allows you to customize the update user property flow in your app. For more information on PropelAuth's user properties, check out [our docs here](https://docs.propelauth.com/overview/user-management/user-properties).

## Update User Properties

First Name  
Last Name  
Username  
Favorite Sport  
Save Properties

## [Shadcn Installation](https://ui.propelauth.com/account-page-components/update-user-property#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/update-user-property.json
```

# Reference APIs

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

## [updateUserMetadata](https://ui.propelauth.com/account-page-components/update-user-property#update-user-metadata)

Updates user property fields such as **username**, **first_name**, **last_name**, and any [custom user properties](https://docs.propelauth.com/overview/user-management/user-properties#custom-user-properties).

## Arguments

- Name `username`  Type string  Description The user's new username.
- Name `first_name`  Type string  Description The user's new first name.
- Name `last_name`  Type string  Description The user's new last name.
- Name `properties`  Type {[key: string]: unknown}  Description An object containing any [custom user properties](https://docs.propelauth.com/overview/user-management/user-properties#custom-user-properties).

## 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 `badRequest`  Description Incorrect arguments given.
- Name `unauthorized`  Description The user is not logged in.
- Name `unexpectedOrUnhandled`  Description An unexpected error occurred.

### Request

```javascript
const { updateUserMetadata } = useAuthFrontendApis()

const response = await updateUserMetadata({
    username: 'airbud3',
    first_name: 'Buddy',
    last_name: 'Framm',
    properties: {
        favorite_sport: 'basketball',
    },
})
await response.handle({
    success: () => {
        console.log('Updated user properties successfully.')
    },
    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.user_facing_error)
    },
})
```

### Successful Response

```javascript
{}
```