WebAuthn Demo

This page demonstrates the WebAuthn API for passkey-based authentication without using any external libraries.

How to use this demo:

  1. Enter your username in the field below
  2. Choose between standard registration or resident key registration
  3. Follow the browser prompts to register your passkey
  4. Once registration is complete, the login section will automatically appear
  5. Use your registered passkey to login
  6. View the detailed authentication response
  7. Use the logout button to clear credentials and start over

Note: Your credential will be saved in this browser's session storage. Clearing your browser data or closing the window will require you to register again.

Register a Passkey

Choose your registration method:

Standard vs. Resident Keys

WebAuthn supports two types of credential storage models:

Standard Passkey

  • Server stores the credential ID
  • Username is required for login
  • Authenticator doesn't store user information

Resident Key (Discoverable Credential)

  • Credential is stored on the authenticator
  • Username NOT required for login (passwordless)
  • Enables true passwordless authentication

Registration Code Examples

Standard Passkey Options

// Standard registration
{
  challenge: new Uint8Array([...]),
  rp: {
    name: "WebAuthn Demo",
    id: window.location.hostname
  },
  user: {
    id: new Uint8Array([...]),
    name: username,
    displayName: username
  },
  pubKeyCredParams: [
    { type: "public-key", alg: -7 }
  ],
  authenticatorSelection: {
    userVerification: "preferred"
  }
}

Resident Key Options

// Resident key registration
{
  challenge: new Uint8Array([...]),
  rp: {
    name: "WebAuthn Demo",
    id: window.location.hostname
  },
  user: {
    id: new Uint8Array([...]),
    name: username,
    displayName: username
  },
  pubKeyCredParams: [
    { type: "public-key", alg: -7 }
  ],
  authenticatorSelection: {
    requireResidentKey: true,
    residentKey: "required",
    userVerification: "preferred"
  }
}