usePasskey

interface PasskeyState {
  isRegistering: boolean;
  isAuthenticating: boolean;
  credentials: Credential[];
  currentCredential: Credential | null;
  error: Error | null;
  isSupported: boolean;
  isConditionalUIAvailable: boolean;
}

interface PasskeyActions {
  register: (options: RegisterOptions) => Promise<Credential>;
  authenticate: (options?: AuthenticateOptions) => Promise<void>;
  listCredentials: () => Promise<Credential[]>;
  deleteCredential: (credentialId: string) => Promise<void>;
  renameCredential: (credentialId: string, name: string) => Promise<void>;
  clearError: () => void;
}

interface RegisterOptions {
  email: string;
  displayName: string;
  userVerification?: 'required' | 'preferred' | 'discouraged';
  authenticatorAttachment?: 'platform' | 'cross-platform';
  residentKey?: 'required' | 'preferred' | 'discouraged';
}

interface AuthenticateOptions {
  email?: string;
  userVerification?: 'required' | 'preferred' | 'discouraged';
  conditionalUI?: boolean;
}

interface Credential {
  id: string;
  publicKey: string;
  name: string;
  createdAt: number;
  lastUsedAt?: number;
  authenticatorAttachment?: 'platform' | 'cross-platform';
  backupEligible?: boolean;
  backupState?: boolean;
}

type UsePasskeyReturn = PasskeyState & PasskeyActions;

function PasskeyManager() {
  const {
    isRegistering,
    isAuthenticating,
    credentials,
    isSupported,
    register,
    authenticate,
    listCredentials,
    deleteCredential
  } = usePasskey();

  const handleRegister = async () => {
    try {
      const credential = await register({
        email: 'user@example.com',
        displayName: 'John Doe',
        userVerification: 'required',
        authenticatorAttachment: 'platform'
      });
      console.log('Registered:', credential);
    } catch (err) {
      console.error('Registration failed:', err);
    }
  };

  const handleLogin = async () => {
    try {
      await authenticate({
        userVerification: 'required'
      });
      // Authentication successful
    } catch (err) {
      console.error('Authentication failed:', err);
    }
  };

  if (!isSupported) {
    return <div>Passkeys not supported on this device</div>;
  }

  return (
    <div>
      <button
        onClick={handleRegister}
        disabled={isRegistering}
      >
        {isRegistering ? 'Registering...' : 'Register Passkey'}
      </button>

      <button
        onClick={handleLogin}
        disabled={isAuthenticating}
      >
        {isAuthenticating ? 'Authenticating...' : 'Sign In'}
      </button>

      <div>
        <h3>Your Passkeys</h3>
        {credentials.map(cred => (
          <div key={cred.id}>
            <span>{cred.name}</span>
            <button onClick={() => deleteCredential(cred.id)}>
              Delete
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

function LoginWithAutofill() {
  const { authenticate, isConditionalUIAvailable } = usePasskey();

  useEffect(() => {
    if (isConditionalUIAvailable) {
      // Start conditional UI - passkeys appear in autofill
      authenticate({ conditionalUI: true }).catch(() => {
        // User didn't select a passkey from autofill
      });
    }
  }, [isConditionalUIAvailable]);

  return (
    <form>
      <input
        type="email"
        autoComplete="username webauthn"
        placeholder="Email"
      />
      <button type="submit">Continue</button>
    </form>
  );
}

function RegisterOptions() {
  const { register } = usePasskey();

  const registerPlatform = () => {
    // Prefers built-in authenticator (Touch ID, Windows Hello)
    register({
      email: 'user@example.com',
      displayName: 'User',
      authenticatorAttachment: 'platform',
      residentKey: 'required' // Discoverable credential
    });
  };

  const registerCrossPlatform = () => {
    // Allows USB security keys, phones
    register({
      email: 'user@example.com',
      displayName: 'User',
      authenticatorAttachment: 'cross-platform'
    });
  };

  return (
    <>
      <button onClick={registerPlatform}>
        Use This Device
      </button>
      <button onClick={registerCrossPlatform}>
        Use Security Key
      </button>
    </>
  );
}

function CredentialList() {
  const { credentials } = usePasskey();

  return (
    <ul>
      {credentials.map(cred => (
        <li key={cred.id}>
          <span>{cred.name}</span>
          {cred.backupEligible && (
            <span className="badge">
              {cred.backupState ? '☁️ Synced' : '📱 Device-only'}
            </span>
          )}
        </li>
      ))}
    </ul>
  );
}

const { authenticate } = usePasskey();

// High security - always require biometric/PIN
await authenticate({
  userVerification: 'required'
});

// Balanced - use if available
await authenticate({
  userVerification: 'preferred'
});

// Low friction - skip if possible
await authenticate({
  userVerification: 'discouraged'
});

const { register, error } = usePasskey();

try {
  await register(options);
} catch (err) {
  switch(err.name) {
    case 'NotAllowedError':
      // User cancelled or timeout
      break;
    case 'InvalidStateError':
      // Credential already exists
      break;
    case 'NotSupportedError':
      // Algorithm or option not supported
      break;
    case 'SecurityError':
      // Origin not allowed
      break;
    case 'AbortError':
      // Operation was aborted
      break;
  }
}