In this page, you can experience authentication through a dedicated **Sign-in with a passkey** button. We call it "passkey one button" flow. In addition, you can try WebAuthn Signal API. ## How to use Tap on **Sign in with a passkey** button. If you have a passkey, it displays the passkey dialog. Otherwise, you will be redirected to a password-based sign-in form if "immediate mediation" is supported. If "immediate mediation" is not supported, a QR code dialog is displayed so you can scan it and sign in using a passkey stored to that device. 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 one button experience by invoking `navigator.credentials.get()` with a public key option. There are a lot of tricks you can perform to make the passkey authentication experience better. Here's a checklist: * 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)