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.

Update Password

Current Password
New Password
Update Password

Shadcn Installation

Install this component from our shadcn registry.

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

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

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

{}