Refactor passkey registration and authentication error handling across components to standardize user feedback. Replace specific error messages with a generic "Something went wrong. Try again!" message. Update tests to reflect these changes and ensure consistent error handling in the UI.

hajinsuha1 · hajinsuha1 · commit 2e64f7016025 · 2026-02-19T15:35:26.000-05:00
diff --git a/packages/template-retail-react-app/app/components/passkey-registration-modal/index.jsx b/packages/template-retail-react-app/app/components/passkey-registration-modal/index.jsx
@@ -33,11 +33,13 @@ import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-cur
 // Utils
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
 import {arrayBufferToBase64Url} from '@salesforce/retail-react-app/app/utils/utils'
-import {getPasskeyRegistrationErrorMessage} from '@salesforce/retail-react-app/app/utils/auth-utils'
 
 // SDK
 import {AuthHelpers, useAuthHelper} from '@salesforce/commerce-sdk-react'
 
+// Constants
+import {API_ERROR_MESSAGE, INVALID_TOKEN_ERROR_MESSAGE} from '@salesforce/retail-react-app/app/constants'
+
 /**
  * Modal for registering a new passkey with a nickname
  */
@@ -75,9 +77,7 @@ const PasskeyRegistrationModal = ({isOpen, onClose}) => {
             setIsOtpAuthOpen(true)
         } catch (err) {
             // Set error message for the passkey registration modal
-            setError(formatMessage(getPasskeyRegistrationErrorMessage(err)))
-            // Re-throw the error to be handled by the OTP auth modal
-            throw err
+            setError(formatMessage(API_ERROR_MESSAGE))
         } finally {
             setIsLoading(false)
         }
@@ -105,18 +105,7 @@ const PasskeyRegistrationModal = ({isOpen, onClose}) => {
 
             // Step 4: navigator.credentials.create() will show a browser/system prompt
             // This may appear to hang if the user doesn't interact with the prompt
-            let credential
-            try {
-                credential = await navigator.credentials.create({
-                    publicKey
-                })
-            } catch (createError) {
-                // Handle user cancellation or other errors from the WebAuthn API
-                if (createError.name === 'NotAllowedError' || createError.name === 'AbortError') {
-                    throw new Error('Passkey registration was cancelled or timed out')
-                }
-                throw createError
-            }
+            const credential = await navigator.credentials.create({publicKey})
 
             if (!credential) {
                 throw new Error('Failed to create credential: user cancelled or operation failed')
@@ -159,10 +148,13 @@ const PasskeyRegistrationModal = ({isOpen, onClose}) => {
             return {success: true}
         } catch (err) {
             console.error('Error registering passkey:', err)
+            const message = /Unauthorized/i.test(err.message) 
+                ? formatMessage(INVALID_TOKEN_ERROR_MESSAGE)
+                : formatMessage(API_ERROR_MESSAGE)
             // Return error result for OTP component to display
             return {
                 success: false,
-                error: formatMessage(getPasskeyRegistrationErrorMessage(err))
+                error: message
             }
         } finally {
             setIsLoading(false)
diff --git a/packages/template-retail-react-app/app/components/passkey-registration-modal/index.test.js b/packages/template-retail-react-app/app/components/passkey-registration-modal/index.test.js
@@ -223,7 +223,7 @@ describe('PasskeyRegistrationModal', () => {
             await user.click(registerButton)
 
             await waitFor(() => {
-                expect(screen.getByText(errorMessage)).toBeInTheDocument()
+                expect(screen.getByText('Something went wrong. Try again!')).toBeInTheDocument()
             })
         })
 
@@ -457,7 +457,7 @@ describe('PasskeyRegistrationModal', () => {
 
             expect(result).toEqual({
                 success: false,
-                error: errorMessage
+                error: 'Something went wrong. Try again!'
             })
 
             // Verify modals are not closed on error
@@ -498,7 +498,7 @@ describe('PasskeyRegistrationModal', () => {
 
             expect(result).toEqual({
                 success: false,
-                error: 'WebAuthn API not available in this browser'
+                error: 'Something went wrong. Try again!'
             })
         })
 
@@ -537,7 +537,7 @@ describe('PasskeyRegistrationModal', () => {
 
             expect(result).toEqual({
                 success: false,
-                error: 'Passkey registration was cancelled or timed out'
+                error: 'Something went wrong. Try again!'
             })
         })
 
@@ -573,7 +573,7 @@ describe('PasskeyRegistrationModal', () => {
 
             expect(result).toEqual({
                 success: false,
-                error: 'Failed to create credential: user cancelled or operation failed'
+                error: 'Something went wrong. Try again!'
             })
         })
 
@@ -622,7 +622,7 @@ describe('PasskeyRegistrationModal', () => {
 
             expect(result).toEqual({
                 success: false,
-                error: errorMessage
+                error: 'Something went wrong. Try again!'
             })
         })
 
@@ -661,7 +661,34 @@ describe('PasskeyRegistrationModal', () => {
 
             expect(result).toEqual({
                 success: false,
-                error: 'Passkey registration was cancelled or timed out'
+                error: 'Something went wrong. Try again!'
+            })
+        })
+
+        test('returns INVALID_TOKEN_ERROR_MESSAGE when startWebauthnUserRegistration fails with Unauthorized', async () => {
+            const otpCode = '12345678'
+
+            mockStartWebauthnRegistration.mockRejectedValue(new Error('Unauthorized'))
+
+            const {user} = renderWithProviders(
+                <PasskeyRegistrationModal isOpen={true} onClose={mockOnClose} />,
+                {
+                    wrapperProps: {appConfig: mockConfig.app}
+                }
+            )
+
+            const registerButton = screen.getByText('Register Passkey')
+            await user.click(registerButton)
+
+            await waitFor(() => {
+                expect(otpVerificationHandler).toBeTruthy()
+            })
+
+            const result = await otpVerificationHandler(otpCode)
+
+            expect(result).toEqual({
+                success: false,
+                error: 'Invalid token, please try again.'
             })
         })
     })
diff --git a/packages/template-retail-react-app/app/hooks/use-auth-modal.js b/packages/template-retail-react-app/app/hooks/use-auth-modal.js
@@ -239,10 +239,8 @@ export const AuthModal = ({
             setCurrentView(initialView)
             form.reset()
             // Prompt user to login without username (discoverable credentials)
-            loginWithPasskey().catch((error) => {
-                const message = formatMessage(getPasskeyAuthenticateErrorMessage(error))
-                form.setError('global', {type: 'manual', message})
-                console.error('Error authenticating passkey:', error)
+            loginWithPasskey().catch(() => {
+                form.setError('global', {type: 'manual', message:formatMessage(API_ERROR_MESSAGE)})
             })
         }
     }, [isOpen])
diff --git a/packages/template-retail-react-app/app/hooks/use-auth-modal.test.js b/packages/template-retail-react-app/app/hooks/use-auth-modal.test.js
@@ -816,7 +816,7 @@ describe('Passkey login', () => {
         // Should show error - 401 error from WebAuthn API should be caught and converted to user-friendly message
         await waitFor(() => {
             expect(
-                screen.getByText(/This feature is not currently available./i)
+                screen.getByText(/Something went wrong. Try again!/i)
             ).toBeInTheDocument()
         })
     })
diff --git a/packages/template-retail-react-app/app/hooks/use-passkey-login.js b/packages/template-retail-react-app/app/hooks/use-passkey-login.js
@@ -71,6 +71,7 @@ export const usePasskeyLogin = () => {
             if (error.name == 'NotAllowedError') {
                 return
             }
+            console.error('Error getting passkey credential from browser:', error)
             throw error
         }
 
diff --git a/packages/template-retail-react-app/app/pages/login/index.jsx b/packages/template-retail-react-app/app/pages/login/index.jsx
@@ -34,8 +34,7 @@ import {isServer, noop} from '@salesforce/retail-react-app/app/utils/utils'
 import {
     getAuthorizePasswordlessErrorMessage,
     getLoginPasswordlessErrorMessage,
-    getPasswordlessCallbackUrl,
-    getPasskeyAuthenticateErrorMessage
+    getPasswordlessCallbackUrl
 } from '@salesforce/retail-react-app/app/utils/auth-utils'
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
 import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
@@ -192,10 +191,8 @@ const Login = ({initialView = LOGIN_VIEW}) => {
     }, [isRegistered, redirectPath])
 
     useEffect(() => {
-        loginWithPasskey().catch((error) => {
-            const message = formatMessage(getPasskeyAuthenticateErrorMessage(error))
-            form.setError('global', {type: 'manual', message})
-            console.error('Error authenticating passkey:', error)
+        loginWithPasskey().catch(() => {
+            form.setError('global', {type: 'manual', message: formatMessage(API_ERROR_MESSAGE)})
         })
     }, [])
 
diff --git a/packages/template-retail-react-app/app/pages/login/index.test.js b/packages/template-retail-react-app/app/pages/login/index.test.js
@@ -629,7 +629,7 @@ describe('Passkey login', () => {
         // Should show error - 401 error from WebAuthn API should be caught and converted to user-friendly message
         await waitFor(() => {
             expect(
-                screen.getByText(/This feature is not currently available./i)
+                screen.getByText(/Something went wrong. Try again!/i)
             ).toBeInTheDocument()
         })
     })
diff --git a/packages/template-retail-react-app/app/static/translations/compiled/en-GB.json b/packages/template-retail-react-app/app/static/translations/compiled/en-GB.json
@@ -2091,12 +2091,6 @@
       "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,
diff --git a/packages/template-retail-react-app/app/static/translations/compiled/en-US.json b/packages/template-retail-react-app/app/static/translations/compiled/en-US.json
@@ -2091,12 +2091,6 @@
       "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,
diff --git a/packages/template-retail-react-app/app/static/translations/compiled/en-XA.json b/packages/template-retail-react-app/app/static/translations/compiled/en-XA.json
@@ -4347,20 +4347,6 @@
       "value": "]"
     }
   ],
-  "global.error.passkey_feature_unavailable": [
-    {
-      "type": 0,
-      "value": "["
-    },
-    {
-      "type": 0,
-      "value": "Ŧħḗḗ ƥȧȧşşķḗḗẏ ƒḗḗȧȧŧŭŭřḗḗ īş ƈŭŭřřḗḗƞŧŀẏ ŭŭƞȧȧṽȧȧīŀȧȧƀŀḗḗ"
-    },
-    {
-      "type": 0,
-      "value": "]"
-    }
-  ],
   "global.error.something_went_wrong": [
     {
       "type": 0,
diff --git a/packages/template-retail-react-app/app/utils/auth-utils.js b/packages/template-retail-react-app/app/utils/auth-utils.js
@@ -28,12 +28,6 @@ export const TOO_MANY_PASSWORD_RESET_ATTEMPTS_ERROR_MESSAGE = defineMessage({
     id: 'global.error.too_many_password_reset_requests'
 })
 
-// Constants for Passkey authentication and registration
-export const PASSKEY_FEATURE_UNAVAILABLE_ERROR_MESSAGE = defineMessage({
-    id: 'global.error.passkey_feature_unavailable',
-    defaultMessage: 'The passkey feature is currently unavailable'
-})
-
 // Shared error patterns for token-based auth features (passwordless login, password reset)
 const TOKEN_BASED_AUTH_FEATURE_UNAVAILABLE_ERRORS = [
     /no callback_uri is registered/i,
@@ -116,40 +110,3 @@ export const getLoginPasswordlessErrorMessage = (errorMessage) => {
     }
     return API_ERROR_MESSAGE
 }
-
-/**
- * Maps errors from SLAS WebAuthn APIs to user-friendly message descriptors.
- * Used for passkey login auth helpers.
- *
- * Passkey Login:
- * - StartWebauthnAuthentication
- * - FinishWebauthnAuthentication
- *
- * @param {Error} error - The error from the API
- * @returns {Object} - The message descriptor (from defineMessage) for formatMessage
- */
-export const getPasskeyAuthenticateErrorMessage = (error) => {
-    if (error.response?.status === 400 || error.response?.status === 401) {
-        return PASSKEY_FEATURE_UNAVAILABLE_ERROR_MESSAGE
-    }
-    return API_ERROR_MESSAGE
-}
-
-/**
- * Maps errors from SLAS WebAuthn APIs to user-friendly message descriptors.
- * Used for passkey registration auth helpers.
- *
- * Passkey Registration:
- * - AuthorizeWebauthnRegistration
- * - StartWebauthnUserRegistration
- * - FinishWebauthnUserRegistration
- *
- * @param {Error} error - The error from the API
- * @returns {Object} - The message descriptor (from defineMessage) for formatMessage
- */
-export const getPasskeyRegistrationErrorMessage = (error) => {
-    if (error.response?.status === 400 || error.response?.status === 401) {
-        return PASSKEY_FEATURE_UNAVAILABLE_ERROR_MESSAGE
-    }
-    return API_ERROR_MESSAGE
-}
diff --git a/packages/template-retail-react-app/app/utils/auth-utils.test.js b/packages/template-retail-react-app/app/utils/auth-utils.test.js
@@ -14,11 +14,8 @@ import {
     getAuthorizePasswordlessErrorMessage,
     getPasswordResetErrorMessage,
     getLoginPasswordlessErrorMessage,
-    getPasskeyAuthenticateErrorMessage,
-    getPasskeyRegistrationErrorMessage,
     TOO_MANY_LOGIN_ATTEMPTS_ERROR_MESSAGE,
-    TOO_MANY_PASSWORD_RESET_ATTEMPTS_ERROR_MESSAGE,
-    PASSKEY_FEATURE_UNAVAILABLE_ERROR_MESSAGE
+    TOO_MANY_PASSWORD_RESET_ATTEMPTS_ERROR_MESSAGE
 } from '@salesforce/retail-react-app/app/utils/auth-utils'
 
 afterEach(() => {
@@ -118,27 +115,3 @@ describe('getLoginPasswordlessErrorMessage', () => {
         }
     )
 })
-
-describe('getPasskeyAuthenticateErrorMessage', () => {
-    test.each([
-        [{response: {status: 400}}, PASSKEY_FEATURE_UNAVAILABLE_ERROR_MESSAGE],
-        [{response: {status: 401}}, PASSKEY_FEATURE_UNAVAILABLE_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)
-    })
-
-    test.each([
-        [{response: {status: 400}}, PASSKEY_FEATURE_UNAVAILABLE_ERROR_MESSAGE],
-        [{response: {status: 401}}, PASSKEY_FEATURE_UNAVAILABLE_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(getPasskeyRegistrationErrorMessage(error)).toBe(expectedMessage)
-    })
-})
diff --git a/packages/template-retail-react-app/translations/en-GB.json b/packages/template-retail-react-app/translations/en-GB.json
@@ -849,9 +849,6 @@
   "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!"
   },
diff --git a/packages/template-retail-react-app/translations/en-US.json b/packages/template-retail-react-app/translations/en-US.json
@@ -849,9 +849,6 @@
   "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!"
   },

Original file line number	Diff line number	Diff line change
`@@ -71,6 +71,7 @@ export const usePasskeyLogin = () => {`
`71`	`71`	`if (error.name == 'NotAllowedError') {`
`72`	`72`	`return`
`73`	`73`	`}`
	`74`	`+ console.error('Error getting passkey credential from browser:', error)`
`74`	`75`	`throw error`
`75`	`76`	`}`
`76`	`77`
Original file line number	Diff line number	Diff line change
`@@ -2091,12 +2091,6 @@`
`2091`	`2091`	`"value": "Invalid token, please try again."`
`2092`	`2092`	`}`
`2093`	`2093`	`],`
`2094`		`- "global.error.passkey_feature_unavailable": [`
`2095`		`- {`
`2096`		`- "type": 0,`
`2097`		`- "value": "The passkey feature is currently unavailable"`
`2098`		`- }`
`2099`		`- ],`
`2100`	`2094`	`"global.error.something_went_wrong": [`
`2101`	`2095`	`{`
`2102`	`2096`	`"type": 0,`