How user authentication works with passkeys
User authentication is a WebAuthn ceremony where a User (you) and the User’s Client (your browser, which is connected to at least one Authenticator), work together to cryptographically prove to a Relying Party (a web application) that the User controls the credential private key of a previously registered public key credential (your passkey).
That is, the User presents to the Relying Party an assertion that proves that the User is who registered the public key credential by demonstrating that the User has possession of the credential private key and consents to the authentication transaction.
1Get a challenge and other authentication options
The Authenticator needs parameters (authentication options) to discover a public key credential to use for authentication that satisfies the security requirements of the Relying Party.
The authentication options must include a challenge that is randomly generated by the Relying Party in a trusted environment, such as on the server-side, to avoid replay attacks.
For this demo, you can get the required authentication options from the server.
2Select a passkey credential
On the client-side, the Relying Party calls the navigator.credentials.get() method from the Web Authentication API to authenticate the user with public key credentials, which are based on asymmetric cryptography.
The Relying Party passes to this method the authentication options, which triggers the Client to use them as criteria to narrow down the authenticators and credentials that it can present to the User for authentication.
The User must indicate consent to get the credential and proceed with the authentication ceremony. As such, the Authenticator runs a test of User presence and shows a UI that prompts you to provide an authorization gesture, which is a physical interaction with the Authenticator (such as a tap or biometric input).
Follow any on-screen prompts you get to interact with the Authenticator.
3Verify the passkey credential
The Relying Party Server needs to verify the assertion response by checking its signed challenge using the stored credential public key associated with the credential ID to complete the authentication process.
As such, the Relying Party Client Application needs to send the assertion response to the Relying Party Server, which includes the credential ID, user ID, and signed challenge.
4Get user profile information
Once you log in using your passkey, you'll see your user profile information, such as your username, and a list of the passkeys associated with your account. Each passkey entry will show you the passkey name and the time and date when you created or last used the passkey.
Cross-Device Authentication
Depending on the Authenticator that you used to create your passkey, you may be able to log in to this demo app using another Client Device and Platform.
After you log in, you can grab another device, such as a smartphone, and try out the cross-device/cross-platform workflow by visiting the provided URL or by scanning the provided QR code.
Complete the Passkeys Demo
Once you have tried the cross-device/cross-platform login flow, you can learn how to delete passkeys and complete this demo. Alternatively, you can also delete all your demo data now.