@wizzlethorpe/vaults 0.4.0 → 0.6.0

package/dist/render/auth-template.js

@@ -5,13 +5,16 @@
 export function renderAuthMiddleware(cfg) {
     const rolesLiteral = JSON.stringify(cfg.roles);
     const passwordsLiteral = JSON.stringify(cfg.rolePasswords);
+    const patreonLiteral = JSON.stringify(cfg.patreon ?? null);
     return `// Auto-generated by the vaults CLI. Do not edit by hand.
 // Roles, password hashes, and routing live here so the deployed Function
 // is fully self-contained and doesn't need any other binding besides
-// SESSION_SECRET (set via wrangler secret).
+// SESSION_SECRET (set via wrangler secret). When Patreon is configured,
+// PATREON_CLIENT_SECRET also has to be set as a Wrangler secret.
 
 const ROLES = ${rolesLiteral};
 const PASSWORDS = ${passwordsLiteral};
+const PATREON = ${patreonLiteral};
 const COOKIE_NAME = "vault_role";
 // Non-HttpOnly companion cookie carrying the role name only; the auth check
 // uses COOKIE_NAME (which is signed and HttpOnly), this one is purely for UI.
@@ -21,6 +24,12 @@ const COOKIE_MAX_AGE = 60 * 60 * 24 * 7; // 7 days
 // since refreshing means reopening a browser-based approval flow.
 const BEARER_MAX_AGE = 60 * 60 * 24 * 90; // 90 days
 const PBKDF2_DEFAULT_ITERATIONS = 100000;
+// Same shape as a real PBKDF2 hash (iterations:saltHex:hashHex with the
+// expected lengths) but with all-zero salt + hash. Used to keep the
+// /login response time consistent when the role doesn't exist or has no
+// password — running PBKDF2 against this dummy means an attacker can't
+// distinguish "role exists" from "role doesn't exist" by timing.
+const DUMMY_PASSWORD_HASH = "100000:" + "0".repeat(32) + ":" + "0".repeat(64);
 
 // ── Public middleware entry ────────────────────────────────────────────────
 
@@ -76,6 +85,18 @@ export const onRequest = async (ctx) => {
     return handleConnectApprove(request, env);
   }
 
+  // /auth/patreon/* — only mounted when the build saw a Patreon config.
+  // Issues the same signed session cookie as password login on success;
+  // failure paths bounce back to /login with an error param.
+  if (PATREON) {
+    if (url.pathname === "/auth/patreon/start" && request.method === "GET") {
+      return handlePatreonStart(request, env);
+    }
+    if (url.pathname === "/auth/patreon/callback" && request.method === "GET") {
+      return handlePatreonCallback(request, env);
+    }
+  }
+
   // /_batch; bulk source fetch for sync clients (Foundry). Body is
   // newline-separated paths under text/plain so the request stays CORS-
   // simple (no preflight per file → no OPTIONS rate-limit). Response is
@@ -163,13 +184,20 @@ async function handleLogin(request, env) {
   const password = String(form.get("password") || "");
   const next = safeNext(form.get("next"));
 
-  if (!ROLES.includes(role) || !PASSWORDS[role]) {
-    return loginRedirect(next, "invalid_role");
+  // Generic "auth_failed" error for both "no such role / no password set"
+  // and "wrong password" branches — distinct codes would let an attacker
+  // enumerate which roles exist and which have passwords. Constant-time
+  // PBKDF2 comparison handles the timing side; this handles the message
+  // side. Run verifyPassword against a dummy hash on the no-role branch
+  // so the response time profile stays roughly the same.
+  const passwordHash = (ROLES.includes(role) && PASSWORDS[role])
+    ? PASSWORDS[role]
+    : DUMMY_PASSWORD_HASH;
+  const ok = await verifyPassword(password, passwordHash);
+  if (!ok || !ROLES.includes(role) || !PASSWORDS[role]) {
+    return loginRedirect(next, "auth_failed");
   }
 
-  const ok = await verifyPassword(password, PASSWORDS[role]);
-  if (!ok) return loginRedirect(next, "wrong_password");
-
   const cookie = await signSessionCookie(role, env.SESSION_SECRET);
   const headers = new Headers({ Location: next });
   headers.append("Set-Cookie", cookie);
@@ -296,8 +324,14 @@ async function handleConnectGet(request, env) {
   const returnTo = url.searchParams.get("return_to") || "";
   const app = url.searchParams.get("app") || "an external app";
   const state = url.searchParams.get("state") || "";
-
-  if (!returnTo || !isValidReturnTo(returnTo)) {
+  const delivery = url.searchParams.get("delivery") === "copy" ? "copy" : "redirect";
+
+  // The "redirect" delivery mode (legacy iframe/popup flow) round-trips a
+  // token to a host app via return_to. The "copy" delivery mode is the
+  // GitHub-CLI-style device flow: the user copy-pastes the token themselves,
+  // so return_to is irrelevant and Patreon login works because we're never
+  // inside an iframe.
+  if (delivery === "redirect" && (!returnTo || !isValidReturnTo(returnTo))) {
     return new Response("Invalid or missing return_to. Must be an http(s) URL.", { status: 400 });
   }
 
@@ -313,10 +347,10 @@ async function handleConnectGet(request, env) {
     });
   }
 
-  const returnHost = (() => {
+  const returnHost = delivery === "copy" ? "" : (() => {
     try { return new URL(returnTo).host; } catch { return returnTo; }
   })();
-  const html = renderApprovePage({ app, role, returnTo, returnHost, state });
+  const html = renderApprovePage({ app, role, returnTo, returnHost, state, delivery });
   return new Response(html, { headers: { "Content-Type": "text/html; charset=utf-8" } });
 }
 
@@ -324,8 +358,10 @@ async function handleConnectApprove(request, env) {
   const form = await request.formData();
   const returnTo = String(form.get("return_to") || "");
   const state = String(form.get("state") || "");
+  const delivery = String(form.get("delivery") || "") === "copy" ? "copy" : "redirect";
+  const app = String(form.get("app") || "an external app");
 
-  if (!returnTo || !isValidReturnTo(returnTo)) {
+  if (delivery === "redirect" && (!returnTo || !isValidReturnTo(returnTo))) {
     return new Response("Invalid return_to.", { status: 400 });
   }
   const role = await readRole(request, env);
@@ -335,13 +371,12 @@ async function handleConnectApprove(request, env) {
   }
 
   const token = await signToken(role, env.SESSION_SECRET, BEARER_MAX_AGE);
-  // Render a page that delivers the token via postMessage when running
-  // inside an iframe or popup; that avoids a cross-site top-level
-  // navigation back to the host app, which can blow away SPA sessions
-  // (Foundry logs the user out on full reloads). Falls back to a top-
-  // level redirect with the token in the query string for CLI / direct
-  // browser flows that have neither a parent nor an opener.
-  const html = renderConnectDeliveryPage({ token, state, returnTo });
+  const html = delivery === "copy"
+    ? renderConnectCopyPage({ token, role, app })
+    // Legacy delivery: postMessage to parent/opener; falls back to top-
+    // level redirect with the token in the query string. Kept for any
+    // existing iframe-based clients; new clients should use delivery=copy.
+    : renderConnectDeliveryPage({ token, state, returnTo });
   return new Response(html, { headers: { "Content-Type": "text/html; charset=utf-8" } });
 }
 
@@ -413,12 +448,15 @@ function isValidReturnTo(s) {
   } catch { return false; }
 }
 
-function renderApprovePage({ app, role, returnTo, returnHost, state }) {
+function renderApprovePage({ app, role, returnTo, returnHost, state, delivery }) {
   const escapedApp = escHtml(app);
   const escapedRole = escHtml(role);
   const escapedHost = escHtml(returnHost);
   const escapedReturnTo = escAttr(returnTo);
   const escapedState = escAttr(state);
+  const escapedDelivery = escAttr(delivery);
+  const escapedAppAttr = escAttr(app);
+  const isCopy = delivery === "copy";
   return \`<!doctype html>
 <html lang="en">
 <head>
@@ -460,14 +498,15 @@ function renderApprovePage({ app, role, returnTo, returnHost, state }) {
     <strong>\${escapedApp}</strong> wants access to your vault as
     <strong>\${escapedRole}</strong>.
   </p>
-  <p class="info">After approval, you'll be redirected to:</p>
-  <code class="return-host">\${escapedHost}</code>
-  <p class="warning">
-    ⚠ Verify the destination above looks right. If you didn't initiate
-    this request, click Deny.
-  </p>
+  \${isCopy
+    ? \`<p class="info">After approval, this page will display a token to copy and paste back into <strong>\${escapedApp}</strong>.</p>\`
+    : \`<p class="info">After approval, you'll be redirected to:</p>
+       <code class="return-host">\${escapedHost}</code>
+       <p class="warning">⚠ Verify the destination above looks right. If you didn't initiate this request, click Deny.</p>\`}
   <input type="hidden" name="return_to" value="\${escapedReturnTo}">
   <input type="hidden" name="state" value="\${escapedState}">
+  <input type="hidden" name="delivery" value="\${escapedDelivery}">
+  <input type="hidden" name="app" value="\${escapedAppAttr}">
   <div class="actions">
     <a class="deny" href="/">Deny</a>
     <button type="submit">Approve</button>
@@ -477,9 +516,280 @@ function renderApprovePage({ app, role, returnTo, returnHost, state }) {
 </html>\`;
 }
 
+function renderConnectCopyPage({ token, role, app }) {
+  const escapedApp = escHtml(app);
+  const escapedRole = escHtml(role);
+  const escapedToken = escAttr(token);
+  return \`<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Authorised \${escapedApp}</title>
+<link rel="stylesheet" href="/styles.css">
+<style>
+  body { display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; }
+  .copy-card {
+    max-width: 32rem; width: 90%; padding: 2rem;
+    border: 1px solid var(--rule); border-radius: 6px; background: var(--bg);
+  }
+  .copy-card h1 { margin: 0 0 0.75rem; font-size: 1.3rem; }
+  .copy-card .info { color: var(--muted); font-size: 0.9rem; margin: 0 0 0.75rem; }
+  .copy-card .info strong { color: var(--accent); }
+  .copy-card .token {
+    display: block; width: 100%; box-sizing: border-box;
+    margin: 0.75rem 0;
+    padding: 0.75rem 0.85rem;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 0.82rem; line-height: 1.45;
+    background: var(--wikilink-bg);
+    color: var(--fg);
+    border: 1px solid var(--rule); border-radius: 4px;
+    word-break: break-all; resize: vertical;
+  }
+  .copy-card .copy-btn {
+    width: 100%; padding: 0.6rem 1rem; margin-top: 0.5rem; font: inherit; font-size: 0.95rem;
+    background: var(--accent); color: var(--accent-fg); border: 0; border-radius: 4px; cursor: pointer;
+  }
+  .copy-card .copy-status {
+    text-align: center; color: var(--muted); font-size: 0.78rem; margin-top: 0.5rem; min-height: 1em;
+  }
+  .copy-card .copy-status.ok { color: #2a8b58; }
+  .copy-card ol { font-size: 0.88rem; color: var(--muted); padding-left: 1.25rem; margin: 0.75rem 0 0; }
+  .copy-card ol li { margin: 0.25rem 0; }
+</style>
+</head>
+<body>
+<div class="copy-card">
+  <h1>✓ Authorised \${escapedApp}</h1>
+  <p class="info">
+    A token for the <strong>\${escapedRole}</strong> tier has been generated.
+    Copy it back into <strong>\${escapedApp}</strong> to complete sign-in.
+  </p>
+  <textarea class="token" id="token" readonly rows="4" onclick="this.select()">\${escapedToken}</textarea>
+  <button type="button" class="copy-btn" id="copy-btn">Copy token</button>
+  <p class="copy-status" id="copy-status"></p>
+  <ol>
+    <li>Click <strong>Copy token</strong> above.</li>
+    <li>Switch back to \${escapedApp}.</li>
+    <li>Paste into the token field and confirm.</li>
+  </ol>
+</div>
+<script>
+(function () {
+  var btn = document.getElementById('copy-btn');
+  var ta = document.getElementById('token');
+  var status = document.getElementById('copy-status');
+  btn.addEventListener('click', async function () {
+    try {
+      await navigator.clipboard.writeText(ta.value);
+      status.textContent = 'Copied to clipboard.';
+      status.className = 'copy-status ok';
+    } catch (e) {
+      ta.select();
+      status.textContent = 'Press Ctrl/Cmd-C to copy.';
+      status.className = 'copy-status';
+    }
+    setTimeout(function () { status.textContent = ''; }, 4000);
+  });
+})();
+</script>
+</body>
+</html>\`;
+}
+
 function escHtml(s) { return String(s).replace(/[&<>]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" }[c])); }
 function escAttr(s) { return String(s).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c])); }
 
+// ── Patreon OAuth (optional, additive to password login) ─────────────────
+// Bound only when PATREON !== null (i.e. the build saw a configured
+// patreon block with at least one role mapped to a tier). Issues the same
+// signed session cookie as password login on success; bounces back to
+// /login with an error param on failure. CSRF state rides through a short-
+// lived signed cookie so the callback can verify the round-trip.
+
+const PATREON_STATE_COOKIE = "vault_patreon_state";
+const PATREON_STATE_TTL = 600; // 10 minutes — long enough for the user to authorise
+
+async function handlePatreonStart(request, env) {
+  if (!env.PATREON_CLIENT_SECRET) {
+    return new Response("Patreon login is misconfigured: PATREON_CLIENT_SECRET secret is missing.", { status: 500 });
+  }
+  const url = new URL(request.url);
+  const next = safeNext(url.searchParams.get("next"));
+  // Bind state to next so a forged callback can't drop the user on an
+  // attacker-chosen URL post-login. The signed cookie carries both back.
+  const stateValue = crypto.randomUUID();
+  const stateCookie = await signStateCookie({ state: stateValue, next }, env.SESSION_SECRET);
+
+  const redirectUri = url.origin + "/auth/patreon/callback";
+  const authorize = new URL("https://www.patreon.com/oauth2/authorize");
+  authorize.searchParams.set("response_type", "code");
+  authorize.searchParams.set("client_id", PATREON.clientId);
+  authorize.searchParams.set("redirect_uri", redirectUri);
+  authorize.searchParams.set("scope", "identity identity.memberships");
+  authorize.searchParams.set("state", stateValue);
+
+  const headers = new Headers({ Location: authorize.toString() });
+  headers.append("Set-Cookie", stateCookie);
+  return new Response(null, { status: 302, headers });
+}
+
+async function handlePatreonCallback(request, env) {
+  if (!env.PATREON_CLIENT_SECRET) {
+    return loginRedirect("/", "patreon_misconfigured");
+  }
+  const url = new URL(request.url);
+  const code = url.searchParams.get("code");
+  const state = url.searchParams.get("state");
+  if (!code || !state) return loginRedirect("/", "patreon_failed");
+
+  const stateData = await readStateCookie(request, env.SESSION_SECRET);
+  // Always clear the state cookie regardless of outcome.
+  const clearState = clearCookieVariants(PATREON_STATE_COOKIE);
+
+  if (!stateData || stateData.state !== state) {
+    const headers = new Headers({ Location: "/login?error=patreon_state_mismatch" });
+    for (const v of clearState) headers.append("Set-Cookie", v);
+    return new Response(null, { status: 302, headers });
+  }
+  const next = stateData.next || "/";
+
+  // Exchange code → access token. The token is short-lived; we don't store
+  // it. Only used once, immediately, to look up the visitor's memberships.
+  let access;
+  try {
+    access = await patreonExchangeCode(code, url.origin + "/auth/patreon/callback", env.PATREON_CLIENT_SECRET);
+  } catch (err) {
+    console.warn("Patreon token exchange failed:", err);
+    const headers = new Headers({ Location: "/login?error=patreon_token_exchange" });
+    for (const v of clearState) headers.append("Set-Cookie", v);
+    return new Response(null, { status: 302, headers });
+  }
+
+  let identity;
+  try { identity = await patreonFetchIdentity(access); }
+  catch (err) {
+    console.warn("Patreon identity fetch failed:", err);
+    const headers = new Headers({ Location: "/login?error=patreon_identity" });
+    for (const v of clearState) headers.append("Set-Cookie", v);
+    return new Response(null, { status: 302, headers });
+  }
+
+  const role = matchHighestRole(identity, PATREON.campaignId, PATREON.tiers);
+  if (!role) {
+    // Authenticated, but no qualifying tier on this campaign. Send them
+    // back to /login with a specific error so the UI can explain.
+    const headers = new Headers({ Location: "/login?error=patreon_no_tier&next=" + encodeURIComponent(next) });
+    for (const v of clearState) headers.append("Set-Cookie", v);
+    return new Response(null, { status: 302, headers });
+  }
+
+  const cookie = await signSessionCookie(role, env.SESSION_SECRET);
+  const headers = new Headers({ Location: next });
+  headers.append("Set-Cookie", cookie);
+  headers.append("Set-Cookie", DISPLAY_COOKIE_NAME + "=" + encodeURIComponent(role)
+    + "; Path=/; Secure; SameSite=None; Partitioned; Max-Age=" + COOKIE_MAX_AGE);
+  for (const v of clearState) headers.append("Set-Cookie", v);
+  return new Response(null, { status: 302, headers });
+}
+
+/**
+ * Walk the visitor's identity payload, find memberships scoped to OUR
+ * campaign, and return the highest-ranked role whose mapped tier ID
+ * appears in the visitor's currently-entitled tiers. Returns null if no
+ * tier matches — the visitor may be a patron of someone else, or the
+ * creator's own account, or just not entitled to any mapped tier.
+ */
+function matchHighestRole(identity, campaignId, tiers) {
+  const memberships = (identity?.included || []).filter((it) => it.type === "member");
+  // Filter to memberships on our campaign (Patreon nests campaign under relationships).
+  const ourCampaignMemberships = memberships.filter((m) => {
+    const camp = m.relationships?.campaign?.data;
+    return camp && camp.type === "campaign" && String(camp.id) === String(campaignId);
+  });
+  const entitledTierIds = new Set();
+  for (const m of ourCampaignMemberships) {
+    const ents = m.relationships?.currently_entitled_tiers?.data || [];
+    for (const t of ents) if (t.type === "tier") entitledTierIds.add(String(t.id));
+  }
+  if (entitledTierIds.size === 0) return null;
+  // Roles are ordered low → high; iterate from highest to find the best match.
+  for (let i = ROLES.length - 1; i >= 0; i--) {
+    const r = ROLES[i];
+    const tier = tiers[r];
+    if (tier && entitledTierIds.has(String(tier))) return r;
+  }
+  return null;
+}
+
+async function patreonExchangeCode(code, redirectUri, clientSecret) {
+  const body = new URLSearchParams({
+    grant_type: "authorization_code",
+    code,
+    client_id: PATREON.clientId,
+    client_secret: clientSecret,
+    redirect_uri: redirectUri,
+  });
+  const res = await fetch("https://www.patreon.com/api/oauth2/token", {
+    method: "POST",
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    body: body.toString(),
+  });
+  if (!res.ok) throw new Error("token exchange status " + res.status);
+  const data = await res.json();
+  if (!data.access_token) throw new Error("no access_token in response");
+  return data.access_token;
+}
+
+async function patreonFetchIdentity(accessToken) {
+  // We need the visitor's memberships AND, for each membership, which tiers
+  // they're currently entitled to. Patreon's JSON:API include syntax pulls
+  // both into one round-trip.
+  const url = new URL("https://www.patreon.com/api/oauth2/v2/identity");
+  url.searchParams.set("include", "memberships,memberships.currently_entitled_tiers,memberships.campaign");
+  url.searchParams.set("fields[member]", "patron_status");
+  const res = await fetch(url.toString(), {
+    headers: { Authorization: "Bearer " + accessToken },
+  });
+  if (!res.ok) throw new Error("identity status " + res.status);
+  return await res.json();
+}
+
+// State cookie: stores { state, next } signed with SESSION_SECRET, used to
+// verify the OAuth callback came from our /start handler and not a forgery.
+// Lifetime is short (PATREON_STATE_TTL); kept distinct from the long-lived
+// session cookie so a stolen state cookie can't impersonate a session.
+
+async function signStateCookie(payload, secret) {
+  const exp = Math.floor(Date.now() / 1000) + PATREON_STATE_TTL;
+  const data = JSON.stringify({ ...payload, exp });
+  const sig = await hmac(data, secret);
+  const value = btoa(data) + "." + sig;
+  return PATREON_STATE_COOKIE + "=" + value
+    + "; Path=/; Secure; SameSite=Lax; HttpOnly; Max-Age=" + PATREON_STATE_TTL;
+}
+
+async function readStateCookie(request, secret) {
+  const cookies = parseCookie(request.headers.get("Cookie") || "");
+  const raw = cookies[PATREON_STATE_COOKIE];
+  if (!raw) return null;
+  const dot = raw.lastIndexOf(".");
+  if (dot < 0) return null;
+  const dataB64 = raw.slice(0, dot);
+  const sig = raw.slice(dot + 1);
+  let data;
+  try { data = atob(dataB64); }
+  catch { return null; }
+  const expected = await hmac(data, secret);
+  if (sig !== expected) return null;
+  let parsed;
+  try { parsed = JSON.parse(data); }
+  catch { return null; }
+  if (!parsed || typeof parsed.exp !== "number" || parsed.exp < Math.floor(Date.now() / 1000)) return null;
+  return parsed;
+}
+
 // ── Cookie + role lookup ──────────────────────────────────────────────────
 
 async function readRole(request, env) {
@@ -610,9 +920,19 @@ function parseCookie(header) {
 
 function isSharedAsset(pathname) {
   // Allowlist of root-served files that are intentionally public to every
-  // visitor (no role gate). Everything else (including images) goes
-  // through the variant rewrite so role-restricted content is structurally
-  // unreachable on under-tier deploys.
+  // visitor (no role gate). Everything else — including images, .body.html
+  // fragments, .preview.json, the search index — goes through the variant
+  // rewrite so role-restricted content is structurally unreachable on
+  // under-tier deploys.
+  //
+  // SYNCHRONISATION POINT: every file the build writes to the deploy
+  // ROOT (vs. into _variants/<role>/) must be listed here, otherwise it
+  // 404s for every visitor. Build code that places root-level files:
+  //   - styles.css / user.css        — build.ts (writeFile join(outputDir, ...))
+  //   - login.html                   — build.ts (multi-role only)
+  //   - favicon.ico                  — build.ts (buildFavicon)
+  //   - functions/_middleware.js     — build.ts (multi-role only; not served)
+  // If you add another, add it both here AND in build.ts.
   if (pathname === "/styles.css") return true;
   if (pathname === "/user.css") return true;
   if (pathname === "/login.html") return true;
@@ -648,19 +968,62 @@ export const LOGIN_HTML = `<!doctype html>
     background: var(--accent); color: var(--accent-fg); border: 0; border-radius: 4px; cursor: pointer;
   }
   .login-error { color: #b94a3a; font-size: 0.85rem; margin: 0.75rem 0 0; }
+  .login-divider {
+    display: flex; align-items: center; gap: 0.6rem;
+    margin: 1.25rem 0 1rem;
+    font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em;
+  }
+  .login-divider::before, .login-divider::after {
+    content: ""; flex: 1; height: 1px; background: var(--rule);
+  }
+  .patreon-btn {
+    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
+    width: 100%; padding: 0.55rem 1rem; font: inherit; font-size: 0.95rem;
+    background: #ff424d; color: white; border: 0; border-radius: 4px;
+    cursor: pointer; text-decoration: none;
+  }
+  .patreon-btn:hover { filter: brightness(1.05); }
+  .patreon-hint { color: var(--muted); font-size: 0.78rem; margin-top: 0.6rem; text-align: center; }
+  .patreon-iframe-note {
+    color: var(--muted); font-size: 0.78rem; line-height: 1.45;
+    margin-top: 0.6rem; padding: 0.6rem 0.7rem;
+    border: 1px dashed var(--rule); border-radius: 4px;
+  }
 </style>
 </head>
 <body>
-<form class="login-card" method="POST" action="/login">
+<div class="login-card"__PATREON_ROLES_ATTR__>
   <h1>Sign in</h1>
   <p id="err" class="login-error" hidden></p>
-  <label for="role">Role</label>
-  <select id="role" name="role">__ROLE_OPTIONS__</select>
-  <label for="password">Password</label>
-  <input id="password" type="password" name="password" autocomplete="current-password" required autofocus>
-  <input type="hidden" name="next" id="next">
-  <button type="submit">Sign in</button>
-</form>
+  <form method="POST" action="/login">
+    <label for="role">Role</label>
+    <select id="role" name="role">__ROLE_OPTIONS__</select>
+    <label for="password">Password</label>
+    <input id="password" type="password" name="password" autocomplete="current-password" required>
+    <input type="hidden" name="next" id="next">
+    <button type="submit">Sign in</button>
+  </form>
+  <div id="patreon-section" hidden>
+    <div class="login-divider">or</div>
+    <a id="patreon-btn" class="patreon-btn" href="#">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <circle cx="14.5" cy="9.5" r="6.5"/>
+        <rect x="2" y="3" width="3.5" height="18"/>
+      </svg>
+      Sign in with Patreon
+    </a>
+    <p class="patreon-hint">
+      Active patrons of the configured tiers can sign in directly. The role
+      selector above only matters for password sign-in.
+    </p>
+    <p class="patreon-iframe-note" hidden>
+      Patreon refuses to be embedded in iframes, so its sign-in button is
+      hidden when this page is loaded in one (e.g. a Foundry connect
+      dialog). Use a password here, or open the wiki in a normal browser
+      tab to sign in with Patreon.
+    </p>
+  </div>
+</div>
 <script>
   const params = new URLSearchParams(location.search);
   const next = params.get("next") || "/";
@@ -668,9 +1031,43 @@ export const LOGIN_HTML = `<!doctype html>
   const err = params.get("error");
   if (err) {
     const el = document.getElementById("err");
-    el.textContent = err === "wrong_password" ? "Wrong password." : "Invalid role.";
+    const messages = {
+      // Single message for any password-path failure — distinct error
+      // codes would let an attacker enumerate which roles exist.
+      auth_failed: "Invalid role or password.",
+      patreon_state_mismatch: "Patreon sign-in expired or was tampered with. Please try again.",
+      patreon_token_exchange: "Couldn't exchange the Patreon authorisation. Try again.",
+      patreon_identity: "Patreon authenticated but we couldn't load your tier information.",
+      patreon_no_tier: "Signed in to Patreon, but your current pledge doesn't grant any of the configured tiers.",
+      patreon_misconfigured: "Patreon login is misconfigured for this deploy.",
+      patreon_failed: "Patreon sign-in failed.",
+    };
+    el.textContent = messages[err] || "Sign-in failed.";
     el.hidden = false;
   }
+  // Show the Patreon button only if the build emitted a roles list for it
+  // (i.e. patreon is configured AND at least one role has a tier mapping).
+  // The Foundry module's connect flow now uses delivery=copy (paste-token),
+  // not an iframe, so Patreon's X-Frame-Options is no longer a problem in
+  // the supported flow. The iframe-detection note still fires defensively
+  // for any third-party that embeds /login.html directly.
+  const card = document.querySelector(".login-card");
+  if (card.dataset.patreonRoles) {
+    const section = document.getElementById("patreon-section");
+    section.hidden = false;
+    const inIframe = window.parent !== window;
+    if (inIframe) {
+      document.getElementById("patreon-btn").hidden = true;
+      document.querySelector(".patreon-hint").hidden = true;
+      document.querySelector(".patreon-iframe-note").hidden = false;
+    } else {
+      document.getElementById("patreon-btn").href = "/auth/patreon/start?next=" + encodeURIComponent(next);
+    }
+  }
+  // Autofocus moved here so it picks the right field whether the password
+  // form is visible or the user is going for the Patreon button.
+  const pwd = document.getElementById("password");
+  if (pwd && !err) pwd.focus();
 </script>
 </body>
 </html>`;

package/dist/render/auth-template.js.map

@@ -1 +1 @@
-{"version":3,"file":"auth-template.js","sourceRoot":"","sources":["../../src/render/auth-template.ts"],"names":[],"mappings":"AAAA,6EAA6E;AAC7E,+EAA+E;AAC/E,2EAA2E;AAC3E,mEAAmE;AASnE,MAAM,UAAU,oBAAoB,CAAC,GAAuB;IAC1D,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAC/C,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAE3D,OAAO;;;;;gBAKO,YAAY;oBACR,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAimBnC,CAAC;AACF,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAmDlB,CAAC"}
+{"version":3,"file":"auth-template.js","sourceRoot":"","sources":["../../src/render/auth-template.ts"],"names":[],"mappings":"AAAA,6EAA6E;AAC7E,+EAA+E;AAC/E,2EAA2E;AAC3E,mEAAmE;AAsBnE,MAAM,UAAU,oBAAoB,CAAC,GAAuB;IAC1D,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAC/C,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC3D,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC;IAE3D,OAAO;;;;;;gBAMO,YAAY;oBACR,gBAAgB;kBAClB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA85B/B,CAAC;AACF,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAgIlB,CAAC"}