@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

• update useAuthModal and login page to open the OtpAuthModal after user clicks "Continue Securely"
• create a new useMergeBasket hook
• 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. Click "Resend Code" and verify another email with a new OTP was sent to you
8. Copy the OTP and paste it into the input
9. Verify the user is successfully logged in and redirected to the accounts page
10. 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

1. Update default.js passwordless login tokenLength to 6

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

2. Start the app and verify in the passwordless login flow the input now only takes 6 digits.

E2E Tests

1. Verify the updates passwordless E2E tests pass

   # Set the playwright tests to run against a `template-retail-react-app` with the new email OTP feature
   export [email protected] PWA_E2E_USER_PASSWORD=hpv_pek-JZK_xkz0wzf 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
   

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.