--- schema_version: "1" id: ab03308d9a0a60c75cdbfc65d73c3515ef07d59080c12647868c011d50a2dbcb title: Passwordless Login for Storefront Next collection: developer version: current locale: en-us portal_url: https://docs.salesforce.com/developer/current/en-us/commerce-cloud/sfnext/guides/sfnext-passwordless-login.md canonical_url: https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/sfnext-passwordless-login.html source_site: developer.salesforce.com content_type: documentation content_hash: 9f852fc1ebe5d01d8ff157c58dbd227542f79cb6a24f9f517bd3b33fb2b0b0d7 products: - Composable Storefront - Salesforce APIs --- # Passwordless Login for Storefront Next Storefront Next supports passwordless login by using the Shopper Login and API Access Service (SLAS). Shoppers can securely log in by using a one-time passcode (OTP) or a magic link delivered by email or SMS. If enabled, passwordless login is the default login mode. Hybrid storefronts don’t support passwordless login. ## Prerequisites - Configure a SLAS private client with passwordless login enabled. For instructions, 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) in the _B2C Commerce API Developer Guide_. - In `config.server.ts`, set `commerce.api.privateKeyEnabled` to true. If false, passwordless login is disabled at run time, regardless of the `features.passwordlessLogin.enabled` flag. - Shoppers must log in to your site with their username and password at least once before they can use passwordless login. ## Configure Settings To control passwordless login settings, update `features.passwordlessLogin` in `config.server.ts`. ```typescript passwordlessLogin: { enabled: false, mode: 'email', callbackUri: '/passwordless-login-callback', landingUri: '/login', } ``` - `enabled`: Specifies whether passwordless login is enabled (`true`) or not. - `mode`: The mode used to deliver the OTP or magic link to the shopper (`email`, `callback`, or `sms`). - `callbackUri`: The relative or absolute URI that SLAS posts shopper credentials to. Required when `mode` is set to `callback`. - `landingUri`: An additional path to `/login` that’s embedded in the magic link that shoppers click to authenticate. The OTP code length is a shared auth setting. Valid values are 6 or 8. The value must match the OTP length configured in your SLAS client. ```typescript auth: { otpLength: 8, } ``` You can override configuration options by using MRT environment variables with the `PUBLIC__` prefix. ```bash PUBLIC__app__features__passwordlessLogin__enabled=true PUBLIC__app__features__passwordlessLogin__mode=callback PUBLIC__app__features__passwordlessLogin__callbackUri=https://www.example.com/passwordless-login-callback PUBLIC__app__auth__otpLength=8 ``` ### Configuration Options This table lists the environment variables that override the passwordless login defaults in `config.server.ts`. Each variable is optional—omit it to keep the default. | Variable | Default | Purpose | | ------------------------------------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------- | | `PUBLIC__app__features__passwordlessLogin__enabled` | `false` | Turns passwordless login on or off. | | `PUBLIC__app__features__passwordlessLogin__mode` | `email` | Delivery mode: `email`, `callback`, or `sms`. | | `PUBLIC__app__features__passwordlessLogin__callbackUri` | `/passwordless-login-callback` | Path or absolute URL that SLAS posts shopper credentials to. Required when `mode` is `callback`. | | `PUBLIC__app__features__passwordlessLogin__landingUri` | `/login` | Path embedded in the magic link that shoppers click to authenticate. | | `PUBLIC__app__features__otpRequest__mode` | `email` | Delivery mode for OTP codes during email verification: `email` or `callback`. | | `PUBLIC__app__features__otpRequest__callbackUri` | — | Absolute URL of the external service that delivers the OTP. Required when `otpRequest.mode` is `callback`. | | `PUBLIC__app__features__resetPassword__mode` | `email` | Delivery mode for reset password: `email` or `callback`. | | `PUBLIC__app__features__resetPassword__callbackUri` | `/reset-password-callback` | Path or absolute URL for the reset password callback. Required when `resetPassword.mode` is `callback`. | | `PUBLIC__app__features__resetPassword__landingUri` | `/reset-password` | Path where shoppers create a new password after requesting a reset. | | `PUBLIC__app__auth__otpLength` | `6` | OTP code length. Valid values are `6` or `8`. Must match the SLAS client. | ## Delivery Modes ### Email Mode (SLAS Native Email Service) When `mode` is set to `email`, SLAS sends the OTP or magic link email without third-party integration. This passwordless login method doesn’t require a callback URI. 1. To use this method, configure SLAS for passwordless login with email. See [Passwordless Login with Email](https://developer.salesforce.com/docs/commerce/commerce-api/guide/slas-passwordless-login-email.html) in the _B2C Commerce API Developer Guide_. 2. Then, in `config.server.ts`, enable passwordless login. ```typescript passwordlessLogin: { enabled: true, mode: 'email', landingUri: '/login', } ``` 3. Set `commerce.api.privateKeyEnabled` to `true` ### Callback Mode (Custom Delivery) When `mode` is set to `callback`, SLAS makes an HTTP POST to your callback URI. The POST request includes the shopper's email and a token. Your server must then send the token to the shopper by using email, SMS, or any other channel. You can use this mode with an external callback URL or a custom POST endpoint in your storefront. After setting `callbackUri` in `config.server.ts`, you must also allowlist the full callback URL in the SLAS client configuration: 1. Access SLAS Admin UI: Log in to your Salesforce B2C Commerce instance and go to the SLAS Admin section. 2. Create or edit a client: Select your SLAS client where you want to manage callback URLs. 3. Add allowed URLs: In the client configuration, provide a list of the valid callback URLs for your site. #### Option 1 — External Callback URL Set `callbackUri` to any publicly accessible external endpoint that can process the token and deliver it to the shopper. Examples include a B2C Commerce instance, a Managed Runtime environment, or your own server. 1. Set the full external URL directly in `config.server.ts` or by using an MRT environment variable. ```typescript PUBLIC__app__features__passwordlessLogin__callbackUri = "https://external-service.example.com/passwordless-callback"; ``` 2. Register the same URL in the SLAS Admin UI Callback URL field. #### Option 2 — Custom POST Endpoint in Your Storefront Storefront Next includes a callback handler at the path configured in `callbackUri` (default: /passwordless-login-callback). Replace the logic inside `handlePasswordlessCallback` in `src/lib/passwordless-login.ts`. The function receives the validated `email_id` and token from SLAS. Build and send your own message with a service provider. ## Best Practices for Passwordless Login - Implement rate limiting to prevent abuse of the passwordless login feature. For example, if you use embedded CDN (eCDN), you can apply eCDN Rate Limiting Rules. - Use security measures to protect shopper accounts. For example, if you use 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.