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

@@ -99,6 +99,7 @@ const SocialLogin = ({form, idps = []}) => {
                         return (
                             config && (
                                 <Button
+                                    key={name}
                                     onClick={() => {
                                         onSocialLoginClick(name)
                                     }}

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,38 @@ const ContactInfo = ({isSocialEnabled = false, isPasswordlessEnabled = false, id
         }
     }, [showPasswordField])
 
-    const onPasswordlessLoginClick = async () => {
-        setIsPasswordlessLoginClicked(true)
+    const onPasswordlessLoginClick = async (e) => {
+        if (e) {
+            e.preventDefault()
+            e.stopPropagation()
+        }
+        // since the pwless is no longer to through form submission flow,
+        // we need to manual validate the email value here
+        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
+        }
+
+        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
+        }
+
+        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', () => {
@@ -149,17 +150,17 @@ describe('passwordless enabled', () => {
 
     test('allows passwordless login', async () => {
         jest.spyOn(window, 'location', 'get').mockReturnValue({
-            pathname: '/checkout'
+            pathname: '/checkout',
+            origin: 'https://example.com'
         })
+
         const {user} = renderWithProviders(<ContactInfo isPasswordlessEnabled={true} />)
 
         // enter a valid email address
         await user.type(screen.getByLabelText('Email'), validEmail)
 
         // initiate passwordless login
         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
@@ -177,7 +178,7 @@ 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({

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()
                         }}

packages/template-retail-react-app/app/static/translations/compiled/en-GB.json

@@ -1181,6 +1181,18 @@
       "value": "Secure Link"
     }
   ],
+  "contact_info.error.email_invalid": [
+    {
+      "type": 0,
+      "value": "Please enter a valid email address."
+    }
+  ],
+  "contact_info.error.email_required": [
+    {
+      "type": 0,
+      "value": "Please enter your email address."
+    }
+  ],
   "contact_info.error.incorrect_username_or_password": [
     {
       "type": 0,

packages/template-retail-react-app/app/static/translations/compiled/en-US.json

@@ -1181,6 +1181,18 @@
       "value": "Secure Link"
     }
   ],
+  "contact_info.error.email_invalid": [
+    {
+      "type": 0,
+      "value": "Please enter a valid email address."
+    }
+  ],
+  "contact_info.error.email_required": [
+    {
+      "type": 0,
+      "value": "Please enter your email address."
+    }
+  ],
   "contact_info.error.incorrect_username_or_password": [
     {
       "type": 0,

packages/template-retail-react-app/app/static/translations/compiled/en-XA.json

@@ -2389,6 +2389,34 @@
       "value": "]"
     }
   ],
+  "contact_info.error.email_invalid": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ƥŀḗḗȧȧşḗḗ ḗḗƞŧḗḗř ȧȧ ṽȧȧŀīḓ ḗḗḿȧȧīŀ ȧȧḓḓřḗḗşş."
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
+  "contact_info.error.email_required": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ƥŀḗḗȧȧşḗḗ ḗḗƞŧḗḗř ẏǿǿŭŭř ḗḗḿȧȧīŀ ȧȧḓḓřḗḗşş."
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
   "contact_info.error.incorrect_username_or_password": [
     {
       "type": 0,

packages/template-retail-react-app/translations/en-GB.json

@@ -454,6 +454,12 @@
   "contact_info.button.secure_link": {
     "defaultMessage": "Secure Link"
   },
+  "contact_info.error.email_invalid": {
+    "defaultMessage": "Please enter a valid email address."
+  },
+  "contact_info.error.email_required": {
+    "defaultMessage": "Please enter your email address."
+  },
   "contact_info.error.incorrect_username_or_password": {
     "defaultMessage": "Incorrect username or password, please try again."
   },

packages/template-retail-react-app/translations/en-US.json

@@ -454,6 +454,12 @@
   "contact_info.button.secure_link": {
     "defaultMessage": "Secure Link"
   },
+  "contact_info.error.email_invalid": {
+    "defaultMessage": "Please enter a valid email address."
+  },
+  "contact_info.error.email_required": {
+    "defaultMessage": "Please enter your email address."
+  },
   "contact_info.error.incorrect_username_or_password": {
     "defaultMessage": "Incorrect username or password, please try again."
   },