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:
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.
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
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
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
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.
Give us a try today - no credit card required!