Passwordless Login for Storefront Next | Storefront Next | B2C Commerce Storefront Reference Architecture

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

1passwordlessLogin: {
2    enabled: false,
3    mode: 'email',
4    callbackUri: '/passwordless-login-callback',
5    landingUri: '/login',
6}

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.

1auth: {
2    otpLength: 8,
3}

You can override configuration options by using MRT environment variables with the PUBLIC__ prefix.

1PUBLIC__app__features__passwordlessLogin__enabled=true
2PUBLIC__app__features__passwordlessLogin__mode=callback
3PUBLIC__app__features__passwordlessLogin__callbackUri=https://www.example.com/passwordless-login-callback
4PUBLIC__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.

To use this method, configure SLAS for passwordless login with email. See Passwordless Login with Email in the B2C Commerce API Developer Guide.
Then, in config.server.ts, enable passwordless login.

1passwordlessLogin: {
2        enabled: true,
3        mode: 'email',
4        landingUri: '/login',
5    }

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:

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.

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.

Set the full external URL directly in config.server.ts or by using an MRT environment variable.

1PUBLIC__app__features__passwordlessLogin__callbackUri =
2  "https://external-service.example.com/passwordless-callback";

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.