Skip to main content

User authentication

This section will cover the authentication flow for a user to access their account.

Demonstration

The videos below will a user authenticating into the application.

This first video will demonstrate a user authenticating into an account using autofill/conditional mediation

This second video demonstrates a user authenticating by clicking the Press to authenticate button

This third video demonstrates a user authenticating by providing their username. This flow can be used to support both passkeys and non-discoverable credentials (which are both valid WebAuthn credentials).

UX Considerations

Below is a list of different user experience notes based on the demonstration above

  1. The experience for authenticating with passkeys should be consistent to help promote adoption. Try to not differ from the authentication patterns shown above to prevent confusion among users
  2. Autofill for passkeys was created as a way to encourage the use of passkeys by providing a mental model that is familiar to non-technical users. It is our recommendation to leverage autofill for your initial implementation to increase the adoption of passkeys among your users. There should be some eventual transition to the use of the "button-only" flow as a username input field will no longer be needed in a world where everyone is leveraging a passkey.

Implementation guidance

Please refer to the earlier section on implementation guidance for authentication flows to learn how to build a web page that leverages the patterns shown in the demonstration videos above.