Passkeys and WebAuthn for Frontend Authentication
Registration
Credential creation
- - Challenge-bound operation
- - Store credential metadata
Authentication
Assertion verification
- - Origin-bound proof
- - Server signature verification
Recovery
Lost-device resilience
- - Fallback design required
- - Avoid weak bypass paths
Platform reality
Support variability
- - Browser/device differences
- - Cross-device UX considerations
Core Lens
Design around ceremony correctness, recovery UX, and platform support constraints.
Flow
WebAuthn is a browser authentication standard built on public-key cryptography. Instead of sending passwords, authenticators generate signatures proving possession of a private key associated with a particular origin.
Passkeys are a product-level evolution of WebAuthn that allow credentials to be synced across devices or stored securely in platform key stores.
Frontend systems are responsible for initiating the WebAuthn ceremonies, guiding the user through authentication UX, and handling capability differences across browsers and devices.
Quick Decision Guide
Senior-Level Decision Guide:
- Passkeys use WebAuthn public-key authentication instead of passwords. - WebAuthn relies on strict challenge verification and origin binding. - Passkeys improve phishing resistance because credentials cannot be reused across origins. - Recovery flows and cross-device usability are essential for real adoption. - Platform support and UX fallbacks must be designed intentionally.
WebAuthn Mental Model
Three primary actors participate in WebAuthn:
The authenticator holds the private key. The server stores the public key.
Authentication proves possession of the private key without transmitting it.
Why Passkeys Are Phishing Resistant
WebAuthn credentials are bound to a specific origin.
This means:
example.com cannot authenticate on fake-example.comThis origin binding is the core security improvement compared to password authentication.
Registration Ceremony
The registration ceremony creates a new credential.
Typical flow:
1. Server generates a cryptographic challenge.
2. Browser calls navigator.credentials.create().
3. Authenticator generates a new key pair.
4. Public key and attestation data are returned.
5. Server verifies the response and stores the credential.
Challenges must be short-lived and single-use to prevent replay attacks.
Authentication Ceremony
During authentication:
1. Server generates a login challenge.
2. Browser calls navigator.credentials.get().
3. Authenticator signs the challenge using the private key.
4. Server verifies the signature using the stored public key.
Successful verification proves the user controls the registered authenticator.
Passkeys and Discoverable Credentials
Passkeys are typically implemented as discoverable credentials.
This allows:
Passkeys can also sync across devices through platform credential managers.
Frontend UX Responsibilities
Frontend applications control ceremony UX and error handling.
Important UX concerns include:
Recovery and Account Portability
Real systems must handle users losing devices or switching platforms.
Recovery mechanisms may include:
Weak recovery paths can undermine the entire security model.
Platform and Browser Variability
WebAuthn capabilities vary across environments:
Frontend apps should detect capabilities and adapt authentication UX accordingly.
Security Pitfalls
Common implementation mistakes include:
Proper verification logic on the server is critical to maintaining WebAuthn security guarantees.
Interview Rubric (Senior Level)
A strong answer should explain:
Strong answers connect security guarantees with real-world adoption challenges.