tests

Author: jeremy-jung1

packages/template-retail-react-app/app/hooks/use-auth-modal.js

@@ -144,7 +144,12 @@ export const AuthModal = ({
                             navigate('/account')
                             return
                         } catch (error) {
-                            form.setError('global', {type: 'manual', message: formatMessage(API_ERROR_MESSAGE)})
+                            // Show error and stop - don't fall back to passwordless
+                            form.setError('global', {
+                                type: 'manual',
+                                message: formatMessage(API_ERROR_MESSAGE)
+                            })
+                            return
                         }
                     }
                     await handlePasswordlessLogin(email)
@@ -226,13 +231,14 @@ export const AuthModal = ({
             setCurrentView(initialView)
             form.reset()
             // Prompt user to login without username (discoverable credentials)
-            try {
-                loginWithPasskey()
-            } catch (error) {
-                setError(formatMessage(API_ERROR_MESSAGE))
+            if (isWebAuthnEnabled) {
+                loginWithPasskey().catch((error) => {
+                    // Silently fail passkey login, user can still use other methods
+                    console.log('Passkey login failed:', error)
+                })
             }
         }
-    }, [isOpen])
+    }, [isOpen, isWebAuthnEnabled])
 
     // Auto-focus the first field in each form view
     useEffect(() => {

packages/template-retail-react-app/app/hooks/use-auth-modal.test.js

@@ -11,7 +11,8 @@ import userEvent from '@testing-library/user-event'
 import {
     renderWithProviders,
     createPathWithDefaults,
-    guestToken
+    guestToken,
+    registerUserToken
 } from '@salesforce/retail-react-app/app/utils/test-utils'
 import {AuthModal, useAuthModal} from '@salesforce/retail-react-app/app/hooks/use-auth-modal'
 import {BrowserRouter as Router, Route} from 'react-router-dom'
@@ -20,6 +21,12 @@ import {rest} from 'msw'
 import {mockedRegisteredCustomer} from '@salesforce/retail-react-app/app/mocks/mock-data'
 import * as ReactHookForm from 'react-hook-form'
 import {AuthHelpers} from '@salesforce/commerce-sdk-react'
+import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+
+jest.mock('@salesforce/pwa-kit-runtime/utils/ssr-config', () => ({
+    getConfig: jest.fn()
+}))
 
 jest.setTimeout(60000)
 
@@ -89,6 +96,8 @@ MockedComponent.propTypes = {
 // Set up and clean up
 beforeEach(() => {
     authModal = undefined
+    // Set default config mock (passkey enabled by default in mockConfig)
+    getConfig.mockReturnValue(mockConfig)
     global.server.use(
         rest.post('*/customers', (req, res, ctx) => {
             return res(ctx.delay(0), ctx.status(200), ctx.json(mockRegisteredCustomer))
@@ -225,6 +234,17 @@ describe('Passwordless enabled', () => {
             pathname: '/',
             origin: 'https://example.com'
         })
+        // Disable passkey to test passwordless in isolation
+        getConfig.mockReturnValue({
+            ...mockConfig,
+            app: {
+                ...mockConfig.app,
+                login: {
+                    ...mockConfig.app.login,
+                    passkey: {enabled: false}
+                }
+            }
+        })
         const {user} = renderWithProviders(<MockedComponent isPasswordlessEnabled={true} />)
         const validEmail = 'test@salesforce.com'
 
@@ -274,6 +294,17 @@ describe('Passwordless enabled', () => {
             pathname: '/',
             origin: 'https://example.com'
         })
+        // Disable passkey to test passwordless in isolation
+        getConfig.mockReturnValue({
+            ...mockConfig,
+            app: {
+                ...mockConfig.app,
+                login: {
+                    ...mockConfig.app.login,
+                    passkey: {enabled: false}
+                }
+            }
+        })
         const {user} = renderWithProviders(<MockedComponent isPasswordlessEnabled={true} />)
         const validEmail = 'test@salesforce.com'
 
@@ -673,11 +704,14 @@ describe('Passkey login', () => {
         await waitFor(
             () => {
                 expect(mockStartWebauthnAuthentication).toHaveBeenCalled()
-                expect(mockFinishWebauthnAuthentication).toHaveBeenCalledWith({
-                    credential: expect.objectContaining({
-                        id: 'mock-credential-id'
+                expect(mockFinishWebauthnAuthentication).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        credential: expect.objectContaining({
+                            id: 'mock-credential-id'
+                        }),
+                        usid: expect.any(String)
                     })
-                })
+                )
             },
             {timeout: 5000}
         )
@@ -797,6 +831,12 @@ describe('Passkey login', () => {
             }
         }
 
+        // Override getConfig to return config with passkey disabled
+        getConfig.mockReturnValue({
+            ...mockConfig,
+            app: mockAppConfig
+        })
+
         const {user} = renderWithProviders(<MockedComponent />, {
             wrapperProps: {
                 appConfig: mockAppConfig,

packages/template-retail-react-app/app/hooks/use-passkey-login.js

@@ -97,7 +97,7 @@ export const usePasskeyLogin = () => {
             credential: encodedCredential,
             usid
         })
-        
+
         return
     }