Fix potential race condition bug in pwless login

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

@@ -14,7 +14,7 @@
 - Minor updates to support BOPIS E2E tests [#2716](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2716)
 - Provide support for partial hydration [#2696](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2696)
 - Show Automatic Bonus Products on Cart Page [#2704](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2704)
-
+- Fix passwordless race conditions in checkout contact info form [#2758](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2758)
 
 ## v6.1.0 (May 22, 2025)
 

packages/template-retail-react-app/app/components/social-login/index.jsx

@@ -96,21 +96,22 @@ const SocialLogin = ({form, idps = []}) => {
                         const config = IDP_CONFIG[name.toLowerCase()]
                         const Icon = config?.icon
                         const message = formatMessage(config?.message)
-                        return (
-                            config && (
-                                <Button
-                                    onClick={() => {
-                                        onSocialLoginClick(name)
-                                    }}
-                                    borderColor="gray.500"
-                                    color="blue.600"
-                                    variant="outline"
-                                >
-                                    <Icon sx={{marginRight: 2}} />
-                                    {message}
-                                </Button>
-                            )
-                        )
+                                        return (
+                    config && (
+                        <Button
+                            key={name}
+                            onClick={() => {
+                                onSocialLoginClick(name)
+                            }}
+                            borderColor="gray.500"
+                            color="blue.600"
+                            variant="outline"
+                        >
+                            <Icon sx={{marginRight: 2}} />
+                            {message}
+                        </Button>
+                    )
+                )
                     })}
             </>
         )

packages/template-retail-react-app/app/pages/checkout/partials/contact-info.jsx

@@ -107,11 +107,6 @@ const ContactInfo = ({isSocialEnabled = false, isPasswordlessEnabled = false, id
 
     const submitForm = async (data) => {
         setError(null)
-        if (isPasswordlessLoginClicked) {
-            handlePasswordlessLogin(data.email)
-            setIsPasswordlessLoginClicked(false)
-            return
-        }
         try {
             if (!data.password) {
                 await updateCustomerForBasket.mutateAsync({
@@ -166,8 +161,39 @@ const ContactInfo = ({isSocialEnabled = false, isPasswordlessEnabled = false, id
         }
     }, [showPasswordField])
 
-    const onPasswordlessLoginClick = async () => {
-        setIsPasswordlessLoginClicked(true)
+    const onPasswordlessLoginClick = async (e) => {
+        // Prevent form submission
+        if (e) {
+            e.preventDefault()
+            e.stopPropagation()
+        }
+        const email = form.getValues().email
+        if (!email) {
+            form.setError('email', {
+                type: 'manual',
+                message: formatMessage({
+                    defaultMessage: 'Please enter your email address.',
+                    id: 'contact_info.error.email_required'
+                })
+            })
+            return
+        }
+
+        // Validate email format
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+        if (!emailRegex.test(email)) {
+            form.setError('email', {
+                type: 'manual',
+                message: formatMessage({
+                    defaultMessage: 'Please enter a valid email address.',
+                    id: 'contact_info.error.email_invalid'
+                })
+            })
+            return
+        }
+
+        // Handle passwordless login directly
+        await handlePasswordlessLogin(email)
     }
 
     return (

packages/template-retail-react-app/app/pages/checkout/partials/contact-info.test.js

@@ -48,6 +48,7 @@ jest.mock('../util/checkout-context', () => {
 
 afterEach(() => {
     jest.resetModules()
+    jest.restoreAllMocks()
 })
 
 describe('passwordless and social disabled', () => {
@@ -148,9 +149,11 @@ describe('passwordless enabled', () => {
     })
 
     test('allows passwordless login', async () => {
-        jest.spyOn(window, 'location', 'get').mockReturnValue({
-            pathname: '/checkout'
+        const mockLocation = jest.spyOn(window, 'location', 'get').mockReturnValue({
+            pathname: '/checkout',
+            origin: 'https://webhook.site'
         })
+
         const {user} = renderWithProviders(<ContactInfo isPasswordlessEnabled={true} />)
 
         // enter a valid email address
@@ -160,7 +163,6 @@ describe('passwordless enabled', () => {
         const passwordlessLoginButton = screen.getByText('Secure Link')
         // Click the button twice as the isPasswordlessLoginClicked state doesn't change after the first click
         await user.click(passwordlessLoginButton)
-        await user.click(passwordlessLoginButton)
         expect(
             mockAuthHelperFunctions[AuthHelpers.AuthorizePasswordless].mutateAsync
         ).toHaveBeenCalledWith({
@@ -177,14 +179,17 @@ describe('passwordless enabled', () => {
         })
 
         // resend the email
-        user.click(screen.getByText(/Resend Link/i))
+        await user.click(screen.getByText(/Resend Link/i))
         expect(
             mockAuthHelperFunctions[AuthHelpers.AuthorizePasswordless].mutateAsync
         ).toHaveBeenCalledWith({
             userid: validEmail,
             callbackURI:
                 'https://webhook.site/27761b71-50c1-4097-a600-21a3b89a546c?redirectUrl=/checkout'
         })
+
+        // Cleanup mocks
+        mockLocation.mockRestore()
     })
 
     test('allows login using password', async () => {

packages/template-retail-react-app/app/pages/checkout/partials/login-state.jsx

@@ -37,7 +37,7 @@ const LoginState = ({
                     <Button
                         variant="outline"
                         borderColor="gray.500"
-                        type="submit"
+                        type="button"
                         onClick={() => {
                             handlePasswordlessLoginClick()
                         }}