Reset Customer Password in Storefront

In this guide, you'll learn how to implement the flow to reset a customer's password in your storefront.

Reset Password Flow in Storefront#

Customers need to reset their password if they forget it. To implement the flow to reset a customer's password, you need two pages in your storefront:

Request Reset Password Page: A page to request the password reset.
- When the customer requests to reset their password, they would receive an email (or other notification) with a URL to the Reset Password Page.
Reset Password Page: A page that prompts the customer to enter a new password.

To send the customer an email (or other notification) with the URL to reset their password, you must implement the subscriber that handles the notification.↗

1. Request Reset Password Page#

The request password reset page prompts the customer to enter their email. Then, it sends a request to the Request Reset Password Token API route to request resetting the password.

This API route will then handle sending an email or another type of notification, if you handle it as explained in the Reset Password Guide.

For example, you can implement the following functionality in your storefront to request resetting the password:

Tip: Learn how to install and configure the JS SDK in the JS SDK documentation.

In this example, you send a request to the Request Reset Password Token API route when the form that has the email field is submitted.

In the request body, you pass an identifier parameter, which is the customer's email.

Tip: The Request Reset Password Token API route returns a successful response always, even if the customer's email doesn't exist. This ensures that customer emails that don't exist are not exposed.

2. Reset Password Page#

Once the customer requests to reset their password, you should handle sending them a notification, such as an email, as explained in the Reset Password Guide.

The notification should include a URL in your storefront that allows the customer to update their password. In this step, you'll implement this page.

The reset password page should receive a token and email query parameters. Then, it prompts the customer for a new password, and sends a request to the Reset Password API route to update the password.

Note: If you followed this guide to set up a subscriber that sends the customer an email, make sure to use the URL of this page in the notification's data payload.

For example:

In this example, you receive the token and email from the page's query parameters.

Then, when the form that has the password field is submitted, you send a request to the Reset Password API route, passing it the token, email, and new password.

Notice that the JS SDK passes the token in the Authorization Bearer header. So, if you're implementing this flow without using the JS SDK, make sure to pass the token accordingly.

Note: Before Medusa v2.6, you passed the token as a query parameter. Now, you must pass it in the Authorization Bearer header.

Was this page helpful?