1. Home
2. web
3. WebAuthn and Passkeys: Passwordless Authentication in 2024

Passwords have been the primary authentication mechanism for decades, but they come with well-documented security and usability problems. WebAuthn (Web Authentication) and the emerging passkey ecosystem promise to replace passwords with cryptographically secure, phishing-resistant authentication. As of 2024, passkey support has reached critical mass across all major platforms, making this the ideal time to implement passwordless authentication.

Understanding WebAuthn

WebAuthn is a W3C standard that enables public-key cryptography-based authentication on the web. The core flow involves two operations: registration and authentication. During registration, the server sends a cryptographic challenge to the client, the authenticator creates a new key pair, and the public key is stored on the server. During authentication, the server sends a challenge, the authenticator signs it with the private key, and the server verifies the signature against the stored public key.

Registration:  Server → Challenge → Authenticator (key pair) → Public key → Server
Authentication: Server → Challenge → Authenticator (signs) → Signature → Server (verifies)

The private key never leaves the authenticator device, making WebAuthn inherently resistant to phishing, credential stuffing, and server-side database breaches.

Passkey Concepts

A passkey is a discoverable WebAuthn credential that is stored securely on the user’s device and synchronized across devices through platform-specific mechanisms such as iCloud Keychain, Google Password Manager, or Microsoft Account. Passkeys extend standard WebAuthn with user-visible account management, cross-device synchronization, biometric or PIN verification, and QR-code-based cross-device authentication. Unlike traditional credentials, passkeys are designed to be managed by end users directly.

Platform vs Roaming Authenticators

Platform authenticators are built into the device—Touch ID, Windows Hello, or Android biometric authentication. Roaming authenticators are external security keys such as YubiKey or Titan Key, connected via USB, NFC, or Bluetooth. The choice between them depends on your security and user experience requirements.

Conditional UI

Conditional UI is a WebAuthn feature that allows the browser to suggest passkey autofill during the login flow. Users see passkey options alongside saved passwords in the autofill dropdown, dramatically improving conversion rates.

const credential = await navigator.credentials.get({
  publicKey: publicKeyCredentialRequestOptions,
  mediation: "conditional",
});

Implementation requires three steps: setting mediation: "conditional" in the credential get call, adding autocomplete="username webauthn" to the username input element, and properly handling the autofill ceremony. This feature integrates passkey authentication into the familiar autofill experience that users already understand.

Implementation with JavaScript

The following code demonstrates a basic WebAuthn registration and authentication flow:

// Registration
const publicKeyCredential = await navigator.credentials.create({
  publicKey: {
    challenge: crypto.getRandomValues(new Uint8Array(32)),
    rp: { name: "My App", id: "example.com" },
    user: {
      id: crypto.getRandomValues(new Uint8Array(16)),
      name: "[email protected]",
      displayName: "User",
    },
    pubKeyCredParams: [{ alg: -7, type: "public-key" }],
    authenticatorSelection: {
      residentKey: "preferred",
      userVerification: "preferred",
    },
  },
});

// Authentication
const assertion = await navigator.credentials.get({
  publicKey: {
    challenge: crypto.getRandomValues(new Uint8Array(32)),
    allowCredentials: credentials.map(cred => ({
      id: base64urlToBytes(cred.id),
      type: "public-key",
    })),
    userVerification: "preferred",
  },
});

Server-side verification requires parsing the attestation object, verifying the cryptographic signature, and checking the origin against the relying party ID. Libraries such as @simplewebauthn/server for Node.js simplify this process considerably.

Security Considerations

WebAuthn eliminates entire categories of attacks, including phishing, credential stuffing, man-in-the-middle, and database breaches. However, careful implementation is still required. Always verify that the origin matches the relying party ID, generate cryptographically random single-use challenges, implement rate limiting for authentication attempts, and provide recovery options for device loss. During the transition period, maintain a password fallback while encouraging users to adopt passkeys through progressive enrollment after successful password login.

Conclusion

Passkeys represent the most significant improvement in web authentication security in a decade. With all major platforms now supporting the ecosystem and users increasingly familiar with biometric authentication, 2024 is the year to adopt passkeys. The implementation complexity is moderate, and the security and user experience benefits are substantial. By removing passwords from the equation, you eliminate entire categories of attacks while providing a smoother authentication experience for your users.