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.

Update User Properties

First Name
Last Name
Username
Favorite Sport
Save Properties

Shadcn Installation

Install this component from our shadcn registry.

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

Updates user property fields such as username, first_name, last_name, and any 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.

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

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

{}