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

Email

Send Password Reset Email

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"
    }
}