Merge pull request #3611 from SalesforceCommerceCloud/W-20224220-passkey-in-auth-modal

@W-20224220 Passkey login in auth modal and login page

Author: jeremy-jung1

packages/template-retail-react-app/app/components/forms/useLoginFields.jsx

@@ -21,7 +21,8 @@ export default function useLoginFields({
             placeholder: 'you@email.com',
             defaultValue: '',
             type: 'email',
-            autoComplete: 'email',
+            // Include 'webauthn' for passkey autofill support
+            autoComplete: 'email webauthn',
             rules: {
                 required: formatMessage({
                     defaultMessage: 'Please enter your email address.',

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

@@ -82,7 +82,10 @@ describe('OtpAuth', () => {
         mockGetUsidWhenReady.mockResolvedValue('mock-usid-12345')
         mockGetEncUserIdWhenReady.mockResolvedValue('mock-enc-user-id')
         mockUseCurrentCustomer.mockReturnValue({
-            data: null // Default to guest user
+            data: {
+                customerId: 'mock-customer-id',
+                customerType: 'guest'
+            }
         })
 
         jest.clearAllMocks()
@@ -505,7 +508,12 @@ describe('OtpAuth', () => {
 
     describe('Einstein Tracking - Privacy-Compliant User Identification', () => {
         test('uses USID for guest users when DNT is disabled', async () => {
-            mockUseCurrentCustomer.mockReturnValue({data: null})
+            mockUseCurrentCustomer.mockReturnValue({
+                data: {
+                    customerId: 'guest-customer-id',
+                    customerType: 'guest'
+                }
+            })
 
             renderWithProviders(
                 <OtpAuth

packages/template-retail-react-app/app/components/passkey-registration-modal/index.test.js

@@ -6,11 +6,14 @@
  */
 import React from 'react'
 import {screen, waitFor} from '@testing-library/react'
-import PasskeyRegistrationModal from '@salesforce/retail-react-app/app/components/passkey-registration-modal/index'
 import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
 import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
 import {rest} from 'msw'
 
+// Unmock the component so we can test it
+jest.unmock('@salesforce/retail-react-app/app/components/passkey-registration-modal')
+import PasskeyRegistrationModal from '@salesforce/retail-react-app/app/components/passkey-registration-modal/index'
+
 // Mock Commerce SDK hooks
 const mockMutateAsync = jest.fn()
 const mockUseAuthHelper = jest.fn()
@@ -78,6 +81,23 @@ describe('PasskeyRegistrationModal', () => {
             create: jest.fn()
         }
 
+        // Mock PublicKeyCredential API
+        global.PublicKeyCredential = {
+            parseCreationOptionsFromJSON: jest.fn((options) => ({
+                challenge: new Uint8Array([1, 2, 3]),
+                rp: {name: 'Test RP', id: 'example.com'},
+                user: {
+                    id: new Uint8Array([4, 5, 6]),
+                    name: 'test@example.com',
+                    displayName: 'Test User'
+                },
+                pubKeyCredParams: [{type: 'public-key', alg: -7}],
+                ...options
+            })),
+            isUserVerifyingPlatformAuthenticatorAvailable: jest.fn().mockResolvedValue(true),
+            isConditionalMediationAvailable: jest.fn().mockResolvedValue(true)
+        }
+
         // Mock product API calls that may be triggered by components in the provider tree
         global.server.use(
             rest.get('*/products*', (req, res, ctx) => {
@@ -86,6 +106,10 @@ describe('PasskeyRegistrationModal', () => {
         )
     })
 
+    afterEach(() => {
+        delete global.PublicKeyCredential
+    })
+
     describe('Rendering', () => {
         test('renders modal when isOpen is true', () => {
             renderWithProviders(<PasskeyRegistrationModal isOpen={true} onClose={mockOnClose} />, {

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

@@ -42,6 +42,7 @@ import {usePasswordReset} from '@salesforce/retail-react-app/app/hooks/use-passw
 import {isServer} from '@salesforce/retail-react-app/app/utils/utils'
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
 import {usePasskeyRegistration} from '@salesforce/retail-react-app/app/hooks/use-passkey-registration'
+import {usePasskeyLogin} from '@salesforce/retail-react-app/app/hooks/use-passkey-login'
 import {absoluteUrl} from '@salesforce/retail-react-app/app/utils/url'
 import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
 
@@ -72,7 +73,7 @@ export const AuthModal = ({
     const customerId = useCustomerId()
     const {isRegistered, customerType} = useCustomerType()
     const prevAuthType = usePrevious(customerType)
-
+    const {loginWithPasskey} = usePasskeyLogin()
     const customer = useCustomer(
         {parameters: {customerId}},
         {enabled: !!customerId && isRegistered}
@@ -207,6 +208,10 @@ export const AuthModal = ({
         if (isOpen) {
             setCurrentView(initialView)
             form.reset()
+            // Prompt user to login without username (discoverable credentials)
+            loginWithPasskey().catch((error) => {
+                // TODO W-21056536: Add error message handling
+            })
         }
     }, [isOpen])
 
@@ -381,7 +386,7 @@ AuthModal.propTypes = {
  */
 export const useAuthModal = (initialView = LOGIN_VIEW) => {
     const {isOpen, onOpen, onClose} = useDisclosure()
-    const {passwordless = {}, social = {}} = getConfig().app.login || {}
+    const {passwordless = {}, social = {}, passkey = {}} = getConfig().app.login || {}
 
     return {
         initialView,