Passkey

import "@picocss/pico";
import { useState } from "react";
import { PrldSessionClient, PrldErrors, isPasskeySupported } from "@prelude.so/js-sdk";

const client = new PrldSessionClient({ domain: `${import.meta.env.VITE_APP_ID}.session.prelude.dev` });

export default function App() {
  const [view, setView] = useState("login"); // login | code | enroll
  const [email, setEmail] = useState("");
  const [code, setCode] = useState("");
  const [scoped, setScoped] = useState(false);
  const [registered, setRegistered] = useState(false);
  const [error, setError] = useState(null);

  // ── Login: email OTP ────────────────────────────────────────────
  const handleSendOTP = async (e) => {
    e.preventDefault();
    setError(null);
    try {
      await client.startOTP({ identifier: { type: "email_address", value: email } });
      setView("code");
    } catch (err) {
      setError(err.message);
    }
  };

  const handleCheckLogin = async (e) => {
    e.preventDefault();
    setError(null);
    try {
      await client.checkOTP({ code });
      setView("enroll");
    } catch (err) {
      if (err instanceof PrldErrors.BadCheckCode) setError("Wrong code.");
      else setError(err.message);
    }
  };

  // ── Login: passkey as a primary factor ──────────────────────────
  const handleLoginPasskey = async () => {
    setError(null);
    try {
      await client.loginWithPasskey();
      setView("enroll");
    } catch (err) {
      if (err instanceof PrldErrors.Unauthorized) {
        setError("No passkey matched — sign in with email to enroll your first one.");
      } else {
        setError(err.message);
      }
    }
  };

  // ── Step 1: grant the scope (direct step-up, immediate) ─────────
  const handleGrantScope = async () => {
    setError(null);
    try {
      const { status } = await client.requestStepUp({ scope: "prld:passkey:write" });
      if (status === "continue") setScoped(true); // session refreshed with the scope
      else if (status === "block") setError("Scope denied by configuration.");
    } catch (err) {
      setError(err.message);
    }
  };

  // ── Step 2: register, now that the session holds the scope ──────
  const handleRegister = async () => {
    setError(null);
    try {
      await client.registerPasskey({ username: email || "user@example.com" });
      setRegistered(true); // session-bound scope persists — can register again
    } catch (err) {
      if (err instanceof PrldErrors.InsufficientScope) {
        setError("Grant prld:passkey:write first.");
      } else {
        setError(err.message);
      }
    }
  };

  // ── Render ──────────────────────────────────────────────────────
  return (
    <>
      <style>{`body, #root { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; padding: 0; }`}</style>
      <main style={{ textAlign: "center", maxWidth: "600px", width: "100%" }}>
        <h1>Passkeys</h1>
        {!isPasskeySupported() && <p>WebAuthn not supported in this browser.</p>}
        {error && <p role="alert" style={{ color: "var(--pico-color-red-500)" }}>{error}</p>}

        {view === "login" && (
          <>
            <form onSubmit={handleSendOTP}>
              <input type="email" placeholder="you@example.com" value={email} onChange={(e) => setEmail(e.target.value)} required />
              <button type="submit">Send email code</button>
            </form>
            <button className="secondary" onClick={handleLoginPasskey} disabled={!isPasskeySupported()}>
              Sign in with a passkey
            </button>
          </>
        )}

        {view === "code" && (
          <form onSubmit={handleCheckLogin}>
            <input type="text" placeholder="Enter email code" value={code} onChange={(e) => setCode(e.target.value)} required />
            <button type="submit">Verify</button>
          </form>
        )}

        {view === "enroll" && (
          <article>
            <p style={{ display: "flex", gap: "0.5rem", justifyContent: "center" }}>
              <button onClick={handleGrantScope}>
                1. Grant prld:passkey:write
              </button>
              <button onClick={handleRegister} disabled={!isPasskeySupported() || !scoped}>
                2. Register a passkey
              </button>
            </p>
            {scoped && !registered && <p><small>Scope granted — you can register now.</small></p>}
            {registered && <p><small>Passkey registered — refresh to log in with passkey.</small></p>}
          </article>
        )}
      </main>
    </>
  );
}