Passkey User Experience

Passkeys can replace passwords outright, or supplement them for seamless MFA.

They're fast and easy to use, with nothing to type or remember.

Since they're natively supported by browsers and operating systems, they provide their own native UI that feels right at home. There's no need to open a password manager, switch apps, or pull out your phone.

Here's how they look on a number of different platforms:

Passkeys on iOS

iOS with Face ID

Passkeys on Android

Android with fingerprint scanning

Passkeys on macOS (autofilled)

macOS desktop - autofill UI

These may change over time, and can depend on the device, operating system, whether you have multiple accounts, and more. Screenshots are from mid-2024.

You can use passkeys alongside any UI you want.

Using a hardware key

In addition to passkeys, WebAuthn supports removable hardware security keys.

WebAuthn with a USB key

Signing in with a hardware security key

SnapAuth supports U2F and other security keys with no additional configuration required. Users that want to use a hardware key will be able to register and authenticate with them, just like when using passkeys.

They work on any current laptop or desktop computer, and nearly all current smartphones. Hardware keys are completely cross-platform, can be used over USB-A, USB-C, Lightning, and NFC, and are available online for under $20.

Unlike passkeys, hardware keys cannot be backed up. This is part of why we highly recommend letting users register multiple credentials.

Cross-device authentication

Using a passkey from another device

Scan a code to sign in from another device

If you've set up a passkey on one device and need to sign in on a device from a different ecosystem (e.g. you registered on your iPhone and need to sign in from your Windows laptop), it's no problem at all. You'll be prompted to scan a QR code, and within a couple seconds it'll be just like having signed in from your own device.

This also lets you sign in on a friend or colleague's device.

Even though this looks like a simple process, it's still extremely secure. The devices need to be near each other - a user cannot be remotely phished by scanning a code sent to them.

Like hardware keys, supporting cross-device authentication is automatic.

Localization and internationalization

System passkey dialog displayed in French

Passkey dialogs are automatically translated to the system language

Since passkey dialogs are provided by the system, they are already localized. They'll be displayed in the user's OS language automatically.

You should translate the text of your own buttons; the rest will be done for you.

Dark mode and accessibility

System passkey dialog displayed in Chinese with dark mode enabled

Dark mode comes for free

As a system-managed interface, signing in with passkeys has all of the benefits of the OS's design system. They'll respect the user's preference for light and dark modes, and take advantage of all the system accessibility tools.

Adding passkeys to your site should not broaden the scope for ADA compliance or similar regulations.

Customization

You have complete control when the passkey prompts are displayed. There's no restriction about what your site or app looks like - any button click event can start the process.

Whatever style guides and design language you have in place will work just fine. SnapAuth doesn't even offer pre-made UIs because they simply don't make sense for passkeys (and if your experience is anything like ours, you'd spend more time customizing the widget than building it yourself).

The dialog itself is managed by the system and mostly cannot be controlled. This ensures that users have a consistent and predictable experience any time they're signing in with passkeys.

Live Demo

We have a demo available at https://demo.snapauth.guide, so you can experience passkeys on your own system.

Integrate passkeys today

SnapAuth will help you integrate passkeys in minutes so you can quickly benefit from their ease-of-use.

Get started →

Give us a try today - no credit card required!