WebAuthn / Passkeys

Phishing-proof authentication with biometrics and security keys.

Why WebAuthn?

Phishing-proof - credentials are bound to origin
No shared secrets - private key never leaves device
User-friendly - Face ID, Touch ID, Windows Hello
HIPAA compliant - mandatory for healthcare realms

Register a Passkey

import { useAuth } from '@zalt/react';

function PasskeySetup() {
  const { webauthn } = useAuth();

  const registerPasskey = async () => {
    try {
      const result = await webauthn.register({
        name: 'My MacBook', // Optional friendly name
      });
      console.log('Passkey registered:', result.credentialId);
    } catch (error) {
      console.error('Registration failed:', error);
    }
  };

  return (
    <button onClick={registerPasskey}>
      <Fingerprint /> Add Passkey
    </button>
  );
}

Authenticate with Passkey

import { useAuth } from '@zalt/react';

function PasskeyLogin() {
  const { webauthn } = useAuth();

  const loginWithPasskey = async () => {
    try {
      const { user, tokens } = await webauthn.authenticate();
      console.log('Logged in as:', user.email);
    } catch (error) {
      console.error('Authentication failed:', error);
    }
  };

  return (
    <button onClick={loginWithPasskey}>
      Sign in with Passkey
    </button>
  );
}

Manage Credentials

// List all passkeys
const credentials = await webauthn.listCredentials();

// Remove a passkey
await webauthn.removeCredential(credentialId);

Supported Authenticators

Face ID

Touch ID

Windows Hello

YubiKey