@W-21056536 Error handling Passkey Registration and Login by hajinsuha1 · Pull Request #3672 · SalesforceCommerceCloud/pwa-kit

hajinsuha1 · 2026-02-18T16:25:15Z

Description

Display user-friendly error messages for errors during passkey login and registration
Doc listing all error message mapping: https://salesforce.quip.com/97bPANYv5D2U

After a lot of thinking, I chose to use a more generic error handling approach of returning a "Something went wrong. Try again!" error for most cases because passkey login is triggered automatically rather than via a button.

Types of Changes

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Documentation update
Breaking change (could cause existing functionality to not work as expected)
Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

Removing a public function or component or prop

Adding a required argument to a function

Changing the data type of a function parameter or return value

Adding a new peer dependency to package.json

Changes

display user-friendly error message for errors during
- passkey login:
  - use-auth-modal.js
  - pages/login/index.jsx
- passkey registration:
  - use-passkey-registration.jsx

How to Test-Drive This PR

Unit Tests

Since CI is broken for now becasue we are using commerce-sdk-isomorphic preview version
Ensure the modified unit tests pass:

npm run test passkey-registration-modal use-auth-modal pages/login/index.test.jsx use-passkey-login

Passkey Login Errors

Cancelling does not display error

Navigate to https://wasatch-mrt-passwordless-poc.mrt-storefront-staging.com/login
Cancel the passkey login by closing all passkey prompts
Verify no error message is displayed and no error is logged
Repeat for use-auth-modal

Screenshare.-.2026-02-19.2_48_29.PM.mp4

Screenshare.-.2026-02-19.2_23_07.PM.mp4

412 from timeout does not display error

Attempt passkey login twice in 1 minute to trigger 412 error due to timeout
Verify "We couldn't verify your passkey. Try again or use a different login method." error is displayed
Repeat for use-auth-modal

Screenshare.-.2026-02-19.2_20_18.PM.mp4

Screenshare.-.2026-02-19.2_21_15.PM.mp4

401 client error displays error

Navigate to https://wasatch-mrt-passwordless-test.mrt-storefront-staging.com/login. This site has deployed a misconfigured retail react app where it's using a private client but useSLASPrivateClient settings are not enabled. This means the /start call will return a 401 Unauthorized as the correct auth headers are not sent.
Verify a "Something went wrong, Try again!" error is displayed
Repeat for use-auth-modal

Passkey Registration Errors

Cancelling displays error

Navigate to https://wasatch-mrt-passwordless-poc.mrt-storefront-staging.com/login
Login using your salesforce email
Click "Create Passkey" button
Click "Register Passkey" button when prompted for a nickname
Enter the OTP received in your email
When passkey prompts appear close all of them
Verify a "Something went wrong, Try again!" error is displayed

Screenshare.-.2026-02-19.2_17_17.PM.mp4

401 from entering incorrect token

Navigate to https://wasatch-mrt-passwordless-poc.mrt-storefront-staging.com/login
Login using your salesforce email
Click "Create Passkey" button
When OTP is prompted, enter a random number
Verify "Invalid token, please try again." error is displayed

Screenshare.-.2026-02-19.2_18_39.PM.mp4

Checklists

General

Changes are covered by test cases
CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

There are no changes to UI

or...

Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
Changes comply with WCAG 2.0 guidelines levels A and AA
Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

Changes include a UI text update in the Retail React App (which requires translation)

…n components; add utility function for passkey error messages

…place deprecated error message function with a new utility for improved clarity and add handling for too many registration attempts.

…ude mappings for various error responses and ensure correct message descriptors are returned.

…able passkey login tests, handle user cancellation errors, and ensure proper rendering of UI elements during authentication.

…test clarity; mock configurations for passkey enabled/disabled scenarios, and ensure proper UI rendering during authentication processes.

cc-prodsec · 2026-02-18T16:26:03Z

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

…ugging.

…nents; replace showToast with showRegisterPasskeyToast for improved clarity and functionality. Update tests to validate passkey registration toast display after successful login, ensuring proper configuration checks and UI rendering.

… messages for unavailable features and authentication API errors. Update related tests to ensure correct message mappings for various error responses.

This reverts commit 977e9ea.

…fully, including early returns for 412 status. Improve passkey authentication error handling by adding console error logging in AuthModal and Login components.

…passkey-registration-and-login

…s 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.

…n' of https://github.com/SalesforceCommerceCloud/pwa-kit into W-21056536-error-handling-passkey-registration-and-login

hajinsuha1 · 2026-02-19T21:01:06Z

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

-            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
-            }


during registration, any errors from the browser should tell the user that soemthing went wrong. Instead of throwing a custom error, we let the error be thrown automatically and handle it in the catch below

hajinsuha1 · 2026-02-19T21:03:45Z

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

-        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()
-                    }
-                })
-            }
-        }


moved this logic into showRegisterPasskeyToast as it's duplicated here and in the login page

hajinsuha1 · 2026-02-19T21:06:13Z

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

+            // 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
+            }


The most common 412 error from the startWebauthnAuthenticationResponse is when a user attempts to start the passkey login multiple times within a minute.

Because the passkey login prompt is triggered automatically upon opening the login form, we fail silently for a 412 to avoid causing confusion.

hajinsuha1 · 2026-02-19T21:06:51Z

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

            if (error.name == 'NotAllowedError') {
                return
            }
+            console.error('Error getting passkey credential from browser:', error)


we log any errors returned from the browser to help in debugging.
API errors are automatically logged by pwa kit

hajinsuha1 · 2026-02-19T21:09:39Z

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

-                    defaultMessage: 'Failed to register passkey'
-                })
-
+            console.error('Error registering passkey:', err)


although API errors are automatically logged, we want to ensure the errors from the browser and custom errors that are thrown are logged to help in debugging issues.

… for clarity in the WebAuthn registration process.

…passkey-registration-and-login

This reverts commit faa5454.

…dless login' test

jeremy-jung1 · 2026-02-23T19:49:27Z

Decisions in the code and errors look fair to me. When putting an invalid OTP for registration, I'm seeing "Something went wrong. Try again!" instead of the invalid token. The API response was

{
  "status_code" : "401 UNAUTHORIZED",
  "message" : "Webauthn action token not found"
}

seeing.something.went.wrong.try.again.mov

…status code and adjust corresponding test case

…n' of https://github.com/SalesforceCommerceCloud/pwa-kit into W-21056536-error-handling-passkey-registration-and-login

hajinsuha1 · 2026-02-23T21:29:25Z

Decisions in the code and errors look fair to me. When putting an invalid OTP for registration, I'm seeing "Something went wrong. Try again!" instead of the invalid token. The API response was
{
  "status_code" : "401 UNAUTHORIZED",
  "message" : "Webauthn action token not found"
}
seeing.something.went.wrong.try.again.mov

Thanks for catching that! Looks like when deployed to MRT the proxy/cdn strips the status messsage. I've updated it to display "Invalid token" on 401. This should be okay as they'd only get a 401 at this step for a invalid token

You can see it working here: https://wasatch-mrt-passwordless-poc.mrt-storefront-staging.com

hajinsuha1 · 2026-02-23T21:33:02Z

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

            const otpCode = '12345678'

-            mockStartWebauthnRegistration.mockRejectedValue(new Error('Unauthorized'))
+            mockStartWebauthnRegistration.mockRejectedValue(new Error('401'))


later if we touch this file again, we should update the tests to mock commerce-sdk-react using msw!

hajinsuha1 added 6 commits February 17, 2026 12:53

Implement error handling for login with passkey in AuthModal and Logi…

3791b65

…n components; add utility function for passkey error messages

Refactor passkey error handling in AuthModal and Login components; re…

8ec8140

…place deprecated error message function with a new utility for improved clarity and add handling for too many registration attempts.

Add unit tests for passkey error message handling in auth-utils; incl…

98d8950

…ude mappings for various error responses and ensure correct message descriptors are returned.

fix unit tests by removing mocking AuthHelpers

315e3a1

Refactor passkey login tests to improve clarity and functionality; en…

1f45c06

…able passkey login tests, handle user cancellation errors, and ensure proper rendering of UI elements during authentication.

Enhance passkey login tests by refining error handling and improving …

54d6043

…test clarity; mock configurations for passkey enabled/disabled scenarios, and ensure proper UI rendering during authentication processes.

hajinsuha1 changed the base branch from develop to feature/webauthn-login February 18, 2026 16:48

hajinsuha1 and others added 7 commits February 18, 2026 13:23

add error handling in passkey registration. add console error for deb…

b16b759

…ugging.

Enhance passkey error handling in auth-utils by introducing new error…

1199fc6

… messages for unavailable features and authentication API errors. Update related tests to ensure correct message mappings for various error responses.

use preview version for commerce-sdk-react

977e9ea

Revert "use preview version for commerce-sdk-react"

bbc4071

This reverts commit 977e9ea.

Enhance usePasskeyLogin hook to handle specific error responses grace…

7c727b2

…fully, including early returns for 412 status. Improve passkey authentication error handling by adding console error logging in AuthModal and Login components.

Merge branch 'feature/webauthn-login' into W-21056536-error-handling-…

a9bda52

…passkey-registration-and-login

hajinsuha1 marked this pull request as ready for review February 19, 2026 19:43

hajinsuha1 requested a review from a team as a code owner February 19, 2026 19:43

hajinsuha1 added 2 commits February 19, 2026 15:35

Merge branch 'W-21056536-error-handling-passkey-registration-and-logi…

ca9c030

…n' of https://github.com/SalesforceCommerceCloud/pwa-kit into W-21056536-error-handling-passkey-registration-and-login

hajinsuha1 commented Feb 19, 2026

View reviewed changes

hajinsuha1 and others added 3 commits February 19, 2026 16:10

Update comments in PasskeyRegistrationModal to correct step numbering…

cc79b74

… for clarity in the WebAuthn registration process.

Merge branch 'feature/webauthn-login' into W-21056536-error-handling-…

303ed13

…passkey-registration-and-login

lint

b6f7f4f

hajinsuha1 added the skip changelog Skip the "Changelog Check" GitHub Actions step even if the Changelog.md files are not updated label Feb 20, 2026

hajinsuha1 added 2 commits February 20, 2026 11:32

increase bundle size

529b703

fix commerce-sdk-react unit tests

1bf6075

hajinsuha1 and others added 3 commits February 20, 2026 13:22

Merge branch 'feature/webauthn-login' into W-21056536-error-handling-…

f80c954

…passkey-registration-and-login

increase timeout to fix use-auth-modal unit tests

e1a22ec

Merge branch 'feature/webauthn-login' into W-21056536-error-handling-…

8271c9f

…passkey-registration-and-login

hajinsuha1 mentioned this pull request Feb 20, 2026

[DO NOT MERGE WIP] Feature: WebAuthn Login #3580

Draft

12 tasks

hajinsuha1 added 4 commits February 20, 2026 17:55

test commit (revert use-auth-modal to develop)

faa5454

Revert "test commit (revert use-auth-modal to develop)"

bba25a2

This reverts commit faa5454.

move renderWithProviders after getConfig is mocked in 'Allows passwor…

eb67152

…dless login' test

fix use-auth-modal race condition

b2b9709

hajinsuha1 requested a review from jeremy-jung1 February 23, 2026 14:45

hajinsuha1 added 2 commits February 23, 2026 16:27

Update error handling in PasskeyRegistrationModal to check for '401' …

e000ff0

…status code and adjust corresponding test case

Merge branch 'W-21056536-error-handling-passkey-registration-and-logi…

22ad02c

…n' of https://github.com/SalesforceCommerceCloud/pwa-kit into W-21056536-error-handling-passkey-registration-and-login

hajinsuha1 commented Feb 23, 2026

View reviewed changes

jeremy-jung1 approved these changes Feb 23, 2026

View reviewed changes

hajinsuha1 merged commit 50f2629 into feature/webauthn-login Feb 23, 2026
42 checks passed

hajinsuha1 deleted the W-21056536-error-handling-passkey-registration-and-login branch February 23, 2026 21:54

hajinsuha1 mentioned this pull request Feb 24, 2026

@W-21253277 Passkey login cancelled after user logs in or navigates away #3688

Merged

12 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

@W-21056536 Error handling Passkey Registration and Login#3672
hajinsuha1 merged 29 commits intofeature/webauthn-loginfrom
W-21056536-error-handling-passkey-registration-and-login

hajinsuha1 commented Feb 18, 2026 •

edited

Loading

Uh oh!

cc-prodsec commented Feb 18, 2026 •

edited

Loading

Uh oh!

hajinsuha1 Feb 19, 2026

Uh oh!

hajinsuha1 Feb 19, 2026

Uh oh!

hajinsuha1 Feb 19, 2026

Uh oh!

hajinsuha1 Feb 19, 2026 •

edited

Loading

Uh oh!

hajinsuha1 Feb 19, 2026

Uh oh!

jeremy-jung1 commented Feb 23, 2026 •

edited

Loading

Uh oh!

hajinsuha1 commented Feb 23, 2026

Uh oh!

hajinsuha1 Feb 23, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

hajinsuha1 commented Feb 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Types of Changes

Changes

How to Test-Drive This PR

Unit Tests

Passkey Login Errors

Cancelling does not display error

412 from timeout does not display error

401 client error displays error

Passkey Registration Errors

Cancelling displays error

401 from entering incorrect token

Checklists

General

Accessibility Compliance

Localization

Uh oh!

cc-prodsec commented Feb 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Snyk checks have passed. No issues have been found so far.

Uh oh!

hajinsuha1 Feb 19, 2026

Choose a reason for hiding this comment

Uh oh!

hajinsuha1 Feb 19, 2026

Choose a reason for hiding this comment

Uh oh!

hajinsuha1 Feb 19, 2026

Choose a reason for hiding this comment

Uh oh!

hajinsuha1 Feb 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hajinsuha1 Feb 19, 2026

Choose a reason for hiding this comment

Uh oh!

jeremy-jung1 commented Feb 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hajinsuha1 commented Feb 23, 2026

Uh oh!

hajinsuha1 Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

hajinsuha1 commented Feb 18, 2026 •

edited

Loading

cc-prodsec commented Feb 18, 2026 •

edited

Loading

hajinsuha1 Feb 19, 2026 •

edited

Loading

jeremy-jung1 commented Feb 23, 2026 •

edited

Loading