Web Authentication and Passkeys Cheat Sheet

Web Authentication (WebAuthn) is a W3C standard that enables passwordless authentication using public key cryptography. Passkeys are FIDO2 credentials that replace passwords with cryptographic key pairs, providing phishing-resistant authentication through biometrics, PINs, or security keys. Built on the Credential Management API, WebAuthn creates strong, device-bound credentials that are never transmitted to servers, fundamentally transforming how users authenticate on the web. The private key remains secure on the user's device while the public key is stored on the server, making credential theft and replay attacks nearly impossible.

What This Cheat Sheet Covers

This topic spans 16 focused tables and 125 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.

Table 1: Core WebAuthn API MethodsTable 2: Registration OptionsTable 3: Authentication OptionsTable 4: PublicKeyCredential Response PropertiesTable 5: Credential Types and DiscoverabilityTable 6: Authentication Factors and User VerificationTable 7: Authenticator TypesTable 8: Conditional UI and AutofillTable 9: Relying Party Server OperationsTable 10: AttestationTable 11: WebAuthn ExtensionsTable 12: Cross-Device AuthenticationTable 13: Browser Support and PolyfillsTable 14: Migration Patterns from PasswordsTable 15: Security ConsiderationsTable 16: UX Best Practices

Table 1: Core WebAuthn API Methods

WebAuthn provides two primary API methods for credential lifecycle management. The navigator.credentials.create() method registers new passkeys during account creation or credential addition, while navigator.credentials.get() authenticates users with existing passkeys. Both methods return promises and trigger browser UI for user interaction with authenticators.

Method	Example	Description
navigator.credentials.create()	`const credential = await navigator.credentials.create({` `publicKey: options` `});`	Creates a new passkey by generating a public/private key pair on the authenticator and returning a PublicKeyCredential containing the public key and attestation data for server storage.
navigator.credentials.get()	`const assertion = await navigator.credentials.get({` `publicKey: options` `});`	Authenticates a user with an existing passkey by prompting for user verification and returning a signed assertion that proves possession of the private key.
PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable()	`const available = await PublicKeyCredential.` `isUserVerifyingPlatformAuthenticatorAvailable();`	Checks if the device has a built-in platform authenticator (like Touch ID or Windows Hello) capable of user verification before attempting passkey operations.
PublicKeyCredential.getClientCapabilities()	`const caps = await PublicKeyCredential.` `getClientCapabilities();`	Returns browser capabilities including support for conditional UI, platform authenticators, and hybrid transport for cross-device authentication.

Table 1: Core WebAuthn API Methods

Method	Example	Description
navigator.credentials.create()	`const credential = await navigator.credentials.create({` `publicKey: options` `});`	Creates a new passkey by generating a public/private key pair on the authenticator and returning a PublicKeyCredential containing the public key and attestation data for server storage.
navigator.credentials.get()	`const assertion = await navigator.credentials.get({` `publicKey: options` `});`	Authenticates a user with an existing passkey by prompting for user verification and returning a signed assertion that proves possession of the private key.
PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable()	`const available = await PublicKeyCredential.` `isUserVerifyingPlatformAuthenticatorAvailable();`	Checks if the device has a built-in platform authenticator (like Touch ID or Windows Hello) capable of user verification before attempting passkey operations.
PublicKeyCredential.getClientCapabilities()	`const caps = await PublicKeyCredential.` `getClientCapabilities();`	Returns browser capabilities including support for conditional UI, platform authenticators, and hybrid transport for cross-device authentication.