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.

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

# How to use conditional UI

To use the WebAuthn conditional UI, learn how to Create a passkey for passwordless logins and Sign in with a passkey through form autofill.

Photo by Scott Graham on Unsplash