Fix potential race condition bug in pwless login

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

@@ -15,7 +15,7 @@
 - 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)
 - Support Standard Products [2697](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2697)
-
+- Fix passwordless race conditions in checkout contact info form [#2758](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2758)
 
 ## v6.1.0 (May 22, 2025)
 
@@ -453,4 +453,4 @@ The versions published below were not published on npm, and the versioning match
 
 ### v1.0.0 (Sep 08, 2021)
 
-- PWA Kit General Availability and open source. 🎉
+- PWA Kit General Availability and open source. 🎉

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

@@ -22,8 +22,7 @@ const LoginForm = ({
     form,
     isPasswordlessEnabled = false,
     isSocialEnabled = false,
-    idps = [],
-    setLoginType
+    idps = []
 }) => {
     return (
         <Fragment>
@@ -57,7 +56,6 @@ const LoginForm = ({
                             handlePasswordlessLoginClick={handlePasswordlessLoginClick}
                             isSocialEnabled={isSocialEnabled}
                             idps={idps}
-                            setLoginType={setLoginType}
                         />
                     ) : (
                         <StandardLogin
@@ -96,8 +94,7 @@ LoginForm.propTypes = {
     form: PropTypes.object,
     isPasswordlessEnabled: PropTypes.bool,
     isSocialEnabled: PropTypes.bool,
-    idps: PropTypes.arrayOf(PropTypes.string),
-    setLoginType: PropTypes.func
+    idps: PropTypes.arrayOf(PropTypes.string)
 }
 
 export default LoginForm

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

@@ -9,12 +9,34 @@ import {screen} from '@testing-library/react'
 import LoginForm from '@salesforce/retail-react-app/app/components/login/index'
 import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
 import {useForm} from 'react-hook-form'
+import PropTypes from 'prop-types'
 
 const WrapperComponent = ({...props}) => {
     const form = useForm()
     return <LoginForm form={form} {...props} />
 }
 
+const WrapperComponentWithValidation = ({...props}) => {
+    const form = useForm()
+    const handlePasswordlessLoginClick = async (e) => {
+        const isValid = await form.trigger('email')
+        if (!isValid) {
+            return
+        }
+        props.handlePasswordlessLoginClick?.(e)
+    }
+    return (
+        <LoginForm
+            form={form}
+            {...props}
+            handlePasswordlessLoginClick={handlePasswordlessLoginClick}
+        />
+    )
+}
+WrapperComponentWithValidation.propTypes = {
+    handlePasswordlessLoginClick: PropTypes.func
+}
+
 describe('LoginForm', () => {
     describe('isPasswordlessEnabled is enabled', () => {
         test('renders passwordless login form', () => {
@@ -33,7 +55,7 @@ describe('LoginForm', () => {
         test('renders form errors when "Continue Securely" button is clicked', async () => {
             const mockPasswordlessLoginClick = jest.fn()
             const {user} = renderWithProviders(
-                <WrapperComponent
+                <WrapperComponentWithValidation
                     isPasswordlessEnabled={true}
                     handlePasswordlessLoginClick={mockPasswordlessLoginClick}
                 />
@@ -44,10 +66,7 @@ describe('LoginForm', () => {
         })
 
         test('renders form errors when "Password" button is clicked', async () => {
-            const mockSetLoginType = jest.fn()
-            const {user} = renderWithProviders(
-                <WrapperComponent isPasswordlessEnabled={true} setLoginType={mockSetLoginType} />
-            )
+            const {user} = renderWithProviders(<WrapperComponent isPasswordlessEnabled={true} />)
 
             await user.click(screen.getByRole('button', {name: 'Password'}))
             expect(screen.getByText(/Please enter your email address./)).toBeInTheDocument()

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

@@ -12,20 +12,17 @@ import {Button, Divider, Stack, Text} from '@salesforce/retail-react-app/app/com
 import LoginFields from '@salesforce/retail-react-app/app/components/forms/login-fields'
 import StandardLogin from '@salesforce/retail-react-app/app/components/standard-login'
 import SocialLogin from '@salesforce/retail-react-app/app/components/social-login'
-import {LOGIN_TYPES} from '@salesforce/retail-react-app/app/constants'
 
 const PasswordlessLogin = ({
     form,
     handleForgotPasswordClick,
     handlePasswordlessLoginClick,
     isSocialEnabled = false,
-    idps = [],
-    setLoginType
+    idps = []
 }) => {
     const [showPasswordView, setShowPasswordView] = useState(false)
 
     const handlePasswordButton = async (e) => {
-        setLoginType(LOGIN_TYPES.PASSWORD)
         const isValid = await form.trigger()
         // Manually trigger the browser native form validations
         const domForm = e.target.closest('form')
@@ -47,9 +44,9 @@ const PasswordlessLogin = ({
                         handleForgotPasswordClick={handleForgotPasswordClick}
                     />
                     <Button
-                        type="submit"
-                        onClick={() => {
-                            handlePasswordlessLoginClick()
+                        type="button"
+                        onClick={(e) => {
+                            handlePasswordlessLoginClick(e)
                             form.clearErrors('global')
                         }}
                         isLoading={form.formState.isSubmitting}
@@ -102,8 +99,7 @@ PasswordlessLogin.propTypes = {
     handlePasswordlessLoginClick: PropTypes.func,
     isSocialEnabled: PropTypes.bool,
     idps: PropTypes.arrayOf(PropTypes.string),
-    hideEmail: PropTypes.bool,
-    setLoginType: PropTypes.func
+    hideEmail: PropTypes.bool
 }
 
 export default PasswordlessLogin

packages/template-retail-react-app/app/components/passwordless-login/index.test.js

@@ -31,8 +31,7 @@ describe('PasswordlessLogin component', () => {
     })
 
     test('renders password input after "Password" button is clicked', async () => {
-        const mockSetLoginType = jest.fn()
-        const {user} = renderWithProviders(<WrapperComponent setLoginType={mockSetLoginType} />)
+        const {user} = renderWithProviders(<WrapperComponent />)
 
         await user.type(screen.getByLabelText('Email'), 'myemail@test.com')
         await user.click(screen.getByRole('button', {name: 'Password'}))
@@ -42,8 +41,7 @@ describe('PasswordlessLogin component', () => {
     })
 
     test('stays on page when email field has form validation errors after the "Password" button is clicked', async () => {
-        const mockSetLoginType = jest.fn()
-        const {user} = renderWithProviders(<WrapperComponent setLoginType={mockSetLoginType} />)
+        const {user} = renderWithProviders(<WrapperComponent />)
 
         await user.type(screen.getByLabelText('Email'), 'badEmail')
         await user.click(screen.getByRole('button', {name: 'Password'}))

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/hooks/use-auth-modal.js

@@ -35,7 +35,6 @@ import {
     API_ERROR_MESSAGE,
     CREATE_ACCOUNT_FIRST_ERROR_MESSAGE,
     FEATURE_UNAVAILABLE_ERROR_MESSAGE,
-    LOGIN_TYPES,
     PASSWORDLESS_ERROR_MESSAGES,
     USER_NOT_FOUND_ERROR
 } from '@salesforce/retail-react-app/app/constants'
@@ -88,8 +87,6 @@ export const AuthModal = ({
     const register = useAuthHelper(AuthHelpers.Register)
     const appOrigin = useAppOrigin()
 
-    const [loginType, setLoginType] = useState(LOGIN_TYPES.PASSWORD)
-    const [passwordlessLoginEmail, setPasswordlessLoginEmail] = useState(initialEmail)
     const {getPasswordResetToken} = usePasswordReset()
     const authorizePasswordlessLogin = useAuthHelper(AuthHelpers.AuthorizePasswordless)
     const passwordlessConfigCallback = getConfig().app.login?.passwordless?.callbackURI
@@ -103,66 +100,72 @@ export const AuthModal = ({
     )
     const mergeBasket = useShopperBasketsMutation('mergeBasket')
 
+    const handlePasswordlessLogin = async (email) => {
+        try {
+            const redirectPath = window.location.pathname + (window.location.search || '')
+            await authorizePasswordlessLogin.mutateAsync({
+                userid: email,
+                callbackURI: `${callbackURL}?redirectUrl=${redirectPath}`
+            })
+            setCurrentView(EMAIL_VIEW)
+        } catch (error) {
+            const message = USER_NOT_FOUND_ERROR.test(error.message)
+                ? formatMessage(CREATE_ACCOUNT_FIRST_ERROR_MESSAGE)
+                : PASSWORDLESS_ERROR_MESSAGES.some((msg) => msg.test(error.message))
+                ? formatMessage(FEATURE_UNAVAILABLE_ERROR_MESSAGE)
+                : formatMessage(API_ERROR_MESSAGE)
+            form.setError('global', {type: 'manual', message})
+        }
+    }
+
+    const onPasswordlessLoginClick = async (e) => {
+        const isValid = await form.trigger('email')
+        const domForm = e.target.closest('form')
+        if (isValid && domForm.checkValidity()) {
+            const email = form.getValues().email
+            await handlePasswordlessLogin(email)
+        } else {
+            domForm.reportValidity()
+        }
+    }
+
     const submitForm = async (data) => {
         form.clearErrors()
 
         const onLoginSuccess = () => {
             navigate('/account')
         }
 
-        const handlePasswordlessLogin = async (email) => {
-            try {
-                const redirectPath = window.location.pathname + window.location.search
-                await authorizePasswordlessLogin.mutateAsync({
-                    userid: email,
-                    callbackURI: `${callbackURL}?redirectUrl=${redirectPath}`
-                })
-                setCurrentView(EMAIL_VIEW)
-            } catch (error) {
-                const message = USER_NOT_FOUND_ERROR.test(error.message)
-                    ? formatMessage(CREATE_ACCOUNT_FIRST_ERROR_MESSAGE)
-                    : PASSWORDLESS_ERROR_MESSAGES.some((msg) => msg.test(error.message))
-                    ? formatMessage(FEATURE_UNAVAILABLE_ERROR_MESSAGE)
-                    : formatMessage(API_ERROR_MESSAGE)
-                form.setError('global', {type: 'manual', message})
-            }
-        }
-
         return {
             login: async (data) => {
-                if (loginType === LOGIN_TYPES.PASSWORD) {
-                    try {
-                        await login.mutateAsync({
-                            username: data.email,
-                            password: data.password
+                try {
+                    await login.mutateAsync({
+                        username: data.email,
+                        password: data.password
+                    })
+                    const hasBasketItem = baskets?.baskets?.[0]?.productItems?.length > 0
+                    // we only want to merge basket when the user is logged in as a recurring user
+                    // only recurring users trigger the login mutation, new user triggers register mutation
+                    // this logic needs to stay in this block because this is the only place that tells if a user is a recurring user
+                    // if you change logic here, also change it in login page
+                    const shouldMergeBasket = hasBasketItem && prevAuthType === 'guest'
+                    if (shouldMergeBasket) {
+                        mergeBasket.mutate({
+                            headers: {
+                                // This is not required since the request has no body
+                                // but CommerceAPI throws a '419 - Unsupported Media Type' error if this header is removed.
+                                'Content-Type': 'application/json'
+                            },
+                            parameters: {
+                                createDestinationBasket: true
+                            }
                         })
-                        const hasBasketItem = baskets?.baskets?.[0]?.productItems?.length > 0
-                        // we only want to merge basket when the user is logged in as a recurring user
-                        // only recurring users trigger the login mutation, new user triggers register mutation
-                        // this logic needs to stay in this block because this is the only place that tells if a user is a recurring user
-                        // if you change logic here, also change it in login page
-                        const shouldMergeBasket = hasBasketItem && prevAuthType === 'guest'
-                        if (shouldMergeBasket) {
-                            mergeBasket.mutate({
-                                headers: {
-                                    // This is not required since the request has no body
-                                    // but CommerceAPI throws a '419 - Unsupported Media Type' error if this header is removed.
-                                    'Content-Type': 'application/json'
-                                },
-                                parameters: {
-                                    createDestinationBasket: true
-                                }
-                            })
-                        }
-                    } catch (error) {
-                        const message = /Unauthorized/i.test(error.message)
-                            ? formatMessage(LOGIN_ERROR)
-                            : formatMessage(API_ERROR_MESSAGE)
-                        form.setError('global', {type: 'manual', message})
                     }
-                } else if (loginType === LOGIN_TYPES.PASSWORDLESS) {
-                    setPasswordlessLoginEmail(data.email)
-                    await handlePasswordlessLogin(data.email)
+                } catch (error) {
+                    const message = /Unauthorized/i.test(error.message)
+                        ? formatMessage(LOGIN_ERROR)
+                        : formatMessage(API_ERROR_MESSAGE)
+                    form.setError('global', {type: 'manual', message})
                 }
             },
             register: async (data) => {
@@ -198,15 +201,15 @@ export const AuthModal = ({
                 }
             },
             email: async () => {
-                await handlePasswordlessLogin(passwordlessLoginEmail)
+                const email = form.getValues().email || initialEmail
+                await handlePasswordlessLogin(email)
             }
         }[currentView](data)
     }
 
     // Reset form and local state when opening the modal
     useEffect(() => {
         if (isOpen) {
-            setLoginType(LOGIN_TYPES.PASSWORD)
             setCurrentView(initialView)
             form.reset()
         }
@@ -223,15 +226,14 @@ export const AuthModal = ({
         fieldsRef?.[initialField]?.ref.focus()
     }, [form.control?.fieldsRef?.current])
 
-    // Clear form state when changing views
     useEffect(() => {
-        form.reset()
+        // we don't want to reset the form on email view
+        // because we want to pass the email to PasswordlessEmailConfirmation
+        if (currentView !== EMAIL_VIEW) {
+            form.reset()
+        }
     }, [currentView])
 
-    useEffect(() => {
-        setPasswordlessLoginEmail(initialEmail)
-    }, [initialEmail])
-
     useEffect(() => {
         // Lets determine if the user has either logged in, or registed.
         const loggingIn = currentView === LOGIN_VIEW
@@ -304,14 +306,11 @@ export const AuthModal = ({
                             form={form}
                             submitForm={submitForm}
                             clickCreateAccount={() => setCurrentView(REGISTER_VIEW)}
-                            handlePasswordlessLoginClick={() =>
-                                setLoginType(LOGIN_TYPES.PASSWORDLESS)
-                            }
+                            handlePasswordlessLoginClick={onPasswordlessLoginClick}
                             handleForgotPasswordClick={() => setCurrentView(PASSWORD_VIEW)}
                             isPasswordlessEnabled={isPasswordlessEnabled}
                             isSocialEnabled={isSocialEnabled}
                             idps={idps}
-                            setLoginType={setLoginType}
                         />
                     )}
                     {!form.formState.isSubmitSuccessful && currentView === REGISTER_VIEW && (
@@ -332,7 +331,7 @@ export const AuthModal = ({
                         <PasswordlessEmailConfirmation
                             form={form}
                             submitForm={submitForm}
-                            email={passwordlessLoginEmail}
+                            email={form.getValues().email || initialEmail}
                         />
                     )}
                 </ModalBody>