@W-21056536 Error handling Passkey Registration and Login

packages/template-retail-react-app/app/components/passkey-registration-modal/index.jsx

@@ -37,6 +37,9 @@ import {arrayBufferToBase64Url} from '@salesforce/retail-react-app/app/utils/uti
 // 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
  */
@@ -73,13 +76,8 @@ const PasskeyRegistrationModal = ({isOpen, onClose}) => {
             onClose()
             setIsOtpAuthOpen(true)
         } catch (err) {
-            setError(
-                err.message ||
-                    formatMessage({
-                        id: 'passkey_registration.modal.error.authorize_failed',
-                        defaultMessage: 'Failed to authorize passkey registration'
-                    })
-            )
+            // Set error message for the passkey registration modal
+            setError(formatMessage(API_ERROR_MESSAGE))
         } finally {
             setIsLoading(false)
         }
@@ -105,26 +103,15 @@ const PasskeyRegistrationModal = ({isOpen, onClose}) => {
                 throw new Error('WebAuthn API not available in this browser')
             }
 
-            // navigator.credentials.create() will show a browser/system prompt
+            // 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')
             }
 
-            // Step 4: Convert credential to JSON format before sending to SLAS
+            // Step 5: Convert credential to JSON format before sending to SLAS
             // https://developer.mozilla.org/en-US/docs/Web/API/PublicKeyCredential/toJSON
             let credentialJson
             try {
@@ -147,30 +134,27 @@ const PasskeyRegistrationModal = ({isOpen, onClose}) => {
                 }
             }
 
-            // Step 5: Finish WebAuthn registration
+            // Step 6: Finish WebAuthn registration
             await finishWebauthnUserRegistration.mutateAsync({
                 username: customer.email,
                 credential: credentialJson,
                 pwd_action_token: code
             })
 
-            // Step 6: Close OTP modal and main modal on success
+            // Step 7: Close OTP modal and main modal on success
             setIsOtpAuthOpen(false)
             onClose()
 
             return {success: true}
         } catch (err) {
-            const errorMessage =
-                err.message ||
-                formatMessage({
-                    id: 'passkey_registration.modal.error.registration_failed',
-                    defaultMessage: 'Failed to register passkey'
-                })
-
+            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: errorMessage
+                error: message
             }
         } finally {
             setIsLoading(false)

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.'
             })
         })
     })

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

@@ -36,7 +36,8 @@ import {API_ERROR_MESSAGE} from '@salesforce/retail-react-app/app/constants'
 import {
     getAuthorizePasswordlessErrorMessage,
     getPasswordResetErrorMessage,
-    getLoginPasswordlessErrorMessage
+    getLoginPasswordlessErrorMessage,
+    getPasskeyAuthenticateErrorMessage
 } from '@salesforce/retail-react-app/app/utils/auth-utils'
 import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
 import {usePrevious} from '@salesforce/retail-react-app/app/hooks/use-previous'
@@ -89,7 +90,6 @@ export const AuthModal = ({
     const login = useAuthHelper(AuthHelpers.LoginRegisteredUserB2C)
     const register = useAuthHelper(AuthHelpers.Register)
     const {locale} = useMultiSite()
-    const config = getConfig()
 
     const {getPasswordResetToken} = usePasswordReset()
     const authorizePasswordlessLogin = useAuthHelper(AuthHelpers.AuthorizePasswordless)
@@ -104,7 +104,7 @@ export const AuthModal = ({
     )
     const mergeBasket = useShopperBasketsMutation('mergeBasket')
 
-    const {showToast} = usePasskeyRegistration()
+    const {showRegisterPasskeyToast} = usePasskeyRegistration()
 
     const handlePasswordlessLogin = async (email) => {
         try {
@@ -239,8 +239,8 @@ export const AuthModal = ({
             setCurrentView(initialView)
             form.reset()
             // Prompt user to login without username (discoverable credentials)
-            loginWithPasskey().catch((error) => {
-                // TODO W-21056536: Add error message handling
+            loginWithPasskey().catch(() => {
+                form.setError('global', {type: 'manual', message:formatMessage(API_ERROR_MESSAGE)})
             })
         }
     }, [isOpen])
@@ -279,23 +279,8 @@ export const AuthModal = ({
         onClose()
         setIsOtpAuthOpen(false)
 
-        if (config?.app?.login?.passkey?.enabled) {
-            // Show passkey registration modal only if Webauthn feature flag is enabled and compatible with the browser
-            if (
-                window.PublicKeyCredential &&
-                window.PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable &&
-                window.PublicKeyCredential.isConditionalMediationAvailable
-            ) {
-                Promise.all([
-                    window.PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable(),
-                    window.PublicKeyCredential.isConditionalMediationAvailable()
-                ]).then((results) => {
-                    if (results.every((r) => r === true)) {
-                        showToast()
-                    }
-                })
-            }
-        }
+        // Show passkey registration prompt if supported
+        showRegisterPasskeyToast()
 
         // Show a toast only for those registed users returning to the site.
         // Only show toast when customer data is available (user is logged in and data is loaded)
@@ -429,7 +414,7 @@ AuthModal.propTypes = {
  */
 export const useAuthModal = (initialView = LOGIN_VIEW) => {
     const {isOpen, onOpen, onClose} = useDisclosure()
-    const {passwordless = {}, social = {}, passkey = {}} = getConfig().app.login || {}
+    const {passwordless = {}, social = {}} = getConfig().app.login || {}
 
     return {
         initialView,