Optimize passkey user experience and conversion rates for web applications
Username-initiated sign-in via email OTP
Device-initiated sign-in via passkey autofill
Adding autofill to your sign-in page
Presenting a passkey sign-in button as an alternative authentication option
Clicking the 'Sign in with passkey' button when the device has a passkey available
Clicking the 'Sign in with passkey' button when the device can't find any available passkey
Multiple passkeys available for different accounts on the same device
allowCredentials
it’s important to clearly present a backup authentication option and avoid leading users into dead ends when their device doesn’t have any passkeys available.
allowCredentials
parameter. It also provides a clear way to fall back to alternate authentication methods.A user is prompted to add a passkey after signing in.
An example of a prompt to add a passkey to a device.
webauthnCredential.aaguidMapping
object. The name
field will contain the name of the credential manager, e.g. iCloud Keychain, where the
passkey is stored. The svgDark
/svgLight
fields contain the SVG icons for the credential manager.
In the area of your application where user’s manage their authentication options, you can utilize these fields to display the user’s passkeys:
Displaying a list of the user's passkeys.
webauthnCredential.aaguidMapping
object is available for most passkeys, it’s not
guaranteed to be present. As an alternative, you can use the webauthnCredential.parsedUserAgent
object to display details about the device the passkey was created on.