Implement Passwordless Login

PWA Kit provides the option to use passwordless login for your shoppers. 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. Include this feature in your Progressive Web App (PWA) Kit site for a better shopper experience.

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.

Passwordless login isn't supported in hybrid storefronts.

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.

Shoppers must log into your site with their username and password at least once before they can use passwordless login.

To configure passwordless login in your PWA Kit project, update config/default.js and set the configuration options.

These configuration options are available for passwordless login.

  • enabled: Enables or disables passwordless login for the site. Defaults to false.
  • mode: The passwordless login mode that determines the method used to deliver the verification code or login link to the shopper. Valid values include 'email' and 'callback'.
  • callbackURI: Only required in callback mode. The callback URI that 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. More details in Passwordless Login with One-Time Passwords using Callback URI.
  • landingPath: The landing path is the path of the magic link. A magic link is a single-use URL that contains the TOTP and that shoppers click to log into the storefront.
  • tokenLength: The length of the token for passwordless login. Set the token length by using the environment variable OTP_TOKEN_LENGTH. Valid values include 6 or 8. Defaults to 8. Make sure that the token length matches with the token length set for the SLAS Client.

This example shows a configuration for passwordless login with email mode.

This example shows a configuration for passwordless login with a callback URL.

These configuration modes are available for passwordless login.

With email mode, you use the SLAS native email service for sending a verification code or magic link to shoppers.

To configure email mode:

  1. Configure SLAS
  2. Complete the Email Mode Configuration in Your PWA Kit Project

If you haven’t already done so, complete the prerequisites. After setting up the prerequisites, configure passwordless login with email mode in /config/default.js 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 Call Mode Configuration in Your PWA Kit 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 login token—a verification code or a link in an email or text—for a shopper. For more background information, see Passwordless Login with One-Time Passwords using 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, 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 the possible options for describing the mechanism to provide a callback URL to SLAS. They're described in detail next.

  • a. Option 1: Use an External Callback URL
  • b. Option 2: Use a Marketing Cloud Integration
  • c. Option 3: Use a Custom POST Endpoint in Your PWA Kit 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 Private Client. In the Callback URL field, enter your publicly accessible callback URL.

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.

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.

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

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

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

To configure passwordless login in your PWA Kit project, update 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 config/default.js 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 passwordless login overrides any values that you added in /config/default.js.

Optionally, you can set the callback URL using an environment variable instead of config/default.js. Use 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.