Sign In with a Passkey

Table of contents

Overview

Topics: consumer, passkey, WebAuthn, sign in
Relevant moments in the customer journey: Awareness > Consideration > Enrollment > Management > Authentication
Created: 6 May 2023

Allow people to sign in with a passkey and other methods.

  • Enable autofill by adding autocomplete=”webauthn” to the username input field.
  • Support graceful fallback to other sign in methods. Allow people to enter another identifier to sign in or create an account.
  • Our research explored participants’ success and satisfaction with a dedicated “Sign in with a passkey” link, buttons, and autofill. Our testing indicates that autofill ensured the highest success for people to sign in with a passkey.

Outcomes

UX architecture diagram of the workflow for signing in.

Flow

Step 1

Sign in or Create account button.

Step 2

Enable autofill on the identifier input field.

Step 3

Use screen lock

Step 4

Successful screen lock

Step 5

Successful sign in

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

Link to

On the homepage, offer one affordance for both sign-in and account creation. The research indicated that the action of creating an account was more discoverable on DigitalBiz when the sign-in and account creation options were combined, rather than surfacing the account creation option after people opted to sign in. In addition, some participants reported that occasionally they are uncertain whether they have an account, and a multipurpose button serves their needs.

Autofill usability

The research explored participants’ success and satisfaction with a dedicated “Sign in with a passkey” link, buttons, and autofill. Our testing indicates that autofill ensured the highest success for people to sign in with a passkey. Autofill makes passkey sign in delightfully fast and efficient. The research indicated when autofill was enabled, participant responses to signing in with a passkey were overwhelmingly positive. The most frequently used adjectives to describe signing in with a passkey with autofill were “simple, fast, efficient, and seamless”.

Rollout strategy

  • For service providers may choose phased rollout strategy which initially only allows people to create passkeys from their account settings. Then, as data is gathered about the passkey sign in experiences unique to their needs, they can expand the number of places where a passkey can be created, including during account creation.
  • The service provider should develop a communication plan to educate people about the availability of passkeys and their benefits. To reach people effectively, the service provider may leverage multiple communication channels, such as in-app notifications, email, and online help resources, that align with their unique security and business goals.

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