Refactor AuthModal logic and improve tests

- Simplified the condition for rendering the AuthModal by removing unnecessary checks for customer data.
- Updated the welcome message to default to 'back' if the customer's first name is not available.
- Adjusted the dependency array in the `useEffect` hook to only track `isRegistered`.
- Enhanced tests to verify modal behavior during passkey login, ensuring proper assertions for modal visibility and user sign-in confirmation.

Author: hajinsuha1

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

@@ -275,8 +275,7 @@ 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.
-        // Also ensure that the customer data is loaded.
-        if (!isNowRegistered || !customer.data) {
+        if (!isNowRegistered) {
             return
         }
 
@@ -297,7 +296,7 @@ export const AuthModal = ({
                         id: 'auth_modal.info.welcome_user'
                     },
                     {
-                        name: customer.data?.firstName || ''
+                        name: customer.data?.firstName || 'back'
                     }
                 )}`,
                 description: `${formatMessage({
@@ -318,7 +317,7 @@ export const AuthModal = ({
             // Execute action to be performed on successful registration
             onRegistrationSuccess()
         }
-    }, [isRegistered, customer.data])
+    }, [isRegistered])
 
     const onBackToSignInClick = () =>
         initialView === PASSWORD_VIEW ? onClose() : setCurrentView(LOGIN_VIEW)

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

@@ -922,11 +922,14 @@ describe('Passkey login', () => {
         await user.type(screen.getByLabelText(/^password$/i), 'Password!1')
         await user.click(screen.getByRole('button', {name: /sign in/i}))
 
-        // Wait for login to succeed and modal to close (cleanup runs and aborts passkey)
         await waitFor(
             () => {
-                expect(screen.queryByText(/welcome back/i)).not.toBeInTheDocument()
+                // Verify the passkey prompt was aborted
                 expect(capturedSignal.aborted).toBe(true)
+                // Verify the modal was closed
+                expect(screen.queryByRole('button', {name: /sign in/i})).not.toBeInTheDocument()
+                // Verify the user was signed in
+                expect(screen.getByText(/You're now signed in./i)).toBeInTheDocument()
             },
             {timeout: 3000}
         )
@@ -958,6 +961,7 @@ describe('Passkey login', () => {
         const trigger = screen.getByText(/open modal/i)
         await user.click(trigger)
 
+        // Wait for modal to open
         await waitFor(() => {
             expect(screen.getByText(/welcome back/i)).toBeInTheDocument()
         })
@@ -1030,7 +1034,8 @@ describe('Passkey login', () => {
 
         // login successfully and close the modal
         await waitFor(() => {
-            expect(screen.queryByText(/Welcome back/i)).not.toBeInTheDocument()
+            expect(screen.queryByRole('button', {name: /Sign in/i})).not.toBeInTheDocument()
+            expect(screen.getByText(/You're now signed in./i)).toBeInTheDocument()
         })
     })
 })
@@ -1062,7 +1067,11 @@ describe('Passkey Registration', () => {
     })
 
     test('shows passkey registration toast after login', async () => {
-        const {user} = renderWithProviders(<MockedComponent isPasswordlessEnabled={true} />)
+        const {user} = renderWithProviders(<MockedComponent isPasswordlessEnabled={true} />, {
+            wrapperProps: {
+                bypassAuth: false
+            }
+        })
         const validEmail = 'test@salesforce.com'
         const validPassword = 'Password123!'