Merge branch 'W-21056536-error-handling-passkey-registration-and-login' of https://github.com/SalesforceCommerceCloud/pwa-kit into W-21056536-error-handling-passkey-registration-and-login

Author: hajinsuha1

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

@@ -270,7 +270,8 @@ export const AuthModal = ({
         const isNowRegistered =
             (isOpen || isOtpAuthOpen) && isRegistered && (loggingIn || registering)
         // If the customer changed, but it's not because they logged in or registered. Do nothing.
-        if (!isNowRegistered) {
+        // Also ensure that the customer data is loaded.
+        if (!isNowRegistered || !customer.data) {
             return
         }
 
@@ -282,8 +283,7 @@ export const AuthModal = ({
         showRegisterPasskeyToast()
 
         // Show a toast only for those registed users returning to the site.
-        // Only show toast when customer data is available (user is logged in and data is loaded)
-        if (loggingIn && customer.data) {
+        if (loggingIn) {
             toast({
                 variant: 'subtle',
                 title: `${formatMessage(

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

@@ -298,12 +298,9 @@ describe('Passwordless enabled', () => {
             ).not.toBeInTheDocument()
         })
 
-        await waitFor(
-            () => {
-                expect(screen.getByText(/You're now signed in./i)).toBeInTheDocument()
-            },
-            {timeout: 5000}
-        )
+        await waitFor(() => {
+            expect(screen.getByText(/You're now signed in./i)).toBeInTheDocument()
+        })
     })
 
     test('allows passwordless login via Enter key', async () => {
@@ -923,72 +920,54 @@ describe('Passkey login', () => {
             expect(screen.queryByText(/Welcome back/i)).not.toBeInTheDocument()
         })
     })
+})
 
-    describe('Passkey Registration', () => {
-        beforeEach(() => {
-            getConfig.mockReturnValue({
-                ...mockConfig,
-                app: {
-                    ...mockConfig.app,
-                    login: {
-                        ...mockConfig.app.login,
-                        passkey: {enabled: true}
-                    }
+describe('Passkey Registration', () => {
+    beforeEach(() => {
+        getConfig.mockReturnValue({
+            ...mockConfig,
+            app: {
+                ...mockConfig.app,
+                login: {
+                    ...mockConfig.app.login,
+                    passkey: {enabled: true}
                 }
-            })
-
-            // Mock WebAuthn API
-            global.PublicKeyCredential = {
-                isUserVerifyingPlatformAuthenticatorAvailable: jest.fn().mockResolvedValue(true),
-                isConditionalMediationAvailable: jest.fn().mockResolvedValue(true)
             }
-            global.window.PublicKeyCredential = global.PublicKeyCredential
-
-            global.server.use(
-                rest.post('*/oauth2/token', (req, res, ctx) =>
-                    res(
-                        ctx.delay(0),
-                        ctx.json({
-                            customer_id: 'registeredCustomerId',
-                            access_token: registerUserToken,
-                            refresh_token: 'testrefeshtoken',
-                            usid: 'testusid',
-                            enc_user_id: 'testEncUserId',
-                            id_token: 'testIdToken'
-                        })
-                    )
-                )
-            )
         })
 
-        afterEach(() => {
-            delete global.PublicKeyCredential
-            delete global.window.PublicKeyCredential
-        })
+        // Mock WebAuthn API
+        global.PublicKeyCredential = {
+            isUserVerifyingPlatformAuthenticatorAvailable: jest.fn().mockResolvedValue(true),
+            isConditionalMediationAvailable: jest.fn().mockResolvedValue(true)
+        }
+        global.window.PublicKeyCredential = global.PublicKeyCredential
+    })
 
-        test('shows passkey registration toast after login', async () => {
-            const {user} = renderWithProviders(<MockedComponent isPasswordlessEnabled={true} />)
-            const validEmail = 'test@salesforce.com'
-            const validPassword = 'Password123!'
+    afterEach(() => {
+        delete global.PublicKeyCredential
+        delete global.window.PublicKeyCredential
+    })
 
-            const trigger = screen.getByText(/open modal/i)
-            await user.click(trigger)
+    test('shows passkey registration toast after login', async () => {
+        const {user} = renderWithProviders(<MockedComponent isPasswordlessEnabled={true} />)
+        const validEmail = 'test@salesforce.com'
+        const validPassword = 'Password123!'
 
-            await waitFor(() => {
-                expect(screen.getByText(/Continue/i)).toBeInTheDocument()
-            })
+        const trigger = screen.getByText(/open modal/i)
+        await user.click(trigger)
 
-            await user.type(screen.getByLabelText('Email'), validEmail)
-            await user.click(screen.getByText(/password/i))
-            await user.type(screen.getByLabelText('Password'), validPassword)
-            await user.keyboard('{Enter}')
+        await waitFor(() => {
+            expect(screen.getByText(/Welcome Back/i)).toBeInTheDocument()
+        })
 
-            // Create passkey toast is shown after login
-            await waitFor(() => {
-                // 2 matches are found for the toast
-                const toasts = screen.getAllByText(/Create Passkey/i)
-                expect(toasts.length).toBeGreaterThanOrEqual(1)
-            })
+        await user.type(screen.getByLabelText('Email'), validEmail)
+        await user.click(screen.getByText(/password/i))
+        await user.type(screen.getByLabelText('Password'), validPassword)
+        await user.keyboard('{Enter}')
+
+        // Create passkey toast is shown after login
+        await waitFor(() => {
+            expect(screen.getByText(/Create Passkey/i)).toBeInTheDocument()
         })
     })
 })