UX: Designs for GitLab Passkey Support
Background
We want to support passwordless authentication out of the box in GitLab. This is done with a standard called webauthn, but most people know it as passkeys. These are a standard set by the FIDO alliance that major tech companies support, such as Apple, Google and Microsoft.
Currently we support webauthn-passkeys as a second factor. We want to bring the passkey experience to the primary GitLab login experience.
Purpose
This issue can be used to house the designs for the passkey enabled flows throughout GitLab. In addition to login, we will need a way to manage passkeys and their recovery.
We also need to take a look at this community contribution which has UI work completed for passkeys.
MVC Scope
- Primary sign-in flow and create passkey (MVC)
Iteration
- Delete passkey (add on iteration)
- Upgrade existing passkeys used as 2FA for passwordless sign in (add on iteration)
- Backup code/recovery management (add on iteration)
Proposal
Explore how GitLab can support passwordless authentication:
- How do we work passwordless authentication in our current login flows (sso, username & password, 2FA)? Should we use the icons provided by FIDO - linked in the Resources section?
- How do users add and remove passkeys for passwordless authentication? Not all Webauth device can be used for passwordless authentication, users will manage passkeys for 2FA and passwordless authentication separately in User Settings > Account
- For admins, what settings are needed to securely manage passwordless authentication across their users? Today, admins can set 2FA as a requirement for all users, what settings are needed for passwordless authentication?
The output of this issue will be the final design & spec for Passwordless Authentication and will explore, design and validate the experience.
Use cases
For all use cases, login and password can still used for authentication.
Use Case | Flows |
---|---|
Use passkeys as a primary login (user has no 2FA). |
User navigates to user settings, then adds a passkey. Login Options: User lands on login page and has two options for logging in
|
With existing 2FA, use passkeys for primary login |
User navigates to user settings, then adds a passkey. Alternative (Future)
Login Experience: User lands on login page and has two options for logging in
|
With existing 2FA, use passkeys for primary login and 2FA |
User navigates to user settings, adds a passkey and enables the setting to use passkeys as 2FA. Alternative (Future)
Login Options: User lands on login page and has two options for logging in
|
Users with SSO | Dependent on IdP settings, if local login (defined as login and password) is enabled then the above use cases would apply. |
Admin (self managed) restricts users from logging in with passkey |
Admin navigates to settings > general > permissions and restrict the primary login with passkeys. |
Exploration & Feedback
We explored in the experience in low fidelity to refine the use cases for MVP:
Exploration | Feedback and questions |
---|---|
|
Enabling passkeys as a toggle setting
Passkeys can be used for 2FA?
Questions
|
|
Questions
|
|
Questions:
|
|
We moved forward with designing the experience for sign in and passkey management
Flow & Options | Designs (linked to specific screens) |
---|---|
Sign in
Authenticating with Passkey Screen
|
|
Passkey Management Option 1: Add Passkey Management to existing area of User Settings > Account Benefits
Concerns
|
Passkeys Default State (Empty State) Name passkey after browser set-up Passkey added and registered - user can now sign in with passkey as primary login |
Passkey Management Option 2: Add Passkey Management to new area of User Settings > Authentication Benefits
Concerns
|
Manage Passkeys & 2FA - Empty Default State |
Admin setting to restrict passkey as primary sign in
Concern
|
Assuming passkeys will remain even when primary sign in is restricted - show banner to notify user that passkeys can be used for 2FA |
And sought to move forward with the following option for solution validation:
Flow | Designs |
---|---|
Option 3 Add Authentication Management to User Settings > Authentication Benefits
Cons
|
Add a device will take user to set-up method |
General design feedback
- All oAuth sign-in options under
or sign in with
replaces login and password - this is the best place to add "Sign in with passkey" - List all two-factor available methods during two-factor authentication flow (includes passkey, OTP, other WebAuthN devices)
- Improve visual distinction between
authentication methods available
andauthentication methods activated
Prototypes
- Sign in with passkey
- Add passkey
- Add 2FA
- Restrict passkey use (admin only)
Solution Validation
Final design and specs
➡ Figma link for final designs & specs
Passkey sign in
- Add FIDO passkey logo with once approved for use: https://gitlab.com/gitlab-com/legal-and-compliance/-/issues/1931
Manage authentication - passkeys
Create passkey
Admin settings - restrict use of passkeys for primary authentication
Admin Setting
User view when passkey as primary sign in is restricted