--- schema_version: "1" id: 06d188a46ac4f29748095538fea510ed934fd953e9dd0480ca5e2cef614ddc9f title: Implement Passwordless Login collection: developer version: current locale: en-us portal_url: https://docs.salesforce.com/developer/current/en-us/commerce-cloud/pwa-kit-managed-runtime/guides/passwordless-login.md canonical_url: https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/passwordless-login.html source_site: developer.salesforce.com content_type: documentation content_hash: 8429fa6abd24d57df656250fc4f1365d63b55cfec5f1484a08ba4715288227f0 products: - Composable Storefront - Salesforce APIs --- # 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](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/pwa-developer-workflow.html) site for a better shopper experience. Our [demo site](https://pwa-kit.mobify-storefront.com/) 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. **note:** Passwordless login isn't supported in [hybrid storefronts](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/hybrid-implementation.html). ## Prerequisites To use passwordless login: - Build your site using Composable Storefront and [Retail React App](https://github.com/SalesforceCommerceCloud/pwa-kit/blob/develop/packages/template-retail-react-app/README.md) 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](#configure-passwordless-login). **note:** Shoppers must log into your site with their username and password at least once before they can use passwordless login. ## Configure 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](https://developer.salesforce.com/docs/commerce/commerce-api/guide/slas-passwordless-login.html). - `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](https://developer.salesforce.com/docs/commerce/commerce-api/guide/slas-passwordless-login-email.html#1-configure-a-slas-private-client). This example shows a configuration for passwordless login with email mode. ``` module.exports = { app: { login: { tokenLength: validateOtpTokenLength(process.env.OTP_TOKEN_LENGTH), // Enable passwordless login with email mode. passwordless: { enabled: true, mode: 'email', landingPath: '/passwordless-login-landing', }, // More code here... ``` This example shows a configuration for passwordless login with a callback URL. ``` module.exports = { app: { login: { tokenLength: validateOtpTokenLength(process.env.OTP_TOKEN_LENGTH), // Enable passwordless login with an absolute callback URL. passwordless: { enabled: true, mode: 'callback', callbackURI: 'https://example.com/passwordless-login-callback' landingPath: '/passwordless-login-landing', } // More code here... ``` These configuration modes are available for passwordless login. - [Configure Email Mode](#configure-email-mode) - [Configure Callback Mode](#configure-callback-mode) ## Configure Email Mode 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](https://developer.salesforce.com/docs/commerce/commerce-api/guide/slas-passwordless-login-email.html) 2. [Complete the Email Mode Configuration in Your PWA Kit Project](#complete-the-email-mode-configuration-in-your-pwa-kit-project) ## Complete the Email Mode Configuration in Your PWA Kit Project If you haven’t already done so, complete the [prerequisites](#prerequisites). After setting up the prerequisites, configure passwordless login with email mode in `/config/default.js` as shown in this example. ``` module.exports = { app: { login: { // Enable passwordless login with email mode passwordless: { enabled: true, mode: 'email', landingPath: '/passwordless-login-landing', } // More code here... ``` ## Configure Callback Mode 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](#1-configure-the-callback-url) 2. [Allowlist the Callback URL](#2-allowlist-the-callback-url) 3. [Complete the Call Mode Configuration in Your PWA Kit Project](#3-complete-the-callback-mode-configuration-in-your-pwa-kit-project) **note:** Unlike the Redirect URL field, the Callback URL field doesn’t support wildcards. Always include the full URL for a callback, including the protocol. ### 1. Configure the Callback URL 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](https://developer.salesforce.com/docs/commerce/commerce-api/guide/slas-passwordless-login.html) 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 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 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 - 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](https://developer.salesforce.com/docs/commerce/commerce-api/guide/slas-passwordless-login.html?q=passwordless#configure-a-slas-private-client). In the Callback URL field, enter your publicly accessible callback URL. #### b. Option 2: Use a Agentforce Marketing Integration If you have a 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 PWA Kit. **Prerequisites** For all prerequisites and steps that apply to using a Agentforce Marketing integration, see these guides. - [Passwordless Login with SMS](https://developer.salesforce.com/docs/commerce/commerce-api/guide/slas-passwordless-sms.html) - [Create a Transactional Send Journey](https://help.salesforce.com/s/articleView?id=mktg.mc_jb_create_transactional_journey.htm&type=5) **Configure Your Integration** To get the Agentforce Marketing configuration values below, see [Create an OAuth 2.0 API Integration](https://developer.salesforce.com/docs/marketing/marketing-cloud/guide/create-integration-enhanced.html). - Set these environment variables in Managed Runtime. - `MARKETING_CLOUD_CLIENT_ID` to your Agentforce Marketing client ID - `MARKETING_CLOUD_CLIENT_SECRET` to your Agentforce Marketing client secret - `MARKETING_CLOUD_SUBDOMAIN` to your Agentforce Marketing subdomain - `MARKETING_CLOUD_PASSWORDLESS_LOGIN_TEMPLATE` to the unique Event Definition Key for the [Transactional API Event](https://help.salesforce.com/s/articleView?id=mktg.mc_jb_create_transactional_journey.htm&type=5) attached to the email template that you stored in Agentforce Marketing. See [Environment Variables](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/environment-variables.html). - Configure the full callback URL in your SLAS Client. For example, `https://example.com/passwordless-login-callback`. See [Configure a SLAS Private Client](https://developer.salesforce.com/docs/commerce/commerce-api/guide/slas-passwordless-login.html?q=passwordless#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. #### c. Option 3: 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 Agentforce Marketing implementation in `app/ssr.js` as an example. ```jsx // Define a POST route for the '/passwordless-login-callback' endpoint. app.post('/passwordless-login-callback', (req, res) => { const slasCallbackToken = req.headers['x-slas-callback-token'] validateSlasCallbackToken(slasCallbackToken).then(() => { sendMagicLinkEmail( req, res, PASSWORDLESS_LOGIN_LANDING_PATH, process.env.MARKETING_CLOUD_PASSWORDLESS_LOGIN_TEMPLATE ) }) } ``` - [Configure a SLAS Private Client](https://developer.salesforce.com/docs/commerce/commerce-api/guide/slas-passwordless-login.html?q=passwordless#configure-a-slas-private-client). In the Callback URL field, enter the callback URL that you set up in your custom POST endpoint. ### 2. Allowlist the Callback URL 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. ### 3. Complete the Callback Mode Configuration in Your PWA Kit Project **a. Update `config/default.js`** If you haven’t already done so, complete the [Prerequisites](https://developer.salesforce.com/docs/commerce/commerce-api/guide/slas-passwordless-login.html?q=passwordless#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. ```jsx module.exports = { app: { login: { // Enable passwordless login with an absolute callback URL. passwordless: { enabled: true, mode: 'callback', callbackURI: 'https://example.com/passwordless-login-callback' } // More code here... ``` This example shows how to enable passwordless login with a relative callback URL. ```jsx module.exports = { app: { login: { // Enable passwordless login with a relative callback URL. // This example callback URL uses the default Agentforce Marketing implementation. // You can customize the behavior of this callback URL endpoint in ssr.js. passwordless: { enabled: true, mode: 'callback', callbackURI: '/passwordless-login-callback' // More code here... ``` **b. Optional: Use an Environment Variable to Set the Callback URL** **note:** 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](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/environment-variables.md). ## Best Practices for Passwordless Login - 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](https://developer.salesforce.com/docs/commerce/commerce-api/guide/cdn-rate-limiting-rules.html). - 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](https://developers.cloudflare.com/waf/custom-rules/use-cases/block-ip-reputation/). - Track shopper usage of authentication options and diagnose issues efficiently. For example, use [Log Center](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/debugging.html#debug-using-log-center) to access logs from Managed Runtime (MRT) and your B2C Commerce instance. ## Troubleshoot Passwordless Login This section provides a suggested solution for a common error that you can encounter related to passwordless login. ### Unexpected Results with 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](https://developer.salesforce.com/docs/commerce/commerce-api/guide/slas-passwordless-login.html?q=passwordless#configure-a-slas-private-client). ## See Also - [Passwordless Login with SLAS](https://developer.salesforce.com/docs/commerce/commerce-api/guide/slas-passwordless-login.html) - [Passwordless Login with SMS](https://developer.salesforce.com/docs/commerce/commerce-api/guide/slas-passwordless-sms.html)