@W-21253277 Passkey login cancelled after user logs in or navigates away#3688
Merged
hajinsuha1 merged 34 commits intofeature/webauthn-loginfrom Feb 26, 2026
Conversation
…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.
…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
… for clarity in the WebAuthn registration process.
…passkey-registration-and-login
…passkey-registration-and-login
- Introduced `abortPasskeyLogin` method to allow users to cancel ongoing passkey login requests. - Integrated `AbortController` to manage cancellation of the passkey prompt when switching login methods. - Updated tests to verify the new abort functionality and ensure correct parameters are passed to `navigator.credentials.get`.
…n/index.jsx - Added `abortPasskeyLogin` to the login component to cleanly abort ongoing passkey login requests when navigating away. - Updated tests to ensure the abort signal is correctly passed and handled during login attempts with different methods. - Verified that the passkey prompt is aborted when the user logs in with a password or navigates away from the login page.
- Added `abortPasskeyLogin` to the AuthModal hook to ensure ongoing passkey login requests are aborted when the modal closes or the component unmounts. - Enhanced tests to verify that the passkey prompt is correctly aborted when the modal is closed or when a user logs in with a password while the passkey prompt is active.
hajinsuha1
added
the
skip changelog
Collaborator
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
- Updated the login component to only prompt for passkey login when the user is not already signed in, improving user experience. - Adjusted the dependency array in the `useEffect` hook to include `isRegistered`, ensuring the effect runs correctly based on the user's authentication state. - Enhanced tests to verify that the passkey prompt does not trigger when the user is already registered.
…ancelled-after-user-logs-in Signed-off-by: Jinsu Ha <91205717+hajinsuha1@users.noreply.github.com>
https://github.com/SalesforceCommerceCloud/pwa-kit into W-21253277-passkey-login-cancelled-after-user-logs-in
- Added `abortPasskeyLogin` to cleanly abort ongoing passkey login requests when the component unmounts or when the user logs in with a password. - Updated the logic to only prompt for passkey login when the user is a guest, improving user experience. - Enhanced tests to verify the correct behavior of the passkey login flow, including cleanup on unmount and handling user login transitions.
- Modified the logic to prompt for passkey login based on the `isGuest` state instead of `isRegistered`, enhancing user experience for guest users. - Updated the dependency array in the `useEffect` hook to reflect the change in state management. - Improved test isolation by clearing authentication state cookies after each test.
- Updated the logic to prompt for passkey login only when the user is on the contact info step, enhancing the user experience. - Adjusted the dependency array in the `useEffect` hook to track the current step instead of the registration status. - Enhanced tests to ensure correct behavior of passkey login prompts based on the current step in the checkout process.
hajinsuha1
commented
Feb 24, 2026
Comment on lines
+194
to
+198
| if (isGuest) { | ||
| loginWithPasskey().catch(() => { | ||
| form.setError('global', {type: 'manual', message: formatMessage(API_ERROR_MESSAGE)}) | ||
| }) | ||
| } |
Collaborator
Author
There was a problem hiding this comment.
this is a bit of an edge case but previously when a user was logged in they could navigate to the /login page and it would prompt for a passkey before redirecting the user to the accounts page.
- Simplified the condition for rendering the AuthModal by removing unnecessary checks for customer data. - Updated the welcome message to default to 'back' if the customer's first name is not available. - Adjusted the dependency array in the `useEffect` hook to only track `isRegistered`. - Enhanced tests to verify modal behavior during passkey login, ensuring proper assertions for modal visibility and user sign-in confirmation.
hajinsuha1
commented
Feb 24, 2026
Comment on lines
-273
to
-274
| // Also ensure that the customer data is loaded. | ||
| if (!isNowRegistered || !customer.data) { |
Collaborator
Author
There was a problem hiding this comment.
this was merged in the previous PR but I am reverting it as it introduces a bug where the auth modal will be emtpy for a moment while it waits for the customer data to load.
bug.mp4
hajinsuha1
commented
Feb 24, 2026
| }, | ||
| { | ||
| name: customer.data?.firstName || '' | ||
| name: customer.data?.firstName || 'back' |
Collaborator
Author
There was a problem hiding this comment.
small enhancement in case the customer is not loaded in time, to display "Welcome back," instead of "Welcome ,"
jeremy-jung1
approved these changes
Feb 26, 2026
hajinsuha1
deleted the
W-21253277-passkey-login-cancelled-after-user-logs-in
branch
12 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Updates
pages/login/index.jsxanduse-auth-modal.jsxandcontact-infoto abort the passkey login if a userBefore this change, for passkey prompts that allow the page to still be interactive (e.g., 1Password) if the user logs in with a different method or navigates away from the page the passkey prompt wouldn't be dismissed.
Screenshare.-.2026-02-23.4_45_57.PM.mp4
Types of Changes
Changes
ContactInfocomponent to only prompt when step is not CONTACT_INFOAuthModal,Login,ContactInfoto abort passkey login when unmountedusePasskeyLoginhookHow to Test-Drive This PR
Base URL: https://wasatch-mrt-passwordless-poc.mrt-storefront-staging.com/us/en-US/
Environment without fix Base URL: https://wasatch-mrt-feature-private.mrt-storefront-staging.com/us/en-US/
Require a passkey authenticator that allows page interactions during passkey prompt e.g., 1Password
Notes
Login Page
Logged-in user sees no passkey prompt
loginPage_registered_noPrompt.mp4
Navigate away + dismiss prompt: no re-prompt
loginPage_unmount_aborts.mp4
Password login + dismiss prompt: no re-prompt
loginPage_login_aborts.mp4
Auth Modal
Close modal + dismiss prompt: no re-prompt
Screenshare.-.2026-02-24.9_35_16.AM.mp4
Password login + dismiss prompt: no re-prompt
authModal_login_aborts.mp4
Contact Info (Checkout)
Navigate away + dismiss prompt: no re-prompt
contactInfo_unmount_aborts.mp4
Checkout as guest + dismiss prompt: no re-prompt
contactInfo_checkoutAsGuest_abort.mp4
Password login + dismiss prompt: no re-prompt
contactInfo_login_aborts.mp4
Logged-in user sees no passkey prompt
contactInfo_loggedIn_notPrompted.mp4
Checklists
General
Accessibility Compliance
You must check off all items in one of the follow two lists:
or...
Localization