Project 28, Security and auth

Passkey Login Demo

Sign up and sign in with your fingerprint, face or phone instead of a password. Every step of the WebAuthn exchange is shown, including the signature check.

Main API: WebAuthn (passkeys)
Verifies with: Web Crypto ECDSA
Dependencies: None
Your browser: Checking

Your account

Username

Accounts on this demo

What happened

Each step of the last action.

How it works

RegisterThe page sends a random challenge. Your device makes a new key pair, keeps the private key, and returns the public key.
Sign inA new challenge goes to the device, which signs it after you unlock with your fingerprint, face or PIN.
VerifyThe signature is checked against the saved public key. In a real app your server does this step, never the browser.

// Register: the device makes a key pair and returns the public key
const cred = await navigator.credentials.create({ publicKey: {
  challenge: crypto.getRandomValues(new Uint8Array(32)),
  rp: { name: "My App" },
  user: { id: userId, name: "rafi@example.com", displayName: "Rafi" },
  pubKeyCredParams: [{ type: "public-key", alg: -7 }],   // ES256
  authenticatorSelection: { residentKey: "required", userVerification: "preferred" },
}});
// Sign in: the device signs a new challenge
const assertion = await navigator.credentials.get({ publicKey: { challenge, userVerification: "preferred" } });
// Server: verify assertion.response.signature with the saved public key