Enhance usePasskeyLogin hook to handle specific error responses gracefully, including early returns for 412 status. Improve passkey authentication error handling by adding console error logging in AuthModal and Login components.

Author: hajinsuha1

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

@@ -242,6 +242,7 @@ export const AuthModal = ({
             loginWithPasskey().catch((error) => {
                 const message = formatMessage(getPasskeyAuthenticateErrorMessage(error))
                 form.setError('global', {type: 'manual', message})
+                console.error('Error authenticating passkey:', error)
             })
         }
     }, [isOpen])

packages/template-retail-react-app/app/hooks/use-passkey-login.js

@@ -39,9 +39,17 @@ export const usePasskeyLogin = () => {
             return
         }
 
-        const startWebauthnAuthenticationResponse = await startWebauthnAuthentication.mutateAsync(
-            {}
-        )
+        let startWebauthnAuthenticationResponse
+        try {
+            startWebauthnAuthenticationResponse = await startWebauthnAuthentication.mutateAsync({})
+        } catch (error) {
+            // 412 is returned when user attempts to authenticate within 1 minute of a previous attempt
+            // We return early in this case to avoid showing an error to the user
+            if (error.response?.status === 412) {
+                return
+            }
+            throw error
+        }
 
         // Transform response for WebAuthn API to send to navigator.credentials.get()
         // https://developer.mozilla.org/en-US/docs/Web/API/PublicKeyCredential/parseRequestOptionsFromJSON_static

packages/template-retail-react-app/app/hooks/use-passkey-login.test.js

@@ -7,11 +7,13 @@
 import React from 'react'
 import {rest} from 'msw'
 import {fireEvent, screen, waitFor} from '@testing-library/react'
-import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import {
+    renderWithProviders,
+    registerUserToken
+} from '@salesforce/retail-react-app/app/utils/test-utils'
 import {usePasskeyLogin} from '@salesforce/retail-react-app/app/hooks/use-passkey-login'
 import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
-import {registerUserToken} from '@salesforce/retail-react-app/app/utils/test-utils'
 
 const mockCredential = {
     id: 'test-credential-id',
@@ -78,9 +80,16 @@ const mockParseRequestOptionsFromJSON = jest.fn()
 
 const MockComponent = () => {
     const {loginWithPasskey} = usePasskeyLogin()
+    const [result, setResult] = React.useState(null)
+    const handleClick = () => {
+        loginWithPasskey()
+            .then(() => setResult('resolved'))
+            .catch(() => setResult('rejected'))
+    }
     return (
         <div>
-            <button data-testid="login-with-passkey" onClick={() => loginWithPasskey()} />
+            <button data-testid="login-with-passkey" onClick={handleClick} />
+            {result && <span data-testid="login-result">{result}</span>}
         </div>
     )
 }
@@ -261,26 +270,90 @@ describe('usePasskeyLogin', () => {
     })
 
     test('returns early without error when NotAllowedError is thrown from navigator.credentials.get', async () => {
-        // Create a NotAllowedError (typically thrown when user cancels passkey login)
+        // Create a NotAllowedError (thrown when user cancels passkey login)
         const notAllowedError = new Error('User cancelled')
         notAllowedError.name = 'NotAllowedError'
-
-        // Mock navigator.credentials.get to throw NotAllowedError
         mockGetCredentials.mockRejectedValue(notAllowedError)
 
         renderWithProviders(<MockComponent />)
 
         const trigger = screen.getByTestId('login-with-passkey')
+        fireEvent.click(trigger)
+
+        await waitFor(() => expect(mockGetCredentials).toHaveBeenCalled())
+        await waitFor(() =>
+            expect(screen.getByTestId('login-result')).toHaveTextContent('resolved')
+        )
+    })
+
+    test('returns early without error when 412 is returned from startWebauthnAuthentication', async () => {
+        global.server.use(
+            rest.post('*/oauth2/webauthn/authenticate/start', (req, res, ctx) => {
+                return res(
+                    ctx.delay(0),
+                    ctx.status(412),
+                    ctx.json({message: 'Authenticate not started for: user@example.com"'})
+                )
+            })
+        )
 
-        // Click the button - should not throw an error even though NotAllowedError is thrown
+        renderWithProviders(<MockComponent />)
+
+        const trigger = screen.getByTestId('login-with-passkey')
         fireEvent.click(trigger)
 
-        // Wait for navigator.credentials.get to be called
-        await waitFor(() => {
-            expect(mockGetCredentials).toHaveBeenCalled()
-        })
+        expect(mockGetCredentials).not.toHaveBeenCalled()
+        await waitFor(() =>
+            expect(screen.getByTestId('login-result')).toHaveTextContent('resolved')
+        )
+    })
+
+    test('throws error when other error is returned from startWebauthnAuthentication', async () => {
+        global.server.use(
+            rest.post('*/oauth2/webauthn/authenticate/start', (req, res, ctx) => {
+                return res(ctx.delay(0), ctx.status(500), ctx.json({message: '500 Error'}))
+            })
+        )
 
-        // Verify that no error message is displayed
-        expect(screen.queryByText('Something went wrong. Try again!')).not.toBeInTheDocument()
+        renderWithProviders(<MockComponent />)
+
+        const trigger = screen.getByTestId('login-with-passkey')
+        fireEvent.click(trigger)
+
+        await waitFor(() =>
+            expect(screen.getByTestId('login-result')).toHaveTextContent('rejected')
+        )
+    })
+
+    test('throws error when other error is returned from finishWebauthnAuthentication', async () => {
+        global.server.use(
+            rest.post('*/oauth2/webauthn/authenticate/finish', (req, res, ctx) => {
+                return res(ctx.delay(0), ctx.status(500), ctx.json({message: '500 Error'}))
+            })
+        )
+
+        renderWithProviders(<MockComponent />)
+
+        const trigger = screen.getByTestId('login-with-passkey')
+        fireEvent.click(trigger)
+
+        await waitFor(() =>
+            expect(screen.getByTestId('login-result')).toHaveTextContent('rejected')
+        )
+    })
+
+    test('throws error when other error is returned from navigator.credentials.get', async () => {
+        const networkError = new Error('NetworkError')
+        networkError.name = 'NetworkError'
+        mockGetCredentials.mockRejectedValue(networkError)
+
+        renderWithProviders(<MockComponent />)
+
+        const trigger = screen.getByTestId('login-with-passkey')
+        fireEvent.click(trigger)
+
+        await waitFor(() =>
+            expect(screen.getByTestId('login-result')).toHaveTextContent('rejected')
+        )
     })
 })

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

@@ -193,9 +193,9 @@ const Login = ({initialView = LOGIN_VIEW}) => {
 
     useEffect(() => {
         loginWithPasskey().catch((error) => {
-            console.error('Error authenticating passkey:', error)
             const message = formatMessage(getPasskeyAuthenticateErrorMessage(error))
             form.setError('global', {type: 'manual', message})
+            console.error('Error authenticating passkey:', error)
         })
     }, [])
 

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

@@ -2091,6 +2091,12 @@
       "value": "Invalid token, please try again."
     }
   ],
+  "global.error.passkey_feature_unavailable": [
+    {
+      "type": 0,
+      "value": "The passkey feature is currently unavailable"
+    }
+  ],
   "global.error.something_went_wrong": [
     {
       "type": 0,
@@ -3255,18 +3261,6 @@
       "value": "Register Passkey"
     }
   ],
-  "passkey_registration.modal.error.authorize_failed": [
-    {
-      "type": 0,
-      "value": "Failed to authorize passkey registration"
-    }
-  ],
-  "passkey_registration.modal.error.registration_failed": [
-    {
-      "type": 0,
-      "value": "Failed to register passkey"
-    }
-  ],
   "passkey_registration.modal.label.nickname": [
     {
       "type": 0,

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

@@ -2091,6 +2091,12 @@
       "value": "Invalid token, please try again."
     }
   ],
+  "global.error.passkey_feature_unavailable": [
+    {
+      "type": 0,
+      "value": "The passkey feature is currently unavailable"
+    }
+  ],
   "global.error.something_went_wrong": [
     {
       "type": 0,
@@ -3255,18 +3261,6 @@
       "value": "Register Passkey"
     }
   ],
-  "passkey_registration.modal.error.authorize_failed": [
-    {
-      "type": 0,
-      "value": "Failed to authorize passkey registration"
-    }
-  ],
-  "passkey_registration.modal.error.registration_failed": [
-    {
-      "type": 0,
-      "value": "Failed to register passkey"
-    }
-  ],
   "passkey_registration.modal.label.nickname": [
     {
       "type": 0,

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

@@ -4347,6 +4347,20 @@
       "value": "]"
     }
   ],
+  "global.error.passkey_feature_unavailable": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ŧħḗḗ ƥȧȧşşķḗḗẏ ƒḗḗȧȧŧŭŭřḗḗ īş ƈŭŭřřḗḗƞŧŀẏ ŭŭƞȧȧṽȧȧīŀȧȧƀŀḗḗ"
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
   "global.error.something_went_wrong": [
     {
       "type": 0,
@@ -6847,34 +6861,6 @@
       "value": "]"
     }
   ],
-  "passkey_registration.modal.error.authorize_failed": [
-    {
-      "type": 0,
-      "value": "["
-    },
-    {
-      "type": 0,
-      "value": "Ƒȧȧīŀḗḗḓ ŧǿǿ ȧȧŭŭŧħǿǿřīẑḗḗ ƥȧȧşşķḗḗẏ řḗḗɠīşŧřȧȧŧīǿǿƞ"
-    },
-    {
-      "type": 0,
-      "value": "]"
-    }
-  ],
-  "passkey_registration.modal.error.registration_failed": [
-    {
-      "type": 0,
-      "value": "["
-    },
-    {
-      "type": 0,
-      "value": "Ƒȧȧīŀḗḗḓ ŧǿǿ řḗḗɠīşŧḗḗř ƥȧȧşşķḗḗẏ"
-    },
-    {
-      "type": 0,
-      "value": "]"
-    }
-  ],
   "passkey_registration.modal.label.nickname": [
     {
       "type": 0,

packages/template-retail-react-app/app/utils/auth-utils.js

@@ -33,11 +33,6 @@ export const PASSKEY_FEATURE_UNAVAILABLE_ERROR_MESSAGE = defineMessage({
     id: 'global.error.passkey_feature_unavailable',
     defaultMessage: 'The passkey feature is currently unavailable'
 })
-export const PASSKEY_AUTHENTICATION_API_ERROR_MESSAGE = defineMessage({
-    id: 'global.error.passkey_api_error',
-    defaultMessage:
-        'Something went wrong while authenticating your passkey. Try again or use a different login method.'
-})
 
 // Shared error patterns for token-based auth features (passwordless login, password reset)
 const TOKEN_BASED_AUTH_FEATURE_UNAVAILABLE_ERRORS = [
@@ -137,7 +132,7 @@ export const getPasskeyAuthenticateErrorMessage = (error) => {
     if (error.response?.status === 400 || error.response?.status === 401) {
         return PASSKEY_FEATURE_UNAVAILABLE_ERROR_MESSAGE
     }
-    return PASSKEY_AUTHENTICATION_API_ERROR_MESSAGE
+    return API_ERROR_MESSAGE
 }
 
 /**

packages/template-retail-react-app/app/utils/auth-utils.test.js

@@ -18,8 +18,7 @@ import {
     getPasskeyRegistrationErrorMessage,
     TOO_MANY_LOGIN_ATTEMPTS_ERROR_MESSAGE,
     TOO_MANY_PASSWORD_RESET_ATTEMPTS_ERROR_MESSAGE,
-    PASSKEY_FEATURE_UNAVAILABLE_ERROR_MESSAGE,
-    PASSKEY_AUTHENTICATION_API_ERROR_MESSAGE
+    PASSKEY_FEATURE_UNAVAILABLE_ERROR_MESSAGE
 } from '@salesforce/retail-react-app/app/utils/auth-utils'
 
 afterEach(() => {
@@ -124,10 +123,10 @@ describe('getPasskeyAuthenticateErrorMessage', () => {
     test.each([
         [{response: {status: 400}}, PASSKEY_FEATURE_UNAVAILABLE_ERROR_MESSAGE],
         [{response: {status: 401}}, PASSKEY_FEATURE_UNAVAILABLE_ERROR_MESSAGE],
-        [{response: {status: 403}}, PASSKEY_AUTHENTICATION_API_ERROR_MESSAGE],
-        [{response: {status: 412}}, PASSKEY_AUTHENTICATION_API_ERROR_MESSAGE],
-        [{response: {status: 500}}, PASSKEY_AUTHENTICATION_API_ERROR_MESSAGE],
-        [new Error('Network Error'), PASSKEY_AUTHENTICATION_API_ERROR_MESSAGE]
+        [{response: {status: 403}}, API_ERROR_MESSAGE],
+        [{response: {status: 412}}, API_ERROR_MESSAGE],
+        [{response: {status: 500}}, API_ERROR_MESSAGE],
+        [new Error('Network Error'), API_ERROR_MESSAGE]
     ])('maps passkey error to the correct message descriptor', (error, expectedMessage) => {
         expect(getPasskeyAuthenticateErrorMessage(error)).toBe(expectedMessage)
     })

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

@@ -849,6 +849,9 @@
   "global.error.invalid_token": {
     "defaultMessage": "Invalid token, please try again."
   },
+  "global.error.passkey_feature_unavailable": {
+    "defaultMessage": "The passkey feature is currently unavailable"
+  },
   "global.error.something_went_wrong": {
     "defaultMessage": "Something went wrong. Try again!"
   },
@@ -1354,12 +1357,6 @@
   "passkey_registration.modal.button.register": {
     "defaultMessage": "Register Passkey"
   },
-  "passkey_registration.modal.error.authorize_failed": {
-    "defaultMessage": "Failed to authorize passkey registration"
-  },
-  "passkey_registration.modal.error.registration_failed": {
-    "defaultMessage": "Failed to register passkey"
-  },
   "passkey_registration.modal.label.nickname": {
     "defaultMessage": "Passkey Nickname (optional)"
   },