@W-21056536 Error handling Passkey Registration and Login (#3672)

display user-friendly error message for errors during passkey login and registration

Author: hajinsuha1

packages/commerce-sdk-react/src/hooks/ShopperLogin/index.test.ts

@@ -20,12 +20,7 @@ describe('Shopper Login hooks', () => {
             // These endpoints all return data in the response headers, rather than body, so they
             // don't work well with the current implementation of mutation hooks.
             'authenticateCustomer',
-            'authorizeWebauthnRegistration',
-            'finishWebauthnAuthentication',
-            'finishWebauthnUserRegistration',
-            'getTrustedAgentAuthorizationToken',
-            'startWebauthnAuthentication',
-            'startWebauthnUserRegistration'
+            'getTrustedAgentAuthorizationToken'
         ])
     })
     test('all mutations have cache update logic', () => {

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

@@ -37,6 +37,12 @@ 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 +79,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)
         }
@@ -107,18 +108,7 @@ const PasskeyRegistrationModal = ({isOpen, onClose}) => {
 
             // 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')
@@ -160,17 +150,15 @@ const PasskeyRegistrationModal = ({isOpen, 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 = /401/.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 401', async () => {
+            const otpCode = '12345678'
+
+            mockStartWebauthnRegistration.mockRejectedValue(new Error('401'))
+
+            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

@@ -89,7 +89,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 +103,7 @@ export const AuthModal = ({
     )
     const mergeBasket = useShopperBasketsMutation('mergeBasket')
 
-    const {showToast} = usePasskeyRegistration()
+    const {showRegisterPasskeyToast} = usePasskeyRegistration()
 
     const handlePasswordlessLogin = async (email) => {
         try {
@@ -239,8 +238,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])
@@ -271,35 +270,20 @@ export const AuthModal = ({
         const isNowRegistered =
             (isOpen || isOtpAuthOpen) && isRegistered && (loggingIn || registering)
         // If the customer changed, but it's not because they logged in or registered. Do nothing.
-        if (!isNowRegistered) {
+        // Also ensure that the customer data is loaded.
+        if (!isNowRegistered || !customer.data) {
             return
         }
 
         // We are done with the modal. Close any modals that are open.
         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)
-        if (loggingIn && customer.data) {
+        if (loggingIn) {
             toast({
                 variant: 'subtle',
                 title: `${formatMessage(
@@ -429,7 +413,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,