Enable quick sign-ins: Immediate UI mode UX patterns

Eiji Kitamura

Published: September 30, 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.

Step-up reauthentication for sensitive operations

Even when a user is already signed in, security best practices require step-up reauthentication when performing sensitive operations—such as changing a password, updating a shipping address, editing saved payment methods, or adding a new passkey—after a certain period has elapsed since their last authentication. Invoking Immediate UI mode when a user clicks a link or button leading to a sensitive setting on their My Account overview page completes identity verification right on the dashboard without leaving the page. This allows the user to navigate directly to the target settings edit page (or execute the sensitive operation immediately) without passing through an intermediate re-login screen. If no credentials exist, transition the user to your standard reauthentication challenge screen (such as a password re-entry screen or one-time password verification screen).

While standard quick sign-ins from an unauthenticated state does not specify target credentials, you must specify them for this reauthentication use case. Set allowCredentials in the request so that only credentials belonging to the signed-in user are presented.

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

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, step-up reauthentication for sensitive operations (with allowCredentials specified), 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 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.

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