Merge branch 'develop' into feature/email-otp

Signed-off-by: Jinsu Ha <91205717+hajinsuha1@users.noreply.github.com>

Author: hajinsuha1

packages/commerce-sdk-react/CHANGELOG.md

@@ -1,4 +1,5 @@
 ## v4.4.0-dev (Dec 17, 2025)
+- [Bugfix]Ensure code_verifier can be optional in resetPassword call [#3567](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3567)
 
 - 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 [#3492](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3492)
 - Update `getPasswordResetToken` to default locale to the one in CommerceApiProvider and pass callback_uri and idp_name only when they are defined [#3547](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3547)

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

@@ -1367,11 +1367,17 @@ class Auth {
                 Authorization: ''
             },
             body: {
+                // TODO: remove the eslint disabled after updating OAS
+                // user_id is a valid param for resetPassword
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                ...(parameters.user_id && {user_id: parameters.user_id}),
                 pwd_action_token: parameters.pwd_action_token,
                 channel_id: parameters.channel_id || slasClient.clientConfig.parameters.siteId,
                 client_id: parameters.client_id || slasClient.clientConfig.parameters.clientId,
                 new_password: parameters.new_password,
                 hint: parameters.hint || 'cross_device',
+                // hint='cross_device' and a defined user_id is required for code_verifier to be optional for this call
                 ...(parameters.code_verifier && {code_verifier: parameters.code_verifier})
             }
         }
@@ -1382,9 +1388,6 @@ class Auth {
                 `${slasClient.clientConfig.parameters.clientId}:${this.clientSecret}`
             )}`
         }
-        // TODO: no code verifier needed with the fix blair has made, delete this when the fix has been merged to production
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
         const res = await this.client.resetPassword(options)
         return res
     }

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

@@ -1,5 +1,6 @@
 ## v8.4.0-dev (Dec 17, 2025)
 - [Feature] Add `fuzzyPathMatching` to reduce computational overhead of route generation at time of application load [#3530](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3530)
+- [Bugfix] Fix Passwordless Login landingPath, Reset Password landingPath, and Social Login redirectUri value in config not being used [#3560](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3560)
 - 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 [#3492](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3492) [#3547](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3547)
 - Update "Continue Securely" button text to "Continue" for passwordless login [#3556](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3556)
 

packages/template-retail-react-app/app/constants.js

@@ -251,12 +251,6 @@ export const LOGIN_TYPES = {
     SOCIAL: 'social'
 }
 
-// Constants for Password Reset
-export const RESET_PASSWORD_LANDING_PATH = '/reset-password-landing'
-
-// Constants for Passwordless Login
-export const PASSWORDLESS_LOGIN_LANDING_PATH = '/passwordless-login-landing'
-
 export const PASSWORDLESS_ERROR_MESSAGES = [
     /callback_uri doesn't match/i,
     /passwordless permissions error/i,

packages/template-retail-react-app/app/hooks/use-password-reset.js

@@ -20,6 +20,7 @@ export const usePasswordReset = () => {
     const appOrigin = useAppOrigin()
     const config = getConfig().app.login?.resetPassword
     const callbackURI = buildAbsoluteUrl(appOrigin, config?.callbackURI)
+    const resetPasswordLandingPath = config.app.login?.resetPassword?.landingPath
 
     const getPasswordResetTokenMutation = useAuthHelper(AuthHelpers.GetPasswordResetToken)
     const resetPasswordMutation = useAuthHelper(AuthHelpers.ResetPassword)
@@ -50,5 +51,5 @@ export const usePasswordReset = () => {
         )
     }
 
-    return {getPasswordResetToken, resetPassword}
+    return {getPasswordResetToken, resetPassword, resetPasswordLandingPath}
 }

packages/template-retail-react-app/app/hooks/use-password-reset.test.js

@@ -17,8 +17,7 @@ const mockToken = '123456'
 const mockNewPassword = 'new-password'
 
 const MockComponent = () => {
-    const {getPasswordResetToken, resetPassword} = usePasswordReset()
-
+    const {getPasswordResetToken, resetPassword, resetPasswordLandingPath} = usePasswordReset()
     return (
         <div>
             <button
@@ -35,6 +34,8 @@ const MockComponent = () => {
                     })
                 }
             />
+
+            <div data-testid="reset-password-landing-path">{resetPasswordLandingPath}</div>
         </div>
     )
 }
@@ -152,4 +153,11 @@ describe('usePasswordReset', () => {
             position: 'bottom-right'
         })
     })
+
+    test('resetPasswordLandingPath is returned', () => {
+        renderWithProviders(<MockComponent />)
+        expect(screen.getByTestId('reset-password-landing-path')).toHaveTextContent(
+            mockConfig.app.login.resetPassword.landingPath
+        )
+    })
 })

packages/template-retail-react-app/app/pages/login/index.jsx

@@ -31,7 +31,6 @@ import {
     INVALID_TOKEN_ERROR,
     INVALID_TOKEN_ERROR_MESSAGE,
     FEATURE_UNAVAILABLE_ERROR_MESSAGE,
-    PASSWORDLESS_LOGIN_LANDING_PATH,
     PASSWORDLESS_ERROR_MESSAGES
 } from '@salesforce/retail-react-app/app/constants'
 import {usePrevious} from '@salesforce/retail-react-app/app/hooks/use-previous'
@@ -62,6 +61,7 @@ const Login = ({initialView = LOGIN_VIEW}) => {
     const {passwordless = {}, social = {}} = getConfig().app.login || {}
     const isPasswordlessEnabled = !!passwordless?.enabled
     const passwordlessMode = passwordless?.mode
+    const passwordlessLoginLandingPath = passwordless?.landingPath
     const isSocialEnabled = !!social?.enabled
     const idps = social?.idps
 
@@ -151,7 +151,7 @@ const Login = ({initialView = LOGIN_VIEW}) => {
     // executing a passwordless login attempt using the token. The process waits for the
     // customer baskets to be loaded to guarantee proper basket merging.
     useEffect(() => {
-        if (path.endsWith(PASSWORDLESS_LOGIN_LANDING_PATH) && isSuccessCustomerBaskets) {
+        if (path.endsWith(passwordlessLoginLandingPath) && isSuccessCustomerBaskets) {
             const token = decodeURIComponent(queryParams.get('token'))
             if (queryParams.get('redirect_url')) {
                 setRedirectPath(decodeURIComponent(queryParams.get('redirect_url')))

packages/template-retail-react-app/app/pages/login/passwordless-landing.test.js

@@ -17,6 +17,11 @@ import Account from '@salesforce/retail-react-app/app/pages/account'
 import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
 import {mockedRegisteredCustomer} from '@salesforce/retail-react-app/app/mocks/mock-data'
 import {AuthHelpers} from '@salesforce/commerce-sdk-react'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+
+jest.mock('@salesforce/pwa-kit-runtime/utils/ssr-config', () => ({
+    getConfig: jest.fn(() => mockConfig)
+}))
 
 const mockMergedBasket = {
     basketId: 'a10ff320829cb0eef93ca5310a',
@@ -45,14 +50,13 @@ const MockedComponent = () => {
     )
 }
 
-let mockRouteMatchPath = '/passwordless-login-landing'
+const mockUseRouteMatch = jest.fn(() => ({path: '/'}))
 
 jest.mock('react-router', () => {
+    const original = jest.requireActual('react-router')
     return {
-        ...jest.requireActual('react-router'),
-        useRouteMatch: () => {
-            return {path: mockRouteMatchPath}
-        }
+        ...original,
+        useRouteMatch: () => mockUseRouteMatch()
     }
 })
 
@@ -74,7 +78,14 @@ jest.mock('@salesforce/commerce-sdk-react', () => {
 
 // Set up and clean up
 beforeEach(() => {
-    mockRouteMatchPath = '/passwordless-login-landing'
+    jest.clearAllMocks()
+    getConfig.mockReturnValue(mockConfig)
+
+    // Reset useRouteMatch mock to return path based on window.location.pathname
+    mockUseRouteMatch.mockImplementation(() => ({
+        path: typeof window !== 'undefined' && window.location ? window.location.pathname : '/'
+    }))
+
     global.server.use(
         rest.post('*/customers', (req, res, ctx) => {
             return res(ctx.delay(0), ctx.status(200), ctx.json(mockedRegisteredCustomer))
@@ -95,12 +106,32 @@ beforeEach(() => {
         })
     )
 })
-afterEach(() => {
-    jest.resetModules()
-    jest.clearAllMocks()
-})
 
 describe('Passwordless landing tests', function () {
+    test('does not run passwordless login when landing path does not match', async () => {
+        const token = '11111111'
+        const invalidLoginPath = '/invalid-passwordless-login-landing'
+
+        window.history.pushState(
+            {},
+            'Passwordless Login Landing',
+            createPathWithDefaults(`${invalidLoginPath}?token=${token}`)
+        )
+        renderWithProviders(<MockedComponent />, {
+            wrapperProps: {
+                siteAlias: 'uk',
+                locale: {id: 'en-GB'},
+                appConfig: mockConfig.app
+            }
+        })
+
+        await waitFor(() => {
+            expect(
+                mockAuthHelperFunctions[AuthHelpers.LoginPasswordlessUser].mutateAsync
+            ).not.toHaveBeenCalled()
+        })
+    })
+
     test('redirects to account page when redirect url is not passed', async () => {
         const token = '12345678'
         window.history.pushState(
@@ -156,33 +187,75 @@ describe('Passwordless landing tests', function () {
         })
     })
 
-    test('redirects to account page with correct locale when path includes locale', async () => {
-        const token = '12345678'
-        const localizedPath = '/us/en-CA/passwordless-login-landing'
-        mockRouteMatchPath = localizedPath
-
+    test('detects landing path when at the end of path', async () => {
+        const token = '33333333'
+        const loginPath = '/global/en-GB/passwordless-login-landing'
+        // mockRouteMatch.mockReturnValue({path: loginPath})
         window.history.pushState(
             {},
             'Passwordless Login Landing',
-            `${localizedPath}?token=${token}`
+            createPathWithDefaults(`${loginPath}?token=${token}`)
         )
-
         renderWithProviders(<MockedComponent />, {
             wrapperProps: {
-                siteAlias: 'us',
-                locale: {id: 'en-CA'},
+                siteAlias: 'global',
+                locale: {id: 'en-GB'},
                 appConfig: mockConfig.app
             }
         })
 
+        await waitFor(() => {
+            expect(
+                mockAuthHelperFunctions[AuthHelpers.LoginPasswordlessUser].mutateAsync
+            ).toHaveBeenCalledWith({
+                pwdlessLoginToken: token
+            })
+        })
+
         expect(
             mockAuthHelperFunctions[AuthHelpers.LoginPasswordlessUser].mutateAsync
         ).toHaveBeenCalledWith({
             pwdlessLoginToken: token
         })
+    })
 
-        await waitFor(() => {
-            expect(window.location.pathname).toBe('/us/en-CA/account')
+    test('landing path changes based on config', async () => {
+        const token = '44444444'
+        const customLandingPath = '/custom-passwordless-login-landing'
+        const mockConfigWithCustomLandingPath = {
+            ...mockConfig,
+            app: {
+                ...mockConfig.app,
+                login: {
+                    ...mockConfig.app.login,
+                    passwordless: {
+                        ...mockConfig.app.login.passwordless,
+                        enabled: true,
+                        landingPath: customLandingPath
+                    }
+                }
+            }
+        }
+
+        getConfig.mockReturnValue(mockConfigWithCustomLandingPath)
+
+        window.history.pushState(
+            {},
+            'Passwordless Login Landing',
+            createPathWithDefaults(`${customLandingPath}?token=${token}`)
+        )
+        renderWithProviders(<MockedComponent />, {
+            wrapperProps: {
+                siteAlias: 'uk',
+                locale: {id: 'en-GB'},
+                appConfig: mockConfigWithCustomLandingPath.app
+            }
+        })
+
+        expect(
+            mockAuthHelperFunctions[AuthHelpers.LoginPasswordlessUser].mutateAsync
+        ).toHaveBeenCalledWith({
+            pwdlessLoginToken: token
         })
     })
 })

packages/template-retail-react-app/app/pages/reset-password/index.jsx

@@ -20,7 +20,6 @@ import {useLocation} from 'react-router-dom'
 import {useRouteMatch} from 'react-router'
 import {usePasswordReset} from '@salesforce/retail-react-app/app/hooks/use-password-reset'
 import {
-    RESET_PASSWORD_LANDING_PATH,
     API_ERROR_MESSAGE,
     FEATURE_UNAVAILABLE_ERROR_MESSAGE
 } from '@salesforce/retail-react-app/app/constants'
@@ -33,7 +32,7 @@ const ResetPassword = () => {
     const dataCloud = useDataCloud()
     const {pathname} = useLocation()
     const {path} = useRouteMatch()
-    const {getPasswordResetToken} = usePasswordReset()
+    const {getPasswordResetToken, resetPasswordLandingPath} = usePasswordReset()
 
     const submitForm = async ({email}) => {
         try {
@@ -71,7 +70,7 @@ const ResetPassword = () => {
                 marginBottom={8}
                 borderRadius="base"
             >
-                {path === RESET_PASSWORD_LANDING_PATH ? (
+                {path.endsWith(resetPasswordLandingPath) ? (
                     <ResetPasswordLanding />
                 ) : (
                     <ResetPasswordForm

packages/template-retail-react-app/app/pages/reset-password/index.test.jsx

@@ -14,6 +14,16 @@ import {
 import ResetPassword from '.'
 import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
 
+const mockUseRouteMatch = jest.fn(() => ({path: '/'}))
+
+jest.mock('react-router', () => {
+    const original = jest.requireActual('react-router')
+    return {
+        ...original,
+        useRouteMatch: () => mockUseRouteMatch()
+    }
+})
+
 const MockedComponent = () => {
     return (
         <div>
@@ -24,7 +34,10 @@ const MockedComponent = () => {
 
 // Set up and clean up
 beforeEach(() => {
-    jest.resetModules()
+    // Reset useRouteMatch mock to return path based on window.location.pathname
+    mockUseRouteMatch.mockImplementation(() => ({
+        path: typeof window !== 'undefined' && window.location ? window.location.pathname : '/'
+    }))
     window.history.pushState({}, 'Reset Password', createPathWithDefaults('/reset-password'))
 })
 afterEach(() => {
@@ -75,3 +88,20 @@ test('Allows customer to generate password token', async () => {
         expect(window.location.pathname).toBe('/uk/en-GB/login')
     })
 })
+
+test.each([
+    ['base path', '/reset-password-landing'],
+    ['path with site and locale', '/uk/en-GB/reset-password-landing']
+])('renders reset password landing page when using %s', async (_, landingPath) => {
+    window.history.pushState({}, 'Reset Password', createPathWithDefaults(landingPath))
+
+    // render our test component
+    renderWithProviders(<MockedComponent />, {
+        wrapperProps: {siteAlias: 'uk', appConfig: mockConfig.app}
+    })
+
+    // check if the landing page is rendered
+    await waitFor(() => {
+        expect(screen.getByText(/confirm new password/i)).toBeInTheDocument()
+    })
+})