Unlocking the Future: A Passkeys Implementation Case Study Based on FIDO UX Guidelines
Passkeys offer a new, secure, and user-friendly way to log in, with more and more websites adding support. As organizations explore different passkey implementations, prioritizing user experience (UX) is crucial for widespread adoption.
We’re reviewing GitHub’s implementation of passkeys on desktop web and comparing it to the FIDO Alliance’s UX guidelines to help other websites implement passkeys well.
“GitHub’s integration of passkeys stands out as a user-friendly, secure implementation,” said Rew Islam, Dashlane’s Director of Product Engineering & Innovation and current FIDO Board member representative for Dashlane. “Their meticulous approach not only leverages the signals received from the authenticator but also ensures users are seamlessly and transparently navigated through each stage of the passkey journey. GitHub’s method serves as a benchmark, demonstrating how cutting-edge technology can be integrated with a keen emphasis on user experience and security.”
FIDO Alliance UX Guidelines for Passkeys
The FIDO Alliance’s UX working group, which Dashlane is an active participant in, has championed enhancing security and improving the user experience of passwordless authentication for a long time. The FIDO Alliance UX guidelines aim to help developers and designers create better, more secure user experiences of passkey authentication on their websites and apps.
FIDO's UX Guidelines for Passkey Creation and Sign-ins focus on accelerating decision-making when designers and developers are creating and implementing passkeys and new sign-in flows. The better the UX, the more likely people will adopt passkeys.
We’ll walk through the user experience of logging in to GitHub with passkeys on the desktop web, focusing on the four main parts of the user journey that the FIDO UX guidelines describe:
- Create a new account with a passkey
- Create a passkey and/or a new password during account recovery
- Create, view, and manage passkeys in account settings
- Sign in with a passkey
GitHub’s implementation of passkeys
GitHub introduced passkeys in July 2023 to improve account security and safeguard their users from password risks. While users can still use passwords, it’s clear by the educational materials GitHub has created that they’re dedicated to promoting awareness and helping new users become familiar with passkeys.
While reviewing GitHub’s passkey implementation, it’s evident that they’re committed to giving users a better way to log in, helping prevent them from getting locked out of their accounts, and ultimately making them more secure.
Comparing GitHub’s implementation with the FIDO UX Guidelines
GitHub has successfully met all 10 UX guidelines set forth by the FIDO Alliance.
Now let’s take a look at how GitHub has applied the above guidelines.
- FIDO UX Guideline: Prompt to create passkeys alongside account-related tasks.
GitHub’s Passkey creation prompt can be found in Account settings under the Password and authentication section, alongside password settings and Two-factor authentication as seen in this screenshot.
Users who forget their password are guided through the account recovery flow. This screenshot shows passkeys in the Password Alternatives section, helping users discover and configure passkeys as an alternative for passwords.
With passkeys, users don’t need to deal with the hassle of forgotten passwords and getting locked out of an account. Passkeys allow a website and your device to virtually shake hands in a way that can’t be phished, doesn’t require two-factor authentication (2FA), and removes the burden of remembering and typing in a unique password.
In the next screen, the user can also configure passkeys as a 2FA option. The flow continues to create familiarity by using the term "passwordless authentication" in the header. This reinforces the idea that passkeys can be used instead of passwords or in conjunction with them as a 2FA method.
- FIDO UX Guideline: Associate the unfamiliar (passkeys) with the familiar.
GitHub consistently describes passkeys in relation to familiar concepts of passwordless authentication: “Passkeys are a password replacement that validates your identity using touch, facial recognition, a password, or a PIN.” We can see these references in many of the screenshots in this review.
- FIDO UX Guideline: Use proven passkey messaging and icons before and after OS dialogs.
GitHub uses clear messaging with the option to Add a passkey and also uses consistent passkey iconography as seen in the screenshot below.
- FIDO UX Guideline: Allow freedom and choice related to passkeys.
GitHub gives users several choices for using passkeys:
–Users create their accounts without a passkey. They can create one at any point as an alternative to their password.
–Users can also choose to be asked later or not to be asked again on the passkey prompt.
–Users can customize the names of their passkey for added flexibility.
- FIDO UX Guideline: Follow accessibility principles before and after using passkeys.
GitHub respects accessibility standards in their passkey prompt and setup flows. This supports maximizing the broader adoption of passkeys and making them accessible to all users.
- FIDO UX Guideline: Use a passkey hero prompt consistently across the customer journey.
GitHub uses consistent content and iconography across the customer journey. The screenshots below show two different prompts for the same action, allowing users to discover passkeys and relate them to passwords with the language "passwordless sign-in" and "passwordless authentication."
- FIDO UX Guideline: Persist helpful information about passkeys.
Throughout the flow, GitHub gives users a variety of information about passkeys.
–A description of passkeys is displayed by default, explaining what passkeys are, their benefits, and how to use them.
–GitHub provides a clear explanation of what would happen if users delete a passkey. The screenshot shows a pop-up requiring confirmation when a user wants to delete a passkey. However, if a user uses a password manager to create and save their passkeys, it doesn't automatically delete the passkey from the password manager. In this instance, it is important to note that the passkey will be deleted from GitHub, and the user will not be able to sign in with it the next time they log in.
- FIDO UX Guideline: Make passkeys a primary option in account settings.
Although GitHub continues to use passwords as the primary login, the user can create a passkey login after they sign in. This allows the user to make passkeys their primary sign-in method moving forward.
In a user’s account settings, users can see a passkeys section similar to how they’re used to seeing a passwords section.
- FIDO UX Guideline: Display “passkeys cards” with meaningful content to give shape to passkeys.
GitHub provides all the information a user might need about their passkey: They know when it was created, when it was last used, and if the passkey was used on the browser they are using. GitHub also uses a Synced label to indicate to the user that a credential manager is making the passkey available on other devices.
- FIDO UX Guideline: Plan your UX in accordance with your unique security and business needs.
2FA is an important security and authentication setting for GitHub. When a passkey is added, it becomes, by default, the 2FA method. This screenshot shows that it is visible in the setting, showing that passkeys are the default 2FA option.
In conclusion, the GitHub implementation of passkeys is user-friendly and aligns closely with the FIDO UX guidelines. By prioritizing usability and accessibility, GitHub has paved the way for the widespread adoption of passkeys as a secure form of authentication.
Check out our community-driven directory of websites and services that use passkeys here.
Sign up to receive news and updates about Dashlane
