Overview

Topics: consumer, passkeys on security keys, security key, device-bound passkeys, awareness
Relevant moments in the customer journey: Awareness > Consideration > Enrollment > Management > Authentication
Created: 14 May 2022

Allow people to sign in with security keys as a second factor after entering a username and password.

NOTE: this pattern was originally published in 2022.
Also see the 2024 Design Pattern for Passkey management UI: best practices for combining all passkey types.

  • Promote user awareness of available alternatives to password-only authentication, and direct users to Security and Privacy settings to manage new sign-in options, including security keys.
  • Increase customer awareness of available alternatives to password-only authentication through a combination of messaging strategies and site information architecture updates. 
  • Relying parties (RPs) may choose to promote synced passkeys and/or security keys to their customers, depending upon the customer segments or lines of business they are targeting. 
  • Our user research indicates that customers may require multiple exposures to new authentication options before taking action to set up new sign-in method(s).

Outcomes

  • People discover additional security options for their accounts.
  • A measure of the strength of an authentication mechanism and, therefore, the confidence in it, as defined in [NIST SP 800-63-3] in terms of three levels: AAL1 (Some confidence), AAL2 (High confidence), AAL3 (Very high confidence). Most device-bound hardware security keys conform to AAL3. 
  • Phishing resistant authentication
  • Build trust from people who seek to protect valuable assets
Customer journey for security keys.

Flow

Call to action

Include a persistent call to action to update sign-in options (e.g., “To set up new sign-in options, visit Security and Privacy after signing in.”).

Notification

Employ a toast notification to direct users to Security and Privacy to add new sign-in options. Add authentication iconography on the toast notification.

Main nav

Add a “Security and Privacy” link as a destination on the main account navigation or as a peer to Settings, in the user Profile menu.

Manage

Help users compare and learn about authentication options available on your site, including security keys, by offering a Security and Privacy settings page.

Learn more

Progressively disclose more information about security keys in a “Learn more” link.

Pre-sign-in

  • Include a persistent call to action to update sign-in options (e.g., “To set up new sign-in options, visit Security and Privacy after signing in.”)

Post-sign-in

  • Employ a toast notification to direct users to Security and Privacy to add new sign-in options. Add authentication iconography on the toast notification.

Main nav

  • Add a “Security and Privacy” link as a destination on the main account navigation or as a peer to Settings, in the user Profile menu.

Management

  • Help users compare and learn about authentication options available on your site, including security keys, by offering a Security and Privacy settings page. Display an explicit recommendation that users increase the security of their account(s) by adding a second authentication method in addition to a password. Make sure this recommendation message is dismissible by the user. Use icons to tell stories. Stories are easy for users to remember and icons tell stories. Add iconography to the recommendation message on Security and Privacy settings to increase its visibility and visual interest and to signify recommended methods to add, such as passkeys and security keys. Use icons next to authentication method names as well, to distinguish each method and enhance the scannability of the page. Provide clear visual indicators to mark the sign-in method(s) in which the user is currently enrolled. Provide a brief description of the authentication process and/or unique value proposition of each method. Because more consumer awareness about security keys is needed, we recommend emphasizing that a security key is a second factor (i.e., used in addition to a password) and that multiple security keys can be used and are recommended.

“Learn more” information

  • Progressively disclose more information about security keys in a “Learn more” link. Ensure the “Learn more” link is visible before and after security key registration, as both are relevant touchpoints when users have questions or concerns about using security keys. Through user research, we’ve identified topics that addressed the top questions and concerns participants had about security keys, which served as potential barriers to adoption.

Recommendations prior to sign-in:

Outside of your website, strategically utilize multiple channels to promote Security and Privacy settings as a destination to optimize account security. 

  • Outside of the site, utilize email campaigns, home mailers, and/or social media to recommend that users visit Security and Privacy settings to learn about and enhance account security and set up MFA, including using security keys.
  • Within online communications to customers about privacy and security recommendations, always link to the Security and Privacy settings page.
  • Consider targeting specific customer profiles who might benefit the most from using security keys (e.g., high net worth banking customers) by sending educational material about authentication options, including the benefits of security keys.

Recommendations at sign-in:

Promote general awareness of the availability of an alternative to password-only authentication, rather than specifically promoting what is likely to be an unfamiliar method of security keys:

  • For RPs who offer biometrics on desktop web, indicate the availability of an alternative to password-only authentication on the sign-in UI by displaying the familiar biometric icon (i.e., a fingerprint), which users widely recognize as indicating the availability of biometric sign-in or touch unlock
  • The familiar fingerprint icon was more effective at garnering user interest in updating sign-in options than specifically referring to the unknown concept of security keys.
  • RPs who do not offer biometrics on desktop web should consider using an icon on the sign-in UI to represent the broader category of authentication (e.g., a user outline and a checkmark or a lock with asterisks to indicate a PIN code).
  • Next to the authentication icon on the sign-in UI, include brief, static messaging as a call to action to direct users to Security and Privacy settings after sign-in, to set up new sign-in options.

Recommendations after sign-in:

Within your website, make Security and Privacy settings a discoverable destination for managing account security by updating your site architecture and/or strategically promoting this settings link on your site.

  • Make Security and Privacy settings more discoverable within your site. Promote a Security and Privacy settings link within the main site navigation, or add it as a unique destination under Profile (i.e., outside of the more general Settings menu item).
  • Within your website, strategically utilize multiple messaging strategies to promote Security and Privacy as a destination to optimize account security.
  • To inspire interest across multiple site visits, utilize more than one messaging format. For example, utilize temporary messaging strategies such as banner ads or “toast” notifications to invite users to visit Security and Privacy to update their sign-in method.
  • Multiple message exposures are often necessary to inspire new sign-in method enrollment, especially for security key adoption.
  • Enrolling a security key is a multi-step process, and it requires an investment of time and effort to learn about, purchase, and enroll a security key.
  • For example, display toast notifications across multiple site visits, inviting users to visit Security and Privacy settings to update their sign-in method.

Content

Copy and edit user tested content examples to suit your needs.



We recommend increasing the security of your account(s) by adding additional authentication methods below.”



What is a security key?
A security key is a small, physical device that works in addition to your password on sites that support it. A single key can be used with multiple accounts or sites.

Why should I use a security key?
Security keys protect you against imposter websites that try to steal sign-in credentials (like usernames and passwords). Other forms of 2-factor authentication (including text, email, messages, authenticator apps, and push notifications) do not give you the same level of protection as a security key.

How security keys work
You must first add security keys using the button above. Once added, you’ll be required to use them after signing in with your username and password. Doing this creates one of the strongest forms of authentication available to protect your account.

What security technology do security keys use?
Most keys use an authentication “standard” called FIDO® which allows for secure authentication without drivers or software. When a user signs in a website with a key, FIDO® cryptographically signs a challenge from the browser that verifies the website’s actual domain name, which provides strong protection against phishing (e.g., when a fake website is used to trick users into sharing personal information). An attacker would need to control the website domain name or the browser to get a usable signature from the key.

Why do security keys look like thumb drives?
Although hardware security keys may resemble thumb drives and are sometimes inserted into your computer’s USB port, they are not storage devices. Your personal information is not trackable or linkable across sites or online accounts when using a security key.

What happens if my security key gets stolen?
The key works in addition to your password, not as a replacement for it. If someone steals the key, they still can’t get into your bank account without knowing your password (or which sites are registered with your key). You can sign in with a backup method and remove the stolen key from your account.

Add more than one security key
Adding multiple security keys is highly recommended. If your security key is lost or stolen and you do not have a registered backup security key (or other backup authentication method), access to your account could be interrupted while we verify your identity. We recommend keeping one key easily accessible and another stored separately in a safe space.

Purchase security keys
Security keys vary by manufacturer and can be purchased from mainly online retailers. We recommend FIDO certified keys. See a list of FIDOⓇ certified keys. (https://fidoalliance.org/certification/fido-certified-products/)

Name your security keys
Give your security key a friendly “nickname” that only you can see, so you know which key you registered with this account at a later point in time.

UX Research

Our research shows that, in the context of other site goals, users often require multiple exposures to the idea of setting up new sign-in options before taking action. Give users several opportunities to notice relevant messages and take action when it is convenient for them.

Our research demonstrated that even though users were not using a biometric login, a fingerprint icon triggered them to consider a non-password login.

This document provides the user experience (UX) guidelines and best practices for relying parties and implementers seeking to enable multi-factor authentication (MFA) with FIDO security keys as a second factor, based on a regulated industry (e.g., banking or healthcare) use case. These guidelines aim to accelerate decision-making during FIDO implementation and specify what information and controls should be given to users. Note that these UX recommendations are optimized for browser-based sites accessed on desktop/laptop computers, rather than mobile apps or mobile web. The guidelines do not, however, include recommendations about security policies or account recovery.

The principles in this document were developed following multiple (N = 68) sessions of moderated and unmoderated consumer research conducted by Blink, in collaboration with FIDO UX Task Force members. User research participants included consumers who owned and used security keys, primarily for work, as well as prospective security key users, who used two-factor authentication for personal online banking but had no experience with security keys prior to their research session. Note that our research scope did not include strategies to entice prospective users to purchase keys. In addition to user research, security key second-factor authentication experiences currently in the market were reviewed by the FIDO UX Taskforce and served as input during the research and evaluation process

These recommendations represent perspectives from the FIDO Alliance’s UX Task Force on how to implement MFA for FIDO security keys as a second factor on desktop/laptop for prosumers. For this document, a “prosumer” refers to a security- and privacy-conscious consumer who is an early adopter of security and privacy technologies and services in their personal lives.

Rollout strategy

  • Lead with familiar authentication language and symbols: rather than explicitly promoting the unfamiliar concept of security keys, promote the availability of alternatives to password-only sign in using the familiar fingerprint icon (if biometrics are supported) or other imagery that represents authentication, such as a lock and asterisks for a PIN.
  • Promote the Security and Privacy settings page as the on-site hub for managing and learning about account security in general and security keys specifically: encourage users to visit the Security and Privacy settings page to facilitate the discovery of security keys as a sign-in option. Create a context where users can learn about the nature and advantages of security keys and take action to identify a security key to purchase and/or enroll a security key.
  • Prepare customer support with knowledge about: How to enroll and authenticate with FIDO security keys, which security keys are FIDO Certified and compatible for use with your site, and why FIDO security keys are a safe, secure, and convenient alternative for authentication with your website
  • Strongly encourage users to enroll multiple security keys, to help ensure users are not blocked from accessing their account if a security key is lost or stolen.

Ecosystem

  • This pattern was originally published in 2022. See the 2024 Design Pattern for “Passkey management UI: best practices for combining all passkey types.

Security

  • This document provides the user experience (UX) guidelines and best practices for relying parties and implementers seeking to enable multi-factor authentication (MFA) with FIDO security keys as a second factor, based on a regulated industry (e.g., banking or healthcare) use case. These guidelines aim to accelerate decision-making during FIDO implementation and specify what information and controls should be given to users. Note that these UX recommendations are optimized for browser-based sites accessed on desktop/laptop computers, rather than mobile apps or mobile web. The guidelines do not, however, include recommendations about security policies or account recovery. 

Code

Passkeys.dev contains the basics to get started with passkey development as well as links to several tools, libraries, references, and demos. It’s created by the W3C WebAuthn Community Adoption Group and members of the FIDO Alliance. https://passkeys.dev