Implement Passwordless Login

PWA Kit comes out of the box with the option to use passwordless login for your shoppers. Include this feature in your Progressive Web App (PWA) Kit site to improve the shopper experience. With passwordless login, shoppers can securely log into your site using a verification code or a link in an email or text instead of a password.

Our demo site shows the default implementation of passwordless login.

To enable and configure passwordless login 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 passwordless login:

• Build your site using Composable Storefront and Retail React App version 6.0 or later.
• Configure a Shopper Login and API Access (SLAS) private client. For the specifics involved in configuring a SLAS private client for passwordless login, see Configure Passwordless Login.

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 login token (verification code or a link in an email or text) for a shopper. For more background information, see Passwordless Login with SLAS and Passwordless Login with SMS.

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 passwordless 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 Private 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 these guides.

• Passwordless Login with SMS
• 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_PASSWORDLESS_LOGIN_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/passwordless-login-callback. See Configure a SLAS Private Client.

If you want to customize the callback path from /passwordless-login-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 Private 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 template-retail-react-app/config/default.js

If you haven’t already done so, complete the Prerequisites.

To configure passwordless login in your PWA Kit project, update template-retail-react-app/config/default.js as shown in this example.

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.

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

Optionally, you can set the callback URL using an environment variable instead of template-retail-react-app/config/default.js. Use template-retail-react-app/config/default.js to enable passwordless login. Configure this environment variable to set the callback URL.

PASSWORDLESS_LOGIN_CALLBACK_URI

See Environment Variables.

• Implement rate limiting to prevent abuse of the passwordless login feature. 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 passwordless login.

Potential Cause: The scope or callback URL is incorrect.

Suggested Solution: Ensure that the scope and callback URL are properly configured. See Configure a SLAS Private Client.

• Passwordless Login with SLAS
• Passwordless Login with SMS