@W-20448811 Shopper can manually enter OTP in login flows

[hajinsuha1]

Description

Allow shopper to manually input the OTP during the passwordless login flow by displaying an OTP Auth modal after clicking "Continue Securely".

Screenshare.-.2025-12-31.2_31_41.PM.mp4

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

• introduce a new login.tokenLength configuration in default.js that determines the number of input fields to show in the OtpAuthModal
• update useAuthModal and login page to open the OtpAuthModal after user clicks "Continue Securely"
• update OtpAuthModal to include a prop for hiding the Checkout as Guest button
• update PasswordlessLogin component to not hide elements after form has been successfully submitted

How to Test-Drive This PR

Auth Modal

1. Navigate to https://wasatch-mrt-passwordless-test.mrt-storefront-staging.com/
2. Add any product to your cart (this is to test merge basket)
3. Click on the profile icon on the top right
4. Enter your email
5. Click "Continue Securely"
6. Verify an OTP input modal is displayed and an email containing the OTP was sent to you
7. Enter an invalid OTP and verify Invalid token error message is displayed
   
8. Click "Resend Code" and verify another email with a new OTP was sent to you
9. Copy the OTP and paste it into the input
10. Verify the user is successfully logged in and redirected to the accounts page
11. Verify the cart still contains the product you added in step 2

Login Page

1. Add any product to your cart (this is to test merge basket)
2. Navigate to the login page: https://wasatch-mrt-passwordless-test.mrt-storefront-staging.com/login
3. Enter your email
4. Click "Continue Securely"
5. Verify an OTP input modal is displayed and an email containing the OTP was sent to you
6. Click "Resend Code" and verify another email with a new OTP was sent to you
7. Copy the OTP and paste it into the input
8. Verify the user is successfully logged in and redirected to the accounts page
9. Verify the cart still contains the product you added in step 1

Magic Link

1. Add any product to your cart (this is to test merge basket)
2. Navigate to the login page: https://wasatch-mrt-passwordless-test.mrt-storefront-staging.com/login
3. Enter your email
4. Click "Continue Securely"
5. Click on the login link embededded in the email to login
6. Verify the user is successfully logged in and redirected to the accounts page
7. Verify the cart still contains the product you added in step 1

Token Length is configurable via Environment Variable

1. Set the OTP_TOKEN_LENGTH env variable and start the app

   export OTP_TOKEN_LENGTH=6
   cd packages/template-retail-react-app
   npm start
   

2. Verify in the passwordless login flow the input now only takes 6 digits.
3. Set the OTP_TOKEN_LENGTH env variable to an invalid value

   export OTP_TOKEN_LENGTH=7
   npm start
   

4. Verify in the passwordless login flow the input defaults to 8 digits and a console warn is displayed.
   

Old checkout page displays "Check Your Email" modal when oneClickCheckout is disabled

1. Navigate to the site: https://wasatch-mrt-passwordless-test.mrt-storefront-staging.com
2. Add an item to your cart
3. Click Proceed to Checkout
4. Enter your email and click Secure Link
5. Verify a "Check your email" popup is displayed and verify a login email is sent to you
   

One Click Checkout works when oneClickCheckout is enabled

1. Navigate to: https://wasatch-mrt-passwordless-poc.mrt-storefront-staging.com
2. Add an item to your cart
3. Enter your email and hit enter
4. Verify the OtpAuthModal is opened with 6-digit input and an email is sent
5. Enter the code from your email and verify you are logged in

E2E Tests

1. Verify the updated passwordless E2E tests pass

   # Set the playwright tests to run against a `template-retail-react-app` with the new email OTP feature
   export PWA_E2E_USER_EMAIL=e2e.pwa.kit@gmail.com PWA_E2E_USER_PASSWORD=SECRET EXTRA_FEATURES_E2E_RETAIL_APP_HOME=https://wasatch-mrt-passwordless-test.mrt-storefront-staging.com
   
   npx playwright test --project=extra-features-desktop --project=extra-features-mobile --ui
   

pwa-kit-create-app

1. Generate the project using pwa-kit-create-app

   cd ../..
   GENERATOR_PRESET=retail-react-app-demo node packages/pwa-kit-create-app/scripts/create-mobify-app-dev.js --outputDir generated-retail-react-app-demo
   

2. Once completed open default.js in the generated app

   code generated-retail-react-app-demo/config/default.js
   

3. Verify in default.js, app.login.passwordless.mode and app.login.resetPassword.mode is set to email and callbackURI is commented out
4. In default.js
5. set app.login.passwordless.enabled to true

               passwordless: {
                   // Enables or disables passwordless login for the site. Defaults to: false
                   enabled: true,
   

6. update commerceAPI to use a private client
7. In overrides/app/ssr.js
   1. set useSLASPrivateClient to true
   2. uncomment the applySLASPrivateClientToEndpoints property

       applySLASPrivateClientToEndpoints:
           /\/oauth2\/(token|passwordless\/(login|token)|password\/(reset|action))/,
   

8. In overrides/app/components/_app-config/index.jsx add enablePWAKitPrivateClient={true} to the fields of CommerceApiProvider
9. Set the token length, private client secret, and Start the app

   cd generated-retail-react-app-demo 
   export OTP_TOKEN_LENGTH=6
   export PWA_KIT_SLAS_CLIENT_SECRET=SECRET
   npm start
   

10. Verify passwordless login works and is configured to use a 6 digit input

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)

[cc-prodsec]

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

[vmarta]

Thank you for the detailed PR description btw. Love the comprehensive ways to test the PR.

I'll continue with the PR review. Posting whatever comments I have so far.

[vmarta]

I think it's better if we enforce this 6 or 8 digit requirement somehow in both the user configuration and also in our own code. Currently, it feels like it's not easily known for other developers that there's this requirement.

Perhaps we can use constants or enums to restrict them to either 6 or 8. And add some validations somewhere to make it loud and clear of this requirement.

[hajinsuha1]

@vmarta Makes sense! I've added a validation check to default.js. If the merchant sets an invalid OTP_TOKEN_LENGTH via env vars the app will throw an error

If they update default.js with a value directly that is invalid like:

        login: {
            // The length of the token for OTP authentication. Used by passwordless login and reset password.
            // If the env var `OTP_TOKEN_LENGTH` is set, it will override the config value. Valid values are 6 or 8. Defaults to: 8
            tokenLength: 7,

They'll see a console warn when the OtpAuthModal is opened and the value would default to 8

In the docs, I'll mention setting tokenLength via env vars and not recommend setting it directly via default.js

[vmarta]

I didn't find anything else major. So I think overall this PR is good. Although I didn't fully test the different scenarios (as described in the PR), the few ones I did were functioning as expected.

Yeah, I think the biggest thing for me is the validation and configuration of 6 or 8 digits.

[vmarta]

Cool, thank you for updating the E2E tests too.

[vmarta]

I like the comment that was added to the configuration files found in the create-app package. Let's copy that over to here as well.

[jeremy-jung1]

Perhaps this was an issue that has already been present but I'm seeing that the product I add to the cart is not merging with the ones already in my account. Video sent via Slack

[vmarta]

Thanks for addressing the OTP token length.