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 that the User has possession of the credential private key, which was generated during the registration ceremony, and consents to the authentication transaction.

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.

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.

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.

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.

Signing in from Another Device

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.

Synced passkeys allow you to log in seamlessly in other devices. Grab another device, such as a smartphone, and visit the provided URL or scan the provided QR code to see synced passkeys action.

Complete the Passkeys Demo

Once you have tried out using synced passkeys, you can learn how to delete passkeys and complete this demo. Alternatively, you can also delete all your demo data now.