Implement Password Reset

PWA Kit comes out of the box with the option to use password reset for your shoppers. Include this feature in your Progressive Web App (PWA) Kit site to improve the shopper experience. With password reset, if shoppers forgot 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.

Our demo site shows the default implementation of password reset.

To enable and configure password reset for your PWA Kit 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.

To use password reset, build your site using Composable Storefront and Retail React App version 6.0 or later.

There are three configuration steps.

1. Configure the Callback URL
2. Allowlist the Callback URL
3. Complete the Configuration in Your PWA Kit Project

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.

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, PWA Kit generates a secure link and uses Salesforce Marketing Cloud 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. Use an External Callback URL
• b. Use a Marketing Cloud Integration
• c. Use a Custom POST Endpoint in Your PWA Kit Project

a. Use an External Callback URL

• 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.

or

b. Use a Marketing Cloud Integration

If you have a Marketing Cloud license you can send the token in an email or text (depending on your contract terms). This is the default implementation included in PWA Kit.

Prerequisites

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

Configure Your Integration

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

• Set these environment variables in Managed Runtime.

  • MARKETING_CLOUD_CLIENT_ID to your Marketing Cloud client ID
  • MARKETING_CLOUD_CLIENT_SECRET to your Marketing Cloud client secret
  • MARKETING_CLOUD_SUBDOMAIN to your Marketing Cloud subdomain
  • 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 Marketing Cloud.

  See Environment Variables.

• 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 PWA Kit Project below.

or

c. Use a Custom POST Endpoint in Your PWA Kit Project

• Configure a custom POST endpoint in app/ssr.js to handle token delivery using your chosen option: email or text. See this Marketing Cloud 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.

There are two ways to configure password reset in your PWA Kit project.

• a. Update template-retail-react-app/config/default.js
• b. Use Environment Variables

a. Update template-retail-react-app/config/default.js

In your PWA Kit project, use the callback URL that you set up as part of the prerequisites to update template-retail-react-app/config/default.js as follows.

or

b. Use Environment Variables

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

RESET_PASSWORD_CALLBACK_URI

See Environment Variables.

• 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 to access logs from Managed Runtime (MRT) and your B2C Commerce instance.

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.

• Password Reset