Feature-detect passkey support

async function isPasskeySupported(): Promise<boolean> {
  if (!window.PublicKeyCredential) return false;
  if (!PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable) return false;
  if (!PublicKeyCredential.isConditionalMediationAvailable) return false;
  
  // Platform authenticator (Touch ID, Windows Hello)?
  const platform = await PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable();
  // Conditional UI (autofill)?
  const conditional = await PublicKeyCredential.isConditionalMediationAvailable();
  
  return platform || conditional;
}

"use client";
import { useEffect, useState } from "react";

export function PasskeyLoginButton() {
  const [supported, setSupported] = useState<boolean | null>(null);
  
  useEffect(() => {
    isPasskeySupported().then(setSupported);
  }, []);
  
  if (supported === null) return null;  // still detecting
  if (!supported) return null;  // hide button
  
  return <button onClick={startPasskeyFlow}>Sign in with passkey</button>;
}

useEffect(() => {
  if (typeof window === "undefined") return;
  if (!PublicKeyCredential?.isConditionalMediationAvailable) return;
  
  PublicKeyCredential.isConditionalMediationAvailable().then((available) => {
    if (!available) return;
    
    navigator.credentials.get({
      publicKey: { challenge: getChallenge(), ... },
      mediation: "conditional",
    }).then((cred) => {
      // User picked a passkey from autofill
      submitToServer(cred);
    });
  });
}, []);

function LoginPage() {
  const [supported, setSupported] = useState<boolean | null>(null);
  useEffect(() => { isPasskeySupported().then(setSupported); }, []);
  
  return (
    <>
      {supported === true && <PasskeyButton />}
      <PasswordForm />
      <MagicLinkButton />
    </>
  );
}

// At passkey enrollment, set:
document.cookie = `passkey_enrolled=true; max-age=${365 * 24 * 3600}`;

// At login:
const hasEnrolled = document.cookie.includes("passkey_enrolled=true");
if (hasEnrolled) {
  highlightPasskeyButton();
}

// In middleware
const ua = req.headers.get("user-agent");
const supportsPasskey = checkUaSupport(ua);
res.headers.set("x-passkey-supported", supportsPasskey ? "yes" : "no");

const supported = useServerHint("x-passkey-supported") === "yes";