Advanced Identity Cloud/PingAM Login Widget

Implementing passkey autofill

Passkey autofill, sometimes known as WebAuthn Conditional UI, lets users sign in by selecting a passkey directly from the browser’s native autofill picker on the username field.

When the user clicks or tabs into the username field, the browser presents any passkeys registered for that site.

Selecting one completes authentication immediately, with no password required. If the user has no passkeys, or dismisses the picker, the login form continues to work as normal, so the experience degrades gracefully with no disruption.

The Advanced Identity Cloud/PingAM Login Widget activates passkey autofill automatically when it detects the right combination of callbacks from the server.

No additional widget configuration is required.

Passkey autofill requires PingAM 8.1 or later, or PingOne Advanced Identity Cloud.

It depends on version 2 of both the WebAuthn Authentication node and the Page node, which were introduced in that release.

Before a user can sign in with passkey autofill, they need a registered passkey. Refer to Registering a passkey.

How it works

When the Advanced Identity Cloud/PingAM Login Widget encounters a page node configured for passkey autocomplete, it takes the following actions:

  1. Adds autocomplete="username webauthn" to the username field, which signals to the browser that passkey autofill should be offered.

  2. Starts a background conditional credential request using the WebAuthn challenge from the MetadataCallback.

The browser then displays its native passkey picker attached to the username field:

passkeys autofill sample app

When the user selects a passkey, the widget completes the WebAuthn assertion and submits the step automatically.

Configuring your authentication journey

To configure an authentication journey for passkey autocomplete, add the following nodes together inside a Page node (version 2):

Platform Username node

Collects the username.

To add the required autocomplete attributes to the rendered field in the Login Widget, add the following values to the Autocomplete Values property of the node, in this order:

  1. username

  2. webauthn

The result resembles the following:

passkeys autofill journey username node
WebAuthn Authentication node (version 2)

Issues the WebAuthn challenge and handles the assertion response.

The following settings are required for passkey autofill:

Mediation

Set to CONDITIONAL.

This is what instructs the browser to show passkeys inline in the autofill UI rather than triggering a separate popup.

Username from device

Must be Enabled.

Version

Must be v2.0 or later. This version contains an outcome path so that users without a passkey can fall through to a normal username and password flow.

Connect the Outcome outcome to nodes that handle username and password authentication.

Connect the Success outcome to nodes that handle the successful authentication using the passkey. For example, you could connect directly to the green checkmark Success node to complete the journey.

The result resembles the following:

passkey autofill journey
Figure 1. Basic authentication journey for passkey autofill

Browser and HTTPS requirements

Passkey autofill is a browser-native capability that requires a secure context:

  • HTTPS is required in production. Browsers will not expose passkeys on plain HTTP origins.

    • localhost is treated as a secure context by browsers, so passkey autofill works without HTTPS during local development.

  • The browser must support WebAuthn Conditional UI. Current versions of Chrome, Edge, Safari, and Firefox all support it.

    The widget checks for support at runtime; if the browser does not support conditional mediation, the username field behaves as normal with no error.

Configuring the Login Widget for passkey autofill

No additional widget-specific configuration is required.

The Advanced Identity Cloud/PingAM Login Widget detects and enables passkey autofill automatically.

Registering a passkey

Let a signed-in user register a new passkey.