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 form submission [#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/passwordless-login/index.jsx

@@ -12,20 +12,19 @@ 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 noop = () => {}
 const PasswordlessLogin = ({
     form,
     handleForgotPasswordClick,
     handlePasswordlessLoginClick,
     isSocialEnabled = false,
     idps = [],
-    setLoginType
+    setLoginType = noop
 }) => {
     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')
@@ -48,8 +47,8 @@ const PasswordlessLogin = ({
                     />
                     <Button
                         type="submit"
-                        onClick={() => {
-                            handlePasswordlessLoginClick()
+                        onClick={(e) => {
+                            handlePasswordlessLoginClick(e)
                             form.clearErrors('global')
                         }}
                         isLoading={form.formState.isSubmitting}

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/constants.js

@@ -234,7 +234,6 @@ export const SHOPPER_CONTEXT_SEARCH_PARAMS = {
     }
 }
 
-// Constants for Login
 export const LOGIN_TYPES = {
     PASSWORD: 'password',
     PASSWORDLESS: 'passwordless',

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,67 @@ export const AuthModal = ({
     )
     const mergeBasket = useShopperBasketsMutation('mergeBasket')
 
-    const submitForm = async (data) => {
+    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 submitForm = async (data, isPasswordless = false) => {
         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
+                if (isPasswordless) {
+                    const email = data.email
+                    await handlePasswordlessLogin(email)
+                    return
+                }
+
+                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 +196,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 +221,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
@@ -302,16 +299,20 @@ export const AuthModal = ({
                     {!form.formState.isSubmitSuccessful && currentView === LOGIN_VIEW && (
                         <LoginForm
                             form={form}
-                            submitForm={submitForm}
+                            submitForm={(data) => {
+                                const shouldUsePasswordless =
+                                    isPasswordlessEnabled && !data.password
+                                return submitForm(data, shouldUsePasswordless)
+                            }}
                             clickCreateAccount={() => setCurrentView(REGISTER_VIEW)}
-                            handlePasswordlessLoginClick={() =>
-                                setLoginType(LOGIN_TYPES.PASSWORDLESS)
-                            }
+                            //TODO: potentially remove this prop in the next major release since
+                            // we don't need to use this props anymore
+                            handlePasswordlessLoginClick={noop}
                             handleForgotPasswordClick={() => setCurrentView(PASSWORD_VIEW)}
                             isPasswordlessEnabled={isPasswordlessEnabled}
                             isSocialEnabled={isSocialEnabled}
                             idps={idps}
-                            setLoginType={setLoginType}
+                            setLoginType={noop}
                         />
                     )}
                     {!form.formState.isSubmitSuccessful && currentView === REGISTER_VIEW && (
@@ -332,7 +333,7 @@ export const AuthModal = ({
                         <PasswordlessEmailConfirmation
                             form={form}
                             submitForm={submitForm}
-                            email={passwordlessLoginEmail}
+                            email={form.getValues().email || initialEmail}
                         />
                     )}
                 </ModalBody>