Implement Password Reset for Storefront Next

Storefront Next provides the option to use password reset for shoppers. With password reset, if shoppers forget their password, they can use a verification code or a link in an email or text to regain access to their account by creating a new password. Include this feature in your Storefront Next site for a better shopper experience.

Our [demo site](https://sfcc-odyssey-production.mobify-storefront.com/ shows the default implementation of password reset. Test the password reset flow on the demo site by clicking Sign In, and then Forgot your password?.

To enable and configure password reset for your Storefront Next site, follow the steps in this guide. Throughout this guide we use an example storefront with the URL: https://www.example.com. Replace example.com with your domain name.

Password reset isn’t supported in hybrid storefronts. Shoppers must log into your site with their username and password at least once before they can use password reset.
  • To use password reset, build your site by using Storefront Next and the Storefront Next template version 1.0.0 or later.

To configure password reset in your Storefront Next project, update config.server.ts and set the configuration options.

These configuration options are available for password reset.

  • mode: The password reset mode determines the method used to deliver the password reset link to the shopper. Valid values include 'email' and 'callback'.
  • callbackURI: Only required in callback mode. The callback URI that the Shopper Login and API Access Service (SLAS) makes an HTTP POST request to when mode is set to 'callback'. The POST request includes the shoppers contact information and a time-based one-time password (TOTP) that can be used to authenticate the shopper. This can be an absolute URL, including third-party URIs, or a relative path set up by the developer. See more details in Password Reset with Callback URI.
  • landingPath: The landing path is the path the shopper is redirected to change their password.

This example shows a configuration for password reset with email mode.

module.exports = { app: { login: { // Configure reset password with email mode. resetPassword: { mode: ‘email’, landingPath: ‘/reset-password-landing’, },

These configuration modes are available for password reset.

With email mode, you use the SLAS native email service for sending a link to shoppers that they use to reset their password.

To configure email mode:

  1. Configure SLAS
  2. Complete the Email Mode Configuration in Your Storefront Next Project

If you haven’t already done so, complete the prerequisites. After setting up the prerequisites, configure password reset with email mode in config.server.ts as shown in this example.

With callback mode, you specify a callback URI to use an external email or SMS service provider for sending the verification code or link to the shopper.

To set up callback mode:

  1. Configure the Callback URL
  2. Allowlist the Callback URL
  3. Complete the Callback Mode Configuration in Your Storefront Next Project

Unlike the Redirect URL field, the Callback URL field doesn’t support wildcards. Always include the full URL for a callback, including the protocol.

Provide a callback URL to SLAS. That way, SLAS can send that URL all the information your site needs to create a token (verification code or a link in an email or text) for a shopper. For more background information, see Password Reset with Callback URI.

SLAS makes an HTTP POST request to the callback URL to forward the shopper’s credentials to a destination of your choosing, typically an email or marketing service provider. By default, Storefront Next generates a secure link and uses Salesforce Agentforce Marketing to forward the link in an email. To customize this functionality, describe the mechanism that you want to use to ensure that shoppers get the eight-digit token generated by SLAS.

These are three possible options for describing the mechanism to provide a callback URL to SLAS. They’re described in detail below.

  • a. Option 1: Use an External Callback URL
  • b. Option 2: Use an Agentforce Marketing Integration
  • c. Option 3: Use a Custom POST Endpoint in Your Storefront Next Project

  • Provide any publicly accessible external callback URL that can process the token delivery using the shopper’s email.

    Examples of this callback URL are a B2C Commerce instance, a Managed Runtime environment, or your own server.

  • Configure a SLAS Client. In the Callback URL field, enter your publicly accessible callback URL.

If you have an Agentforce Marketing license you can send the token in an email or text (depending on your contract terms). This is the default implementation included in Storefront Next.

Prerequisites

For all prerequisites and steps that apply to using a Agentforce Marketing integration, see Create a Transactional Send Journey.

Configure Your Integration

To get the Agentforce Marketing configuration values below, see Create an OAuth 2.0 API Integration.

  • Set these environment variables in Managed Runtime.
    • PUBLIC__app__features__MARKETING_CLOUD_CLIENT_ID to your Agentforce Marketing client ID
    • PUBLIC__app__features__MARKETING_CLOUD_CLIENT_SECRET to your Agentforce Marketing client secret
    • PUBLIC__app__features__MARKETING_CLOUD_SUBDOMAIN to your Agentforce Marketing subdomain
    • PUBLIC__app__features__MARKETING_CLOUD_RESET_PASSWORD_TEMPLATE to the unique Event Definition Key for the Transactional API Event attached to the email template that you stored in Agentforce Marketing.
  • Configure the full callback URL in your SLAS Client. For example, https://example.com/reset-password-callback. See Configure a SLAS Client.

If you want to customize the callback path from /reset-password-callback, also update it in ssr.js where the POST endpoint is set up. See option c. Use a Custom POST Endpoint in Your Storefront Next Project below.

  • Configure a custom POST endpoint in app/ssr.js to handle token delivery using your chosen option: email or text. See this Agentforce Marketing implementation in app/ssr.js as an example.
  • Configure a SLAS Client. In the Callback URL field, enter the callback URL that you set up in your custom POST endpoint.

For any of the three callback URL options, ensure that the callback URL that you configured is allowlisted in the Callback URL field of the SLAS client that you’re using. To do so:

  • Access SLAS Admin UI: Log in to your Salesforce B2C Commerce instance and go to the SLAS Admin section.
  • Create or edit a client: Select your SLAS client where you want to manage callback URLs.
  • Add allowed URLs: In the client configuration, provide a list of the valid callback URLs for your site.

a. Update config/default.js

In your Storefront Next project, use the callback URL that you set up as part of the prerequisites to update config.server.ts as follows.

This example shows how to enable passwordless login with a relative callback URL.

b. (Optional) Use an Environment Variable to Set the Callback URL

The value of the environment variable for password reset overrides any value that you added in config.server.ts.

Use this environment variable to set the callback URL for password reset.

PUBLIC__app__features__RESET_PASSWORD_CALLBACK_URI

  • Implement rate limiting to prevent abuse of password reset. For example, if you’re using embedded CDN (eCDN), you can apply eCDN Rate Limiting Rules.
  • Use robust security measures to protect shopper accounts. For example, if you’re using a third-party content delivery network (CDN) such as Cloudfare, you can Block requests by Threat Score.
  • Track shopper usage of authentication options and diagnose issues efficiently. For example, use Log Center.

This section provides a suggested solution for a common error that you can encounter related to password reset.

Potential Cause: The email delivery service takes longer than expected or the shopper didn’t receive the email.

Suggested Solution: Include a resend option or allow shoppers to enter a backup contact method. Check for issues with spam filters.