Enable quick sign-ins: Immediate UI mode UX patterns

Eiji Kitamura

Published: September 30, 2026, Last updated: October 7, 2026

Overview

Immediate UI mode solves context loss and user drop-off caused by navigating to a dedicated sign-in page. It enables quick sign-ins, allowing users to complete sign-in using passkeys or saved passwords right on the page they are viewing or working on without leaving their context.

Unlike Conditional UI, which surfaces autofill suggestions when a user focuses a text input field, Immediate UI mode immediately invokes the browser's authentication dialog in response to a button or link click (At the moment, uiMode only accepts "immediate" but it may change in the future).

Three core characteristics make Immediate UI mode uniquely effective for quick sign-ins:

  • Skipping cross-device QR codes: If immediately available passkeys or saved passwords exist on the device, the browser displays the authentication dialog right away. If none exist, it exits immediately without showing a cross-device QR code screen for smartphones. This allows your site to transition naturally to its normal fallback navigation (such as moving to the sign-in page).
  • Intuitive account-centric selection UI: Rather than listing mixed types of credentials individually, it hides the underlying differences between passkeys and passwords to present an intuitive account chooser focused on which account the user wants to sign in with.
  • Safe progressive enhancement: Although supported only in Google Chrome and Chromium browsers, using feature detection lets you deliver quick sign-ins to users in supported environments without disrupting existing login flows for users on unsupported browsers (such as Safari or Firefox) or in Incognito mode.

For details on how the API works under the hood and how to implement feature detection, refer to Immediate UI mode for logins. In this document, we explore recommended UX patterns that boost conversion with Immediate UI mode, along with design anti-patterns to avoid.

The most effective place to use Immediate UI mode is interception right before page navigation. Whenever an unauthenticated (or session-expired) user clicks a link or action button that would normally navigate them to a sign-in page, invoking Immediate UI mode at that exact moment creates a seamless UX that never interrupts their workflow.

Most websites place a "Sign in" link in the global header at the top of the screen that navigates to the dedicated sign-in page. When a user clicks this link on the page they are browsing, pausing navigation and invoking Immediate UI mode allows the browser to present an account selection dialog right over the current page if credentials exist on the device.

Once the user selects their account and completes authentication, the header updates to the signed-in state in place without any page navigation, allowing them to continue browsing without taking a single step away from the page they were viewing. Conversely, if no credentials exist on the device, no browser UI is shown and the user navigates smoothly to the sign-in page exactly as they originally intended.

Dynamic sign-in at checkout (ecommerce)

On ecommerce sites, the transition from the shopping cart to checkout is one of the most common points for cart abandonment caused by page navigation friction. By invoking Immediate UI mode the moment an unauthenticated shopper clicks the Proceed to Checkout button on the cart screen, an account selection dialog appears right where the button was clicked, completing authentication with a single tap.

When authentication succeeds, the shopper bypasses the sign-in page entirely and lands directly on the final shipping and payment confirmation screen (Checkout page), dramatically reducing the steps required to complete a purchase. If no credentials exist, the shopper transitions normally to the conventional sign-in or guest checkout selection screen. You can design your site to allow guest checkout or require sign-in according to your business requirements. Immediate UI mode serves to eliminate checkout friction for returning customers.

Inline sign-in for micro-actions (Like, bookmark, save)

When visitors browse social feeds, community sites, or ecommerce product catalogs, forcing a full page redirect to the sign-in page every time they try to "Like" a post or "Bookmark" an item may cause some users to abandon the action.

When a signed-out visitor clicks an action button such as Like, Bookmark, or Save, presenting an Immediate UI mode dialog right in place allows identity verification to complete and immediately trigger the action record and UI animation (such as the heart icon turning red). The scroll position does not move by a single pixel, completely preserving browsing immersion. If no credentials exist, rather than navigating away immediately, you can display a lightweight inline login modal over the current screen or guide the user to the sign-in page in a way that returns them to their original spot after signing in.

Publisher site paywall unlocking

News media and content platforms widely adopt a model where the opening paragraphs of an article are freely accessible, while a soft paywall or member-only blur is presented halfway down as the reader scrolls.

When a reader scrolls down an article, reaches the paywall, and clicks the Continue reading with your account button, invoking Immediate UI mode displays the authentication dialog right over the exact scroll position where the reader paused. As soon as authentication completes, the article blur smoothly dissolves without a page reload, allowing the reader to continue reading without losing the line of text they were looking at. If no credentials exist, expand an inline registration or sign-in form within the paywall section.

Anti-patterns to avoid

While Immediate UI mode delivers tremendous value when used before page navigation, placing it in the wrong location or applying it to unsupported flows will actively harm the user's sign-in experience.

Avoid Immediate UI mode on sign-in buttons on dedicated sign-in pages

Because Immediate UI mode handles both passkeys and passwords in a single polished dialog, it can be tempting to use it on the "Sign in" button placed on your dedicated sign-in page. However, you should avoid using it here. First, Immediate UI mode strictly requires user activation (such as a click or tap), making it awkward on a sign-in page where users might expect sign-in options to be readily available at page load time. Second, the sign-in page is the final destination where users arrive when they don't have local credentials on their device, or where users intend to sign in with a passkey on their mobile device (cross-device authentication) or a hardware security key by clicking "Sign in with a passkey". If you use Immediate UI mode here, the browser suppresses the cross-device QR code and security key fallbacks and terminates immediately as soon as it finds no local credentials on the device—trapping the user in a dead-end where clicking the button does nothing on a page with no further destination.

On a sign-in page where every authentication method must reliably function, best practice is to configure Conditional UI (autofill integration) on input fields to ensure convenience for local passkeys, while pairing explicit "Sign in with a passkey" buttons with standard invocation methods that reliably display cross-device QR code and security key options.

Avoid Immediate UI mode for step-up reauthentication

When a signed-in user performs a sensitive operation—such as changing a password, updating a shipping address, editing saved payment methods, or adding a new passkey—sites often require step-up reauthentication to verify the user's identity. Because the user is already signed in, reauthentication flows typically pass a non-empty allowCredentials list to restrict authentication to credentials belonging to that specific user.

However, don't use Immediate UI mode for reauthentication. Immediate UI mode is designed exclusively for unauthenticated sign-in flows where the user's identity is not yet known. If a relying party could query a specific list of credential IDs in Immediate UI mode and observe whether a credential exists, it could infer whether the user has previously interacted with the site and track the user across sessions. To prevent this cross-session tracking risk, browsers immediately reject any Immediate UI mode request that includes a non-empty allowCredentials list by throwing a NotAllowedError. Conversely, omitting allowCredentials during reauthentication is also problematic, as the browser presents every credential saved on the device for your site—allowing the user to inadvertently select a different account than the one signed in at the moment.

For step-up reauthentication where the user's identity is already known, use a standard modal WebAuthn request (navigator.credentials.get() without uiMode: 'immediate') with allowCredentials populated with the signed-in user's registered credentials, or direct the user to your standard reauthentication challenge screen.

Conclusion

Immediate UI mode is a powerful UX tool for eliminating unnecessary detours to sign-in pages and achieving quick sign-ins that complete sign-in while preserving context. By intercepting moments of clear user intent—such as header sign-in links, checkout buttons, micro-actions, and article paywalls—right before page navigation occurs, you can prevent drop-off and deliver a seamless user experience.

At the same time, remember that Immediate UI mode is strictly a progressive enhancement for unauthenticated users before page navigation. Avoid applying it to buttons on your final destination sign-in page so that your design remains open and accessible to cross-device (QR code) users, and avoid using it for reauthentication flows that require allowCredentials.

For further details on implementing passkeys and the latest Web Identity features, explore the following resources: