DEV Community

Cover image for WebAuthn Cheat Sheet for Developers
corbado
corbado

Posted on • Originally published at corbado.com

WebAuthn Cheat Sheet for Developers

WebAuthn and passkeys are the future of passwordless authentication.
Implementing passkeys requires good knowledge about the WebAuthn specification - which is everything else than user-friendly and can be tough to remember.

This cheat sheet contains everything you need to remember about WebAuthn & passkeys:

A 2-sided cheat sheet about WebAuthn & passkeys

To read the full content of the cheat sheet, head over to the original article. But here's a preview of its content:

WebAuthn Ceremonies

Authentication with passkeys is based on the two processes, also called ceremonies, registration (aka the “attestation phase”) and login (aka the “assertion phase”).
Each phase requires a random challenge generated by the server, which is signed by the authenticator and sent back to the WebAuthn server to verify the user.


Registration (attestation)

Process flow of the registration in WebAuthn
The registration ceremony uses two main objects: PublicKeyCredentialCreationOptions and attestation.
Former is created by the WebAuthn server and contains instructions and settings for the new credential , aswell as other relevant data. The latter is created by the authenticator and passed back to the server, including information about the newly created credential.
To see a full JSON example of both objects, check out the full article or cheat sheet.

Login (assertion)

Process flow of the login in WebAuthn
The login ceremony uses two main objects: PublicKeyCredentialRequestOptions and assertion.
Former is created by the WebAuthn server and contains e.g. the cryptographic challenge for the authentication process. The latter is created by the authenticator and later passed back to the server, including the signed challenge to verify ownership over the private key.
To see a full JSON example of both objects, check out the full article or cheat sheet.

Conditional UI

Conditional UI improves the UX of passkeys by showing the user all of his available passkeys. This way he can choose a credential and doesn't even need to remember and type in his username.
The login flow with Conditional UI requires a few additional methods compared to the regular login ceremony:
Login Flow with Conditional UI

Download the Cheat Sheet PDF or continue reading the original article for:

  • a detailed breakdown of all objects & attributes in WebAuthn
  • code examples to implement Conditional UI
  • a database schema and information for implementing the WebAuthn server

Top comments (0)