Passkeys are a new technology in a world that's used to dealing with passwords. If you focus on creating a great user experience (UX), adding passkeys as an authentication option will make your users' digital lives easier and more secure. Best practices for passkeys are evolving and following the guidance for common user journeys will speed up your development process and ensure your users are successful in using passkeys.
This article outlines recommendations for the following user journeys:
- Creating passkeys
- Creating new accounts with passkeys
- Signing in with passkeys
- Managing passkeys
These recommendations are based on UX research and guidance by FIDO Alliance and learnings of the user experience team at Google.
All of the recommendations are shown on the example of Trailblazer, a fictional fitness site.
While following the best practices, you should also test your user experience early and frequently if you can. This will help ensure your implementation of the passkey system is intuitive and aligns with your users' needs.
Creating passkeys
To ensure your users are in the right mindset for creating a passkey, prompt to create passkeys alongside account-related tasks. There are four key user journeys where it’s recommended to include option to create passkeys:
- During sign-in.
- In the security section in the account settings.
- After account recovery.
- After reauthorization.
Sign-in
The sign-in process is a great opportunity to introduce passkeys as users are already focused on security and authentication at this point in their journey.
Introducing passkeys during the sign-in phase allows you to proactively set users up for success in their future engagements with your service. This timing also aligns with a high level of confidence that the user is indeed who they claim to be, enhancing the overall security and user experience of your platform.
A great user journey can be authenticating the user as usual, let them know they can create a passkey, trigger the OS dialog for passkey creation, and then let them know that the passkey was successfully created. Then, let the user move on in their own time.
Security section in the account settings
Integrating passkey options within the security settings of a user's account is logical and contextually appropriate. This enables users to easily manage and update their passkeys as part of their overall security configuration. It can also can be a great time to ask a user for recovery information for their account, like a phone number or email.
Recovery
Account recovery is another great opportunity to encourage a user to create a passkey.
Recovery is never an easy process and in those moments the importance of account security is likely at the forefront of their mind. Once they’re back in, you can help a user set themselves up for success by creating a passkey for future sign-ins.
This sets the stage for enhanced security and positions the user for a successful and streamlined experience in future interactions.
Reauthorization
Sometimes it’s necessary to ask a user to sign in again or pass a challenge before they can perform sensitive actions like sending money or editing personal information. Once a user has successfully verified their identity, this can be an ideal opportunity to encourage a user to create a passkey.
This opportunity leverages the user’s increased awareness of security but also promises a more convenient re-authentication process in future interactions. The proactive approach enhances overall account security while promoting a user-friendly experience.
Canceling passkey creation
Inform the user clearly if the passkey creation was not successful, and consider implementing a feature that allows for user feedback to understand potential issues (this could be in product, or even through email or another path).
Additionally, provide a straightforward path for the user to attempt the creation process again, or to revisit and create a new passkey in the future, such as from the security settings. This approach ensures that even if a user intentionally or unintentionally cancelled the passkey creation, there’s a path to trying again.
Creating new accounts with passkeys
When creating a new account with a passkey, it can be helpful to bring the user to a designated page where they can enter both a display name and a unique username. A designated page can remove distractions and bring focus to the main goal. Then, take the step of creating the passkey.
If a user is creating an account with a passkey, it’s important to establish a recovery method for their account. This could be via phone number, email, social login such as Sign in With Google, or another option that works well for you. The best option may vary depending on the specific demographics and preferences of your user base. Depending on the security requirements necessary for your application, you might also want to do identity proofing as part of new account creation.
This backup method will serve as a way to recover their account should they lose access to their passkey, or sign in on a device where passkeys aren’t yet available. This helps ensure that users can always gain access to their accounts.
Signing in with passkeys
Passkeys offer flexible sign-in options: enter your username or select from a list of passkeys for your domain. For quick and error-free access, try using the WebAuthn feature of presenting a list of passkeys for a certain domain—it presents passkeys directly, reducing time spent and the need for typing.
Designing the sign in page
Designing an effective sign-in page should place emphasis on speed, user convenience, and ease of comprehension.
It can be helpful to make use of the autofill feature in modern web browsers to bring passkeys to users, or integrate deeply with the Credential Manager API so that the passkey is offered as early as possible in the journey.
Offering multiple sign in options like username and password fields along with a variety of social sign-ins can offer versatility to your users, but it can also be overwhelming. Prioritize the options and present the most useful for your user base. Keep in mind that even though passkeys may have lower usage rates right now, they improve security and user experience, and more and more users are adopting them every day. Implementing passkeys today puts you on the right track for future success.
If you are integrating a separate button for passkeys, make sure it aligns cohesively with your aesthetic and identity.
Managing passkeys
Using the word "Create"
Using the word "Create" better describes the process of generating a new, unique passkey. Unlike a password, an account can have multiple passkeys that can be used to log in. As such, a passkey isn't usually changed like a password, but instead created and added to the list of available passkeys. A user can delete them as they need.
When a passkey is created, it is a unique credential that users can use to sign in easily and securely. It's not like giving an app or service a copy of your password to store and match.
Make it easy for users to find passkeys within your service
Clearly show the source of each passkey (sometimes referred to as "provenance" in this context), whether it is Google Password Manager, iCloud Keychain, Windows Hello, or a third-party password manager that supports passkeys. Communicating this information to your users helps them identify which passkeys are listed in the user interface.
Add a number to additional passkeys in the same ecosystem
If a user creates more than one passkey on devices from the same ecosystem, add numbers to additional passkeys so the user can distinguish them.
Use the term "delete" when removing a passkey
If a user wants to remove a passkey they’ve been using on your site, you can remove the public key from your server but the private key will not be deleted from the user’s credential manager or on their device. Even though this process is technically a "revocation", for simplicity and easier localization it’s recommended to use the term "delete" in the passkey management UI.
If you have account management support pages, add information about managing passkeys to them and include links to passkey management pages on different platforms such as Chrome and iOS.
Have an email or phone fallback
If you have an email or phone fallback, the user has a way to recover their account if they delete all their passkeys. You can send them a sign in link or a code to get back into their account. You can also offer users to set up a social login, such as Sign in with Google.
Managing multiple passkeys
Unlike traditional passwords, a user can create multiple passkeys on different devices for a single account. If you are unable to locate a user's passkey on a given device and the user signs in using a fallback sign-in method, even though they have created one in the past, consider prompting the user to create a new one. This action will either update the information in their credential manager or establish a new passkey on their current device.
FIDO user journey diagrams
For more examples and detailed user journey diagrams, check out the FIDO UX architecture diagrams.