# Update User Password Component

PropelAuth's Update Password component allows you to customize the update user password flow in your app. For more information on PropelAuth's functionality around passwords, check out [our docs here](https://docs.propelauth.com/overview/authentication/login-methods#passwords).

## Update Password

**Current Password**  
**New Password**  
**Update Password**

---

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

---

# Reference APIs

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

## [updatePassword](https://ui.propelauth.com/account-page-components/update-user-password#update-password)

Updates the logged in user's password.

## Arguments

- Name `password`  
  Type string  
  Description The user's new password.  
- Name `current_password`  
  Type string  
  Description An optional argument to check if the user can provide the correct current password. Required if the user already has a password set.

## 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 `incorrectPassword`  
  Description User was not able to provide the correct current password.  
- Name `userAccountLocked`  
  Description The user's account is locked.  
- 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 { updatePassword } = useAuthFrontendApis()

const response = await updatePassword({
    current_password: 'currentPassword',
    password: 'newPassword',
})
response.handle({
    success: () => {
        console.log('Password updated')
    },
    incorrectPassword(error) {
        console.log('Incorrect password', error.user_facing_error)
    },
    userAccountLocked(error) {
        setGlobalError('User Account is locked', 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.user_facing_error)
    },
})
```

### Successful Response

```json
{}
```