Overview

Topics: Consumer, Passkeys, WebAuthn, Manage Passkeys, Passkey Cards
Relevant moments in the customer journey: Awareness > Consideration > Enrollment > Management > Authentication
Created: 6 May 2023

Allow people to create, see, and manage passkeys in account settings.

  • If a passkey doesn’t exist for this person: include the passkeys hero prompt at the top of Account Settings. 
  • If passkeys exist for this person: allow them to see it as a “card”. One card per passkey.
  • If passkeys exist for this person: place the passkeys UI above passwords in the interface.
  • If passkeys exist for this person: offer the ability to remove them.

Outcomes

  • Increase the use of phishing resistant authentication and achieve authentication assurance level 2 (AAL2) without multiple authentication steps.
  • People appreciated the option to create a passkey to update their existing account at any point within Account Settings. 
  • People find Account Settings as an intuitive and useful place to proactively learn about and update authentication settings.
UX architectural diagram of the workflow for creating a passkey from Account Settings.

Flow

Passkey hero

If a passkey doesn’t exist for this person: display a passkeys hero prompt at the top of Account Security settings.

Passkey cards

If a passkey exists for this person: display passkey cards (one per passkey), information about passkeys, and actions for passkeys.

To view full screen, hover the prototype, then tap the expand icon.

To view full screen, hover the prototype, then tap the expand icon.

Content

Learn what user-tested button labels, phrases help people. Copy and edit content examples to suit your needs.


With passkeys, you don’t need to remember complex passwords.


What are passkeys?
Passkeys are encrypted digital keys you create using your fingerprint, face, or screen lock.

Where are passkeys saved?
Passkeys are saved in your password manager, so you can sign in on other devices.

UX Research

Account settings is the center of gravity for passkeys

Most participants appreciated the option to create a passkey to update their existing account at any point within Account Settings. Most participants described Account Settings as an intuitive and useful place to proactively learn about and update authentication settings.

Associate passkey with familiar concepts

The research indicated that participants sought to understand the nature and value of passkeys, but vague or technical explanations often led to confusion and passkey creation abandonment. However, familiar biometric iconography and brief messaging that compared passkeys to familiar technologies was most effective at providing the right level of information to inform participants about passkeys and give them the confidence to proceed with using this unfamiliar technology. For people who already have a passkey, the passkey card(s) affords then an unmistakable object in the interface they can later see in their mind, find later in Account Settings, and use to get helpful information about the passkey.

Rollout strategy

  • Every rollout of passkeys should make use of this pattern. 

Ecosystem

  • Passkeys may require specific hardware or software support on users’ devices. Ensure that users are aware of the compatibility requirements for using passkeys and provide guidance on compatible devices and browsers.
  • In the native mobile app context, signing in with a passkey differs from the biometric sign-in experience that has existed for many years. Signing in with a passkey requires an additional tap.

Security

  • DigitalBiz gracefully falls back to an email OTP. The graceful fallback option you choose should match your unique security and business goals. Plan your UX in accord with your unique security and business needs. The guidelines focus on UX concepts that are unique to FIDO with synced passkeys. You will see various forms of identity proofing and non-FIDO authentication examples throughout this work. The guidelines do not intend to prescribe security guidelines for identity proofing or other non-FIDO authentication mechanisms as they are unique to each RP and based on their own unique business needs and security policy. 

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