WebAuthn Demo - Online Register & Authenticate

WebAuthn (Web Authentication) is a W3C standard that enables strong, passwordless authentication on the web. It uses public-key cryptography, allowing users to sign in with biometrics (fingerprint, face), PIN codes, or external security keys (USB/NFC/BLE). It eliminates the risks of password reuse, phishing, and credential stuffing.

During registration, the browser generates a new public-private key pair on your authenticator (e.g., Touch ID, security key). The private key never leaves the device. The public key, along with a credential ID, is sent to the server (or stored locally in this demo). Future authentications use the private key to sign a challenge, proving possession without revealing secrets.

A discoverable credential (also called a resident key or passkey) stores user information directly on the authenticator. This enables usernameless sign-in—the browser can automatically discover which credentials are available without the user typing a username. Apple, Google, and Microsoft are actively promoting passkeys as the future of passwordless authentication.

WebAuthn is supported in all modern browsers: Chrome 67+, Firefox 60+, Safari 13+, and Edge 18+. Platform authenticators include Touch ID (macOS/iOS), Windows Hello, and Android biometrics. Cross-platform authenticators include YubiKey, Google Titan Key, and other FIDO2-compliant security keys (USB, NFC, or BLE).

WebAuthn is phishing-resistant by design. The browser binds each credential to the specific domain (RP ID) where it was created. A credential created for example.com will never work on phishing-site.com. Additionally, private keys never leave the authenticator, making server-side database breaches useless for impersonation. No shared secrets are ever transmitted.

If you lose your only authenticator, you'll need a recovery method set up in advance. Best practices include: registering multiple authenticators (e.g., a platform biometric + a USB security key as backup), storing recovery codes, or using the service's account recovery process. Many passkey ecosystems (iCloud Keychain, Google Password Manager) sync credentials across your devices securely via end-to-end encryption.

Absolutely! This demo runs entirely in your browser and uses the real WebAuthn API. Credentials are stored in localStorage for demonstration purposes. You can register credentials, authenticate, and view the technical details of each operation. Note: In production, credentials must be validated server-side with proper challenge verification.