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

e2e/tests/desktop/extra-features.spec.js

@@ -38,17 +38,49 @@ test('Verify passwordless login request', async ({page}) => {
         '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/passwordless/login'
     )
 
+    // Verify the passwordless login request
     expect(interceptedRequest).toBeTruthy()
     expect(interceptedRequest.method()).toBe('POST')
 
-    const postData = interceptedRequest.postData()
+    let postData = interceptedRequest.postData()
     expect(postData).toBeTruthy()
 
-    const params = new URLSearchParams(postData)
+    let params = new URLSearchParams(postData)
 
     expect(params.get('user_id')).toBe(config.PWA_E2E_USER_EMAIL)
     expect(params.get('mode')).toBe('email')
     expect(params.get('channel_id')).toBe(config.EXTRA_FEATURES_E2E_RETAIL_APP_HOME_SITE)
+
+    await page.route(
+        '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/passwordless/token',
+        (route) => {
+            interceptedRequest = route.request()
+            route.continue()
+        }
+    )
+
+    // Wait for OTP input fields to appear and fill the 8-digit code
+    const otpCode = '12345678' // Replace with actual OTP code
+    const otpInputs = page.locator('input[inputmode="numeric"][maxlength="1"]')
+    await otpInputs.first().waitFor()
+
+    // Fill each input field with one digit
+    for (let i = 0; i < 8; i++) {
+        await otpInputs.nth(i).fill(otpCode[i])
+    }
+
+    await page.waitForResponse(
+        '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/passwordless/token'
+    )
+
+    // Verify the passwordless login token request
+    expect(interceptedRequest).toBeTruthy()
+    expect(interceptedRequest.method()).toBe('POST')
+    postData = interceptedRequest.postData()
+    expect(postData).toBeTruthy()
+    params = new URLSearchParams(postData)
+    expect(params.get('pwdless_login_token')).toBe(otpCode)
+    expect(params.get('hint')).toBe('pwdless_login')
 })
 
 test('Verify password reset request', async ({page}) => {

e2e/tests/mobile/extra-features.spec.js

@@ -40,17 +40,49 @@ test('Verify passwordless login request on mobile', async ({page}) => {
         '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/passwordless/login'
     )
 
+    // Verify the passwordless login request
     expect(interceptedRequest).toBeTruthy()
     expect(interceptedRequest.method()).toBe('POST')
 
-    const postData = interceptedRequest.postData()
+    let postData = interceptedRequest.postData()
     expect(postData).toBeTruthy()
 
-    const params = new URLSearchParams(postData)
+    let params = new URLSearchParams(postData)
 
     expect(params.get('user_id')).toBe(config.PWA_E2E_USER_EMAIL)
     expect(params.get('mode')).toBe('email')
     expect(params.get('channel_id')).toBe(config.EXTRA_FEATURES_E2E_RETAIL_APP_HOME_SITE)
+
+    await page.route(
+        '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/passwordless/token',
+        (route) => {
+            interceptedRequest = route.request()
+            route.continue()
+        }
+    )
+
+    // Wait for OTP input fields to appear and fill the 8-digit code
+    const otpCode = '12345678' // Replace with actual OTP code
+    const otpInputs = page.locator('input[inputmode="numeric"][maxlength="1"]')
+    await otpInputs.first().waitFor()
+
+    // Fill each input field with one digit
+    for (let i = 0; i < 8; i++) {
+        await otpInputs.nth(i).fill(otpCode[i])
+    }
+
+    await page.waitForResponse(
+        '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/passwordless/token'
+    )
+
+    // Verify the passwordless login token request
+    expect(interceptedRequest).toBeTruthy()
+    expect(interceptedRequest.method()).toBe('POST')
+    postData = interceptedRequest.postData()
+    expect(postData).toBeTruthy()
+    params = new URLSearchParams(postData)
+    expect(params.get('pwdless_login_token')).toBe(otpCode)
+    expect(params.get('hint')).toBe('pwdless_login')
 })
 
 test('Verify password reset request on mobile (extra features enabled)', async ({page}) => {

packages/pwa-kit-create-app/CHANGELOG.md

@@ -2,6 +2,7 @@
 - Add new One-Click Checkout configuration [#3609](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3609)
 - Support email mode by default for passwordless login and password reset in a generated app. [#3525](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3525)
 - Util function for passwordless callback URI [#3630](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3630)
+- Add `tokenLength` to login configuration [#3554](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3554)
 
 ## v3.15.0 (Dec 17, 2025)
 - Add new Google Cloud API configuration and Bonus Product configuration [#3523](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3523)

packages/pwa-kit-create-app/assets/bootstrap/js/config/default.js.hbs

@@ -6,7 +6,7 @@
  */
 /* eslint-disable @typescript-eslint/no-var-requires */
 const sites = require('./sites.js')
-const {parseSettings} = require('./utils.js')
+const {parseSettings, validateOtpTokenLength} = require('./utils.js')
 
 module.exports = {
     app: {
@@ -57,6 +57,9 @@ module.exports = {
             interpretPlusSignAsSpace: false
         },
         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: validateOtpTokenLength(process.env.OTP_TOKEN_LENGTH),
             passwordless: {
                 // Enables or disables passwordless login for the site. Defaults to: false
                 {{#if answers.project.demo.enableDemoSettings}}

packages/pwa-kit-create-app/assets/bootstrap/js/config/utils.js

@@ -5,6 +5,42 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 
+/**
+ * Valid OTP token lengths supported by the authentication system.
+ * These values are enforced to ensure compatibility with the OTP verification flow.
+ */
+const VALID_OTP_TOKEN_LENGTHS = [6, 8]
+const DEFAULT_OTP_TOKEN_LENGTH = 8
+
+/**
+ * Validates and normalizes the OTP token length configuration.
+ * Throws an error if the token length is invalid.
+ *
+ * @param {string|number|undefined} tokenLength - The token length from config or env var
+ * @returns {number} Validated token length (6 or 8)
+ * @throws {Error} If tokenLength is invalid (not 6 or 8)
+ */
+function validateOtpTokenLength(tokenLength) {
+    // If undefined, return default
+    if (tokenLength === undefined) {
+        return DEFAULT_OTP_TOKEN_LENGTH
+    }
+
+    // Parse to number (handles string numbers like "6" or "8")
+    const parsedLength = Number(tokenLength)
+
+    // Check if it's one of the allowed values (includes() will return false for NaN or invalid numbers)
+    if (!VALID_OTP_TOKEN_LENGTHS.includes(parsedLength)) {
+        throw new Error(
+            `Invalid OTP token length: ${tokenLength}. Valid values are ${VALID_OTP_TOKEN_LENGTHS.join(
+                ' or '
+            )}. `
+        )
+    }
+
+    return parsedLength
+}
+
 /**
  * Safely parses settings from either a JSON string or object
  * @param {string|object} settings - The settings
@@ -30,5 +66,8 @@ function parseSettings(settings) {
 }
 
 module.exports = {
-    parseSettings
+    parseSettings,
+    validateOtpTokenLength,
+    DEFAULT_OTP_TOKEN_LENGTH,
+    VALID_OTP_TOKEN_LENGTHS
 }

packages/pwa-kit-create-app/assets/templates/@salesforce/retail-react-app/config/default.js.hbs

@@ -6,7 +6,7 @@
  */
 /* eslint-disable @typescript-eslint/no-var-requires */
 const sites = require('./sites.js')
-const {parseSettings} = require('./utils.js')
+const {parseSettings, validateOtpTokenLength} = require('./utils.js')
 
 module.exports = {
     app: {
@@ -57,6 +57,9 @@ module.exports = {
             interpretPlusSignAsSpace: false
         },
         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: validateOtpTokenLength(process.env.OTP_TOKEN_LENGTH),
             passwordless: {
                 // Enables or disables passwordless login for the site. Defaults to: false
                 {{#if answers.project.demo.enableDemoSettings}}

packages/pwa-kit-create-app/assets/templates/@salesforce/retail-react-app/config/utils.js

@@ -5,6 +5,42 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 
+/**
+ * Valid OTP token lengths supported by the authentication system.
+ * These values are enforced to ensure compatibility with the OTP verification flow.
+ */
+const VALID_OTP_TOKEN_LENGTHS = [6, 8]
+const DEFAULT_OTP_TOKEN_LENGTH = 8
+
+/**
+ * Validates and normalizes the OTP token length configuration.
+ * Throws an error if the token length is invalid.
+ *
+ * @param {string|number|undefined} tokenLength - The token length from config or env var
+ * @returns {number} Validated token length (6 or 8)
+ * @throws {Error} If tokenLength is invalid (not 6 or 8)
+ */
+function validateOtpTokenLength(tokenLength) {
+    // If undefined, return default
+    if (tokenLength === undefined) {
+        return DEFAULT_OTP_TOKEN_LENGTH
+    }
+
+    // Parse to number (handles string numbers like "6" or "8")
+    const parsedLength = Number(tokenLength)
+
+    // Check if it's one of the allowed values (includes() will return false for NaN or invalid numbers)
+    if (!VALID_OTP_TOKEN_LENGTHS.includes(parsedLength)) {
+        throw new Error(
+            `Invalid OTP token length: ${tokenLength}. Valid values are ${VALID_OTP_TOKEN_LENGTHS.join(
+                ' or '
+            )}. `
+        )
+    }
+
+    return parsedLength
+}
+
 /**
  * Safely parses settings from either a JSON string or object
  * @param {string|object} settings - The settings
@@ -30,5 +66,8 @@ function parseSettings(settings) {
 }
 
 module.exports = {
-    parseSettings
+    parseSettings,
+    validateOtpTokenLength,
+    DEFAULT_OTP_TOKEN_LENGTH,
+    VALID_OTP_TOKEN_LENGTHS
 }

packages/template-retail-react-app/CHANGELOG.md

@@ -12,6 +12,7 @@
 - [Feature] Update passwordless login and password reset to use email mode by default. The mode can now be configured across the login page, auth modal, and checkout page [#3525](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3525)
 - Update "Continue Securely" button text to "Continue" for passwordless login [#3556](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3556)
 - Util function for passwordless callback URI [#3630](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3630)
+- Allow shopper to manually input OTP during passwordless login [#3554](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3554)
 
 ## v8.3.0 (Dec 17, 2025)
 - [Bugfix] Fix Forgot Password link not working from Account Profile password update form [#3493](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3493)

packages/template-retail-react-app/app/components/otp-auth/index.jsx

@@ -27,6 +27,7 @@ import {useUsid, useCustomerType, useDNT} from '@salesforce/commerce-sdk-react'
 import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
 import {useOtpInputs} from '@salesforce/retail-react-app/app/hooks/use-otp-inputs'
 import {useCountdown} from '@salesforce/retail-react-app/app/hooks/use-countdown'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
 
 const OtpAuth = ({
     isOpen,
@@ -35,9 +36,20 @@ const OtpAuth = ({
     handleSendEmailOtp,
     handleOtpVerification,
     onCheckoutAsGuest,
-    isGuestRegistration = false
+    isGuestRegistration = false,
+    hideCheckoutAsGuestButton = false
 }) => {
-    const OTP_LENGTH = 8
+    const {tokenLength} = getConfig().app.login
+    const parsedLength = Number(tokenLength)
+    const isValidOtpLength = parsedLength === 6 || parsedLength === 8
+    const OTP_LENGTH = isValidOtpLength ? parsedLength : 8
+
+    if (!isValidOtpLength) {
+        console.warn(
+            `Invalid OTP token length: ${tokenLength}. Expected 6 or 8. Defaulting to ${OTP_LENGTH}.`
+        )
+    }
+
     const [isVerifying, setIsVerifying] = useState(false)
     const [error, setError] = useState('')
     const [resendTimer, setResendTimer] = useCountdown(0)
@@ -269,35 +281,37 @@ const OtpAuth = ({
 
                         {/* Buttons */}
                         <HStack spacing={4} width="100%" justifyContent="center">
-                            <Button
-                                onClick={handleCheckoutAsGuest}
-                                variant="solid"
-                                size="lg"
-                                minWidth="160px"
-                                isDisabled={isVerifying}
-                                bg="gray.50"
-                                color="gray.800"
-                                fontWeight="bold"
-                                border="none"
-                                _hover={{
-                                    bg: 'gray.100'
-                                }}
-                                _active={{
-                                    bg: 'gray.200'
-                                }}
-                            >
-                                {isGuestRegistration ? (
-                                    <FormattedMessage
-                                        defaultMessage="Cancel"
-                                        id="otp.button.cancel_guest_registration"
-                                    />
-                                ) : (
-                                    <FormattedMessage
-                                        defaultMessage="Checkout as a Guest"
-                                        id="otp.button.checkout_as_guest"
-                                    />
-                                )}
-                            </Button>
+                            {!hideCheckoutAsGuestButton && (
+                                <Button
+                                    onClick={handleCheckoutAsGuest}
+                                    variant="solid"
+                                    size="lg"
+                                    minWidth="160px"
+                                    isDisabled={isVerifying}
+                                    bg="gray.50"
+                                    color="gray.800"
+                                    fontWeight="bold"
+                                    border="none"
+                                    _hover={{
+                                        bg: 'gray.100'
+                                    }}
+                                    _active={{
+                                        bg: 'gray.200'
+                                    }}
+                                >
+                                    {isGuestRegistration ? (
+                                        <FormattedMessage
+                                            defaultMessage="Cancel"
+                                            id="otp.button.cancel_guest_registration"
+                                        />
+                                    ) : (
+                                        <FormattedMessage
+                                            defaultMessage="Checkout as a Guest"
+                                            id="otp.button.checkout_as_guest"
+                                        />
+                                    )}
+                                </Button>
+                            )}
 
                             <Button
                                 onClick={handleResend}
@@ -338,7 +352,8 @@ OtpAuth.propTypes = {
     handleSendEmailOtp: PropTypes.func.isRequired,
     handleOtpVerification: PropTypes.func.isRequired,
     onCheckoutAsGuest: PropTypes.func,
-    isGuestRegistration: PropTypes.bool
+    isGuestRegistration: PropTypes.bool,
+    hideCheckoutAsGuestButton: PropTypes.bool
 }
 
 export default OtpAuth