Passwordless sign-in on forms with WebAuthn passkey autofill

Chrome 108 supports passkeys, including autofill suggestions. This allows sites
to build easy sign-in experiences that are more secure.

What is a passkey?

A passkey is a digital credential, tied to a user account and a website or application. Passkeys are more secure than
passwords because they enable users to sign in to apps and websites with a
biometric sensor (such as a fingerprint or facial recognition), PIN, or pattern,
freeing them from having to remember and manage passwords. Because they are
WebAuthn credentials, they include the
following security features:

Passkeys use public-key cryptography so sites don’t have to store passwords or secrets.
Users can’t be phished because a passkey can only be used with the website or app that created it.

Websites could create and use WebAuthn credentials on devices and
security keys via a modal UI in the browser. To do so, websites had to
redesign their sign-in flow to let users select the WebAuthn flow using a
separate button. By allowing passkeys to enable autofill, websites can now
provide the same experience for both password and passkey users.

Conditional UI

Allowing websites to make a WebAuthn request without triggering the modal UI is
called «conditional mediation». This autofill integration is often referred to
as a conditional
UI.

A user signing in with a condtional UI

How it works

As soon as the user taps on the username input field, an autofill suggestion
dialog pops up with the stored passkeys and password autofill suggestions. The
user can then choose an account and use the device screen lock to sign in. This
enables users to sign in to the website with the existing password form as if
nothing has changed, but with the added security benefit of
passkeys.