Request Password Reset Component

PropelAuth's Request Password Reset component allows you to customize the component to start password reset flows in your application. This component will send a reset password email to the provided email address. It is designed to be used when your user has a Login State of LOGIN_REQUIRED and does not remember their password.

If you're looking for a component that will allow a logged in user the ability to update their password, or one with a Login State of UPDATE_PASSWORD_REQUIRED, check out our Update User Password component.

We highly recommend reviewing the Login and Signup Guide if using any of our login or signup components.

Request Password Reset

Shadcn Installation

Install this component from our shadcn registry.

npx shadcn@latest add https://components.propelauth.com/r/request-password-reset.json

Reference APIs

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

sendForgotPasswordEmail

Sends the user an email to reset their password if an account with that email exists.

Arguments

Name
email *
Type
string
Description
The email of the user

Success Response

Name
message
Type
string
Description
A confirmation message, such as 'If that email address is in our database, we will send you an email to reset your password.'
Name
sniper_links
Type
dictionary
Description
A dictionary of sniper links you can provide to the user for gmail, outlook, and yahoo.

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 provided.
Name
unexpectedOrUnhandled
Description
An unexpected error occurred.

Request

const { sendForgotPasswordEmail } = useAuthFrontendApis()

const response = await sendForgotPasswordEmail({
    email: "test@example.com"
})
response.handle({
    success(data) {
        console.log(data)
    },
    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

{
    "message": "If that email address is in our database, we will send you an email to reset your password.",
    "sniper_links": {
        "gmail": "https://mail.google.com/mail/u/0/#search/propelauth",
        "outlook": "https://outlook.live.com/mail/0/inbox",
        "yahoo": "https://mail.yahoo.com/d/folders/1"
    }
}