Passkey form autofill
In this page, you can experience authentication through a form that can
accommodate passkeys and passwords. We call it "passkey form autofill" flow. In
addition, WebAuthn Signal API deletes a passkey when it's unusable.
## How to use
Put your cursor on the username field and form autofill suggestions should
appear. The list contains passkeys and passwords that are stored to the password
manager, so you can select one to proceed signing in.
If you haven't created a passkey on this website yet, you can enter an arbitrary
username and continue. You can enter a random password in the next page to
create an account. The password will be ignored.
If you do have entries in the password manager:
* Select a password entry, and associated username will be filled in the
username field, so that you can **Continue** to enter a password.
* Select a passkey entry, and a passkey dialog will appear to proceed with
user verification, and you'll be signed in.
If your sign-in attempt is rejected by the server because the public key is not
found on the server, the password manager will delete the passkey to avoid
further confusion. This is done by WebAuthn Signal API.
## How to develop
Use [WebAuthn](https://www.w3.org/TR/webauthn/) to build a passkey experience.
You can enable **passkey form autofill** by appending `mediation: "conditional"`
to the `navigator.credentials.get()` call to an ordinary passkey authentication
invocation. Also, the `input` element must contain `webauthn` within its
`autocomplete` attribute.
There are a lot of tricks you can perform to make the passkey authentication
experience better. Here's a checklist:
* Allow users to [sign in with a passkey through form
autofill](https://web.dev/articles/passkey-form-autofill).
* Signal when a passkey's matching credential is not found on the backend with
[`PublicKeyCredential.signalUnknownCredential()`](https://developer.chrome.com/docs/identity/webauthn-signal-api#signal-that-a-credential-does-not-exist).
* Prompt users to manually create a passkey if the user hasn't created one after
a sign-in.
* [Automatically create a passkey (conditional
create)](https://developer.chrome.com/docs/identity/webauthn-conditional-create)
after the user signs in with a password (and a second factor).
* Prompt for local passkey creation [if the user has signed in with a
cross-device
passkey](https://web.dev/articles/passkey-form-autofill#encourage_creating_a_new_passkey_after_a_cross-device_authentication).
* [Signal the list of available
passkeys](https://developer.chrome.com/docs/identity/webauthn-signal-api#signal-a-list-of-saved-credentials)
and [updated user details (username, display
name)](https://developer.chrome.com/docs/identity/webauthn-signal-api#signal-updated-username-and-display-name)
to the provider after sign-in
### Learning resources
* [Sign in with a passkey through form
autofill](https://web.dev/articles/passkey-form-autofill)
* [Server-side passkey
authentication](https://developers.google.com/identity/passkeys/developer-guides/server-authentication)
* [Implement passkeys with form autofill in a web app](https://goo.gle/passkeys-codelab)
Welcome back!
