@W-20279798 support setting passwordless login mode in config by hajinsuha1 · Pull Request #3492 · SalesforceCommerceCloud/pwa-kit

hajinsuha1 · 2025-12-03T20:14:06Z

Description

Added a new mode to the passwordless configuration that allows merchants to configure the mode they want to use for all oauth/passwordless/login calls:

packages/template-retail-react-app/app/hooks/use-auth-modal.js
packages/template-retail-react-app/app/pages/login/index.jsx
packages/template-retail-react-app/app/pages/checkout/partials/contact-info.jsx

Now it will set the passwordless login mode to the following

# Email mode
passwordless: {
   enabled: true,
   mode: 'email',
   landingPath: '/passwordless-login-landing'
},

# Callbackmode
passwordless: {
   enabled: true,
   mode: 'callback',
   callbackURI: 'https://webhook.site/e6f88064-36bc-4605-8128-a94810bd4318',
   landingPath: '/passwordless-login-landing'
},

Types of Changes

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Documentation update
Breaking change (could cause existing functionality to not work as expected)
Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

Removing a public function or component or prop

Adding a required argument to a function

Changing the data type of a function parameter or return value

Adding a new peer dependency to package.json

Changes

commerce-sdk-react
- added locale to Auth object
- Update authorizePasswordless to pass locale and simplify mode selection to respect user's explicit mode choice while still defaulting to callback mode for backward compatibility
template-retail-react-app
- Update passwordless login to use email mode by default
- The passwordless login mode can now be configured across the login page, auth modal, and checkout page

How to Test-Drive This PR

Email mode

This tests when default.js is configured to the following:

passwordless: {
   enabled: true,
   mode: 'email',
   landingPath: '/passwordless-login-landing'
},

Configure and start the template-retail-react-app

# Checkout this branch
git checkout W-20279798-support-setting-passwordless-login-mode-in-config

# Revert this commit to setup `template-retail-react-app` with private client and updates the default.js commerceApi configuraton
git revert 66bcafa4d5677e691c1f55fa37987e17b71e66d3

# Build commerce-sdk-react locally by building the entire app
npm ci

# Set the private client secret via env vars and start the `template-retail-react-app`
export PWA_KIT_SLAS_CLIENT_SECRET=SECRET
cd packages/template-retail-react-app
npm start

Once the app has started, login using the Continue Securely button after entering your email to trigger passwordless login
Verify the Check your email screen is shown
Verify an email was sent to you with the OTP
Repeat steps 2-4 for the http://localhost:3000/us/login page (verify the locale that is sent is en-US instead of en-GB)
Repeat steps 2-4 for the login from the checkout page

Callback mode

Update default.js to

            passwordless: {
                enabled: true,
                mode: 'callback',
                callbackURI: 'https://webhook.site/e6f88064-36bc-4605-8128-a94810bd4318',
                landingPath: '/passwordless-login-landing'
            },

Restart the server
```
npm start
```
Once the app has started, login using the Continue Securely button after entering your email to trigger passwordless login
Verify the Check your email screen is shown
Verify SLAS sent a POST request to the webhook callback uri: https://webhook.site/#!/view/e6f88064-36bc-4605-8128-a94810bd4318
Repeat steps 2-4 for the http://localhost:3000/login page
Repeat steps 2-4 for the login from the checkout page

Backwards Compatibilty with `template-retail-react-app`

The current template-retail-react-app does not specify a mode and only specifies a callbackURI. Let's make sure our changes in commerce-sdk-react are backwards compatible!
This ensures when mode is missing but callbackURI is set in default.js, callback mode is used

            passwordless: {
                enabled: true,
                callbackURI: 'https://webhook.site/e6f88064-36bc-4605-8128-a94810bd4318',
                landingPath: '/passwordless-login-landing'
            },

Checkout this test branch that contains the commerce-sdk-react changes and sets up template-retail-react-app with a private client and start the app

git checkout W-20279798-j.ha-test-commerce-sdk-react-email-otp-backward-compatibility

# Build commerce-sdk-react locally by building the entire app
npm ci

# Set the private client secret and a test webhook callback URI via env vars and start the `template-retail-react-app`
export PWA_KIT_SLAS_CLIENT_SECRET=SECRET
export PASSWORDLESS_LOGIN_CALLBACK_URI=https://webhook.site/e6f88064-36bc-4605-8128-a94810bd4318
cd packages/template-retail-react-app
npm start

Once the app has started, login using the Continue Securely button after entering your email to trigger passwordless login
Verify the Check your email screen is shown
Verify SLAS sent a POST request to the webhook callback uri: https://webhook.site/#!/view/e6f88064-36bc-4605-8128-a94810bd4318

Checklists

General

Changes are covered by test cases
CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

There are no changes to UI

or...

Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
Changes comply with WCAG 2.0 guidelines levels A and AA
Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

Changes include a UI text update in the Retail React App (which requires translation)

… support

cc-prodsec · 2025-12-03T20:14:16Z

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

…ition in authorizePasswordlessLogin

…out passwordless login

…ckURI in passwordless login

…nCallbackURI optional

…ode in login page

… commerce-sdk-react

…Commerce API parameters to test with staging-001

… update Commerce API parameters to test with staging-001" This reverts commit 0f3f211.

hajinsuha1 · 2025-12-05T15:52:42Z

packages/commerce-sdk-react/src/provider.tsx

        organizationId,
        shortCode,
        siteId,
+        locale,


the locale that is passed to the authorizePasswordless endpoint is the one associated to the current site in config/sites.js

For example,
http://localhost:3000/us/ sets locale to en-US
http://localhost:3000/global sets locale to en-GB
http://localhost:3000/us/en-CA sets locale to en-CA

hajinsuha1 · 2025-12-05T15:54:04Z

note I'll update the .hbs files in a separate ticket to keep the testing/changes small: https://gus.lightning.force.com/lightning/r/ADM_Work__c/a07EE00002QhntzYAB/view

hajinsuha1 · 2025-12-05T17:43:40Z

packages/commerce-sdk-react/src/auth/index.ts

+        const mode = parameters.mode || 'callback'
        const callbackURI = parameters.callbackURI || this.passwordlessLoginCallbackURI
-        const finalMode = callbackURI ? 'callback' : parameters.mode || 'sms'
+        const locale = this.locale


simplified mode selection to respect user's explicit mode choice while still defaulting to callback mode for backward compatibility

jeremy-jung1 · 2025-12-09T08:10:14Z

When clicking on the link after initiating passwordless login in en-US, it goes to the en-GB passwordless login landing page. It may be beneficial for the locale to be included in the link in the template, so the language stays consistent.

Unfortunately it seems currently the template API in SLAS uses the same link for all locales, making it difficult to have a unique link with the /global/{locale} for each locale. This is a hard database schema relationship of 1 link to many templates, so this change would need an overhaul of the current schema for password action template. I'll look into what work this would be on SLAS side to allow link to be unique to each locale, but would appreciate to know if there are solutions on PWA Kit side as well:
A) Maybe in the template we can include a query parameter like ${link}&locale=ko-KR and make the locale consistent that way?
B) Or is locale stored in browser settings?

Also, if we're going to use the way of including /global/{locale} in the link to make the language consistent, I think I'm noticing an issue in PWA Kit where the call to /shopper/auth/v1/organizations/f_ecom_zzrf_001/oauth2/passwordless/token is not being made if that part of the URL exists, e.g. http://localhost:3000/global/ko-KR/passwordless-login-landing?token=11111111. Not sure if that is a bug, but if it is and there is no other way we would need to fix it

…, update Commerce API parameters to test with staging-001" This reverts commit 66bcafa.

…for localized paths

hajinsuha1 · 2025-12-09T18:39:42Z

When clicking on the link after initiating passwordless login in en-US, it goes to the en-GB passwordless login landing page. It may be beneficial for the locale to be included in the link in the template, so the language stays consistent.

Unfortunately it seems currently the template API in SLAS uses the same link for all locales, making it difficult to have a unique link with the /global/{locale} for each locale. This is a hard database schema relationship of 1 link to many templates, so this change would need an overhaul of the current schema for password action template. I'll look into what work this would be on SLAS side to allow link to be unique to each locale, but would appreciate to know if there are solutions on PWA Kit side as well: A) Maybe in the template we can include a query parameter like ${link}&locale=ko-KR and make the locale consistent that way? B) Or is locale stored in browser settings?

Also, if we're going to use the way of including /global/{locale} in the link to make the language consistent, I think I'm noticing an issue in PWA Kit where the call to /shopper/auth/v1/organizations/f_ecom_zzrf_001/oauth2/passwordless/token is not being made if that part of the URL exists, e.g. http://localhost:3000/global/ko-KR/passwordless-login-landing?token=11111111. Not sure if that is a bug, but if it is and there is no other way we would need to fix it

@jeremy-jung1 Thanks for catching this!
So yes we can make it work from the PWA side. I've pushed a fix to allow the /passwordless-login-landing path to support localized url like /global/ko-KR/passwordless-login-landing.
Now what a merchant would need to do is setup their password-action-templates in SLAS Admin like so where

link is set to the base URL of the site
the template has the path to the /password-login-landing path prefixed with the localized path (e.g., /us/en-CA/, /global/ko-KR/)

# Set template for en-CA in RefArch
curl --location --request PUT 'https://staging-001.api.commercecloud.salesforce.com/shopper/auth-admin/v1/tenants/zzrf_001/clients/bb1e8c16-7767-4ed8-bc5d-83efc59a208a/password-action-templates \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer xxx' \
--data '{
    "channelId": "RefArch",
    "name": "Password Template",
    "locale": "en-CA",
    "subject": "Your one time verification code",
    "actionType": "PWDLESS_LOGIN",
    "templateType": "EMAIL",
    "link": "https://wasatch-mrt-passwordless-test.mrt-storefront-staging.com", 
    "template": "[en-CA] Your one time verification code is ${token}\nHere is the link to login: ${link}/us/en-CA/passwordless-login-landing?token=${token}"
}'

# Set template for en-GB in RefArchGlobal
curl --location --request PUT 'https://staging-001.api.commercecloud.salesforce.com/shopper/auth-admin/v1/tenants/zzrf_001/clients/bb1e8c16-7767-4ed8-bc5d-83efc59a208a/password-action-templates \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer xxx' \
--data '{
    "channelId": "RefArchGlobal",
    "name": "Password Template",
    "locale": "en-GB",
    "subject": "Your one time verification code",
    "actionType": "PWDLESS_LOGIN",
    "templateType": "EMAIL",
    "link": "https://wasatch-mrt-passwordless-test.mrt-storefront-staging.com", 
    "template": "[en-GB] Your one time verification code is ${token}\nHere is the link to login: ${link}/passwordless-login-landing?token=${token}"
}'

# Set template for ko-KR in RefArchGlobal
curl --location --request PUT 'https://staging-001.api.commercecloud.salesforce.com/shopper/auth-admin/v1/tenants/zzrf_001/clients/bb1e8c16-7767-4ed8-bc5d-83efc59a208a/password-action-templates \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer xxx' \
--data '{
    "channelId": "RefArch",
    "name": "Password Template",
    "locale": "ko-KR",
    "subject": "Your one time verification code",
    "actionType": "PWDLESS_LOGIN",
    "templateType": "EMAIL",
    "link": "https://wasatch-mrt-passwordless-test.mrt-storefront-staging.com", 
    "template": "[ko-KR] [소매점용 React PWA 스타터 스토어] Your one time verification code is ${token}\nHere is the link to login: ${link}/global/ko-KR/passwordless-login-landing?token=${token}"
}'

This can be tested on this deployed instance:

…ail mode, update Commerce API parameters to test with staging-001"" This reverts commit 465b813.

…wordless-login-mode-in-config

jeremy-jung1

Followed the test steps and things are working as expected

hajinsuha1 added 2 commits December 3, 2025 14:26

Add passwordless login mode configuration with email as default

7f7d493

Update authorizePasswordless to require mode parameter and add locale…

5012c78

… support

hajinsuha1 added 9 commits December 3, 2025 15:45

Remove commented out passwordless callbackURI configuration

f4368a2

Remove passwordlessCallbackURI variable and simplify callbackURI cond…

d697aa9

…ition in authorizePasswordlessLogin

Remove conditional callbackURI spread and add mode parameter to check…

53a54a3

…out passwordless login

Add buildCallbackURL utility function and conditionally spread callba…

0db1dad

…ckURI in passwordless login

Rename buildCallbackURL to buildAbsoluteUrl and make passwordlessLogi…

391c537

…nCallbackURI optional

update unit tests in template-retail-react-app and fix passwordless m…

7362f46

…ode in login page

make authorizePasswordless backward compatible and add unit tests for…

587b3c2

… commerce-sdk-react

Make passwordlessLoginCallbackURI non-optional with empty string default

4dc22cc

lint

ea88027

hajinsuha1 changed the base branch from develop to feature/email-otp December 4, 2025 21:21

hajinsuha1 added 3 commits December 5, 2025 10:18

Enable SLAS private client and passwordless login email mode, update …

0f3f211

…Commerce API parameters to test with staging-001

Revert "Enable SLAS private client and passwordless login email mode,…

66bcafa

… update Commerce API parameters to test with staging-001" This reverts commit 0f3f211.

update changelog

cb345aa

hajinsuha1 commented Dec 5, 2025

View reviewed changes

hajinsuha1 requested a review from jeremy-jung1 December 5, 2025 15:53

hajinsuha1 marked this pull request as ready for review December 5, 2025 15:53

hajinsuha1 requested a review from a team as a code owner December 5, 2025 15:53

hajinsuha1 commented Dec 5, 2025

View reviewed changes

hajinsuha1 added 2 commits December 9, 2025 09:35

Reapply "Enable SLAS private client and passwordless login email mode…

465b813

…, update Commerce API parameters to test with staging-001" This reverts commit 66bcafa.

Use endsWith() to match passwordless login landing path and add test …

3737c6e

…for localized paths

hajinsuha1 and others added 3 commits December 9, 2025 13:42

lint

9dc54b1

Revert "Reapply "Enable SLAS private client and passwordless login em…

2a39c76

…ail mode, update Commerce API parameters to test with staging-001"" This reverts commit 465b813.

Merge branch 'feature/email-otp' into W-20279798-support-setting-pass…

a4e1cfd

…wordless-login-mode-in-config

jeremy-jung1 approved these changes Dec 9, 2025

View reviewed changes

hajinsuha1 merged commit 7877887 into feature/email-otp Dec 10, 2025
39 of 40 checks passed

hajinsuha1 deleted the W-20279798-support-setting-passwordless-login-mode-in-config branch December 10, 2025 14:13

hajinsuha1 mentioned this pull request Dec 30, 2025

Feature: Passwordless Login and Password Reset supports use of email mode #3525

Merged

12 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

@W-20279798 support setting passwordless login mode in config#3492

@W-20279798 support setting passwordless login mode in config#3492
hajinsuha1 merged 19 commits intofeature/email-otpfrom
W-20279798-support-setting-passwordless-login-mode-in-config

hajinsuha1 commented Dec 3, 2025 •

edited

Loading

Uh oh!

cc-prodsec commented Dec 3, 2025 •

edited

Loading

Uh oh!

hajinsuha1 Dec 5, 2025

Uh oh!

hajinsuha1 commented Dec 5, 2025 •

edited

Loading

Uh oh!

hajinsuha1 Dec 5, 2025

Uh oh!

jeremy-jung1 commented Dec 9, 2025 •

edited

Loading

Uh oh!

hajinsuha1 commented Dec 9, 2025 •

edited

Loading

Uh oh!

jeremy-jung1 left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

hajinsuha1 commented Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Types of Changes

Changes

How to Test-Drive This PR

Email mode

Callback mode

Backwards Compatibilty with template-retail-react-app

Checklists

General

Accessibility Compliance

Localization

Uh oh!

cc-prodsec commented Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Snyk checks have passed. No issues have been found so far.

Uh oh!

hajinsuha1 Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

hajinsuha1 commented Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hajinsuha1 Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

jeremy-jung1 commented Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hajinsuha1 commented Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jeremy-jung1 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

hajinsuha1 commented Dec 3, 2025 •

edited

Loading

Backwards Compatibilty with `template-retail-react-app`

cc-prodsec commented Dec 3, 2025 •

edited

Loading

hajinsuha1 commented Dec 5, 2025 •

edited

Loading

jeremy-jung1 commented Dec 9, 2025 •

edited

Loading

hajinsuha1 commented Dec 9, 2025 •

edited

Loading