@binary1702/auth 0.2.5 → 0.3.0

package/dist/cli.js

@@ -10,7 +10,7 @@
 //   3. AUTH_SECRET   → generate, write .env.local
 //   4. app/auth/[...path]/route.ts
 //   5. proxy.ts
-//   6. create auth_users table
+//   6. create users table
 //   7. create the first user
 //
 // Subcommands:
@@ -19,6 +19,10 @@
 //   remove-user [email]           delete a user (signs them out everywhere)
 //   sign-out-everywhere [email]   end every session of a user
 //   list-users
+//   add-org <name>                create an organization
+//   add-member <email> <org> [role]   put a user in an org (role defaults to "member")
+//   remove-member <email> <org>
+//   list-orgs
 // ─────────────────────────────────────────────────────────────
 import { existsSync, mkdirSync, readFileSync, writeFileSync, appendFileSync } from "node:fs";
 import { join, dirname } from "node:path";
@@ -77,7 +81,7 @@ function closePrompts() {
 }
 async function ask(question, opts = {}) {
     rl();
-    const suffix = opts.default ? c.dim(` (${opts.default})`) : "";
+    const suffix = opts.default ? c.dim(` (${opts.default})`) : opts.optional ? c.dim(" (Enter to skip)") : "";
     stdout.write(`  ${question}${suffix}: `);
     if (opts.hidden)
         muted = true;
@@ -90,8 +94,12 @@ async function ask(question, opts = {}) {
         muted = false;
         stdout.write("\n");
     }
-    if (line === null)
+    if (line === null) {
+        // Piped input that stops short: an optional prompt is simply skipped
+        if (opts.optional)
+            return "";
         return fail("Input ended before all prompts were answered.");
+    }
     return opts.hidden ? line : line.trim() || opts.default || "";
 }
 // ── env file ──────────────────────────────────────────────────
@@ -118,11 +126,14 @@ const PROXY_FILE = `import { proxy } from "${PKG}/next/proxy"
 
 export default proxy
 
-// Everything except the auth pages, Next internals, and static files.
+// Everything except Next's build output. The proxy itself lets the
+// auth pages and static files through.
 export const config = {
-  matcher: ["/((?!auth|_next/static|_next/image|favicon.ico|.*\\\\..*).*)"],
+  matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"],
 }
 `;
+// Written by 0.2.5 and earlier: skipped /authors, /api/export.csv, …
+const OLD_MATCHER = "(?!auth|_next/static|_next/image|favicon.ico|.*";
 function writeIfMissing(rel, content) {
     const abs = join(cwd, rel);
     if (existsSync(abs)) {
@@ -156,7 +167,7 @@ function stepInstall() {
         fail(`npm install ${PKG} failed`);
     done(`${PKG} installed`);
 }
-async function stepEnv() {
+async function stepEnv(opts = {}) {
     const env = readEnv();
     if (env.DATABASE_URL) {
         process.env.DATABASE_URL = env.DATABASE_URL;
@@ -178,12 +189,88 @@ async function stepEnv() {
         writeEnv("AUTH_SECRET", randomBytes(32).toString("base64url"));
         done("AUTH_SECRET generated → .env.local");
     }
+    // Email: verification and password-reset links. Optional. Without it,
+    // development prints the emails to the console and production refuses
+    // to send, so the install still works. See core/email.ts.
+    for (const k of ["AUTH_GMAIL_USER", "AUTH_GMAIL_CLIENT_EMAIL", "AUTH_GMAIL_PRIVATE_KEY", "AUTH_RESEND_API_KEY", "AUTH_EMAIL_FROM"]) {
+        if (env[k])
+            process.env[k] = env[k];
+    }
+    if (env.AUTH_GMAIL_USER && env.AUTH_GMAIL_CLIENT_EMAIL && env.AUTH_GMAIL_PRIVATE_KEY) {
+        if (opts.askEmail)
+            skip("email: Gmail API as " + env.AUTH_GMAIL_USER);
+        return;
+    }
+    if (env.AUTH_RESEND_API_KEY && env.AUTH_EMAIL_FROM) {
+        if (opts.askEmail)
+            skip("email: Resend from " + env.AUTH_EMAIL_FROM);
+        return;
+    }
+    if (!opts.askEmail)
+        return; // subcommands only need the database
+    // Once b17_auth.yaml exists, email is configured there (its comments show how); stop asking
+    if (existsSync(join(cwd, CONFIG_FILE)))
+        return;
+    console.log(c.dim("  Email for verification and password reset. gmail = Gmail API with a service account,"));
+    console.log(c.dim("  resend = resend.com API key. Skip it for now if you like."));
+    const which = (await ask("Email transport (gmail / resend)", { optional: true })).toLowerCase();
+    if (which === "gmail") {
+        const user = await ask("Mailbox to send as (AUTH_GMAIL_USER)", { default: env.AUTH_GMAIL_USER });
+        if (!user.includes("@"))
+            fail("That does not look like an email address.");
+        const path = await ask("Path to the service account's JSON key file");
+        const abs = path.startsWith("/") ? path : join(cwd, path);
+        if (!existsSync(abs))
+            fail(`No file at ${abs}`);
+        let sa;
+        try {
+            sa = JSON.parse(readFileSync(abs, "utf8"));
+        }
+        catch {
+            return fail("That file is not JSON.");
+        }
+        if (!sa.client_email || !sa.private_key)
+            fail("That JSON has no client_email / private_key: it is not a service account key.");
+        writeEnv("AUTH_GMAIL_USER", user);
+        writeEnv("AUTH_GMAIL_CLIENT_EMAIL", sa.client_email);
+        // One line: the PEM's newlines as the two characters \n, which the package restores
+        writeEnv("AUTH_GMAIL_PRIVATE_KEY", sa.private_key.replace(/\n/g, "\\n"));
+        done(`AUTH_GMAIL_USER, AUTH_GMAIL_CLIENT_EMAIL, AUTH_GMAIL_PRIVATE_KEY → .env.local (${sa.client_email})`);
+        console.log(c.dim(`    In Google Admin, grant that service account domain-wide delegation for the scope:`));
+        console.log(c.dim(`    https://www.googleapis.com/auth/gmail.send`));
+        return;
+    }
+    if (which === "resend") {
+        const key = env.AUTH_RESEND_API_KEY || (await ask("Resend API key (AUTH_RESEND_API_KEY)", { hidden: true }));
+        if (!key.trim())
+            fail("No key given.");
+        const from = env.AUTH_EMAIL_FROM || (await ask("From address (AUTH_EMAIL_FROM)", { default: "Auth <onboarding@resend.dev>" }));
+        if (!env.AUTH_RESEND_API_KEY)
+            writeEnv("AUTH_RESEND_API_KEY", key.trim());
+        if (!env.AUTH_EMAIL_FROM)
+            writeEnv("AUTH_EMAIL_FROM", from);
+        done("AUTH_RESEND_API_KEY, AUTH_EMAIL_FROM → .env.local");
+        return;
+    }
+    if (which)
+        fail(`Unknown transport "${which}". Use gmail, resend, or press Enter to skip.`);
+    skip("email not configured: dev prints emails to the console");
 }
 function stepFiles(appDir, src) {
     writeIfMissing(`${appDir}/auth/[...path]/route.ts`, ROUTE_FILE);
     const proxyPath = src ? "src/proxy.ts" : "proxy.ts";
     const legacy = [src ? "src/middleware.ts" : "middleware.ts", proxyPath].filter((p) => existsSync(join(cwd, p)));
     if (legacy.length) {
+        const text = readFileSync(join(cwd, legacy[0]), "utf8");
+        if (text.includes(`${PKG}/next/proxy`) && !text.includes(OLD_MATCHER)) {
+            skip(`${legacy[0]} exists`); // ours, current: nothing to say
+            return;
+        }
+        if (text.includes(OLD_MATCHER)) {
+            console.log(`  ${c.red("!")} ${legacy[0]} has the old matcher, which leaves /auth* and dotted paths unguarded.`);
+            console.log(`    Replace its matcher with: ${c.bold('["/((?!_next/static|_next/image|favicon.ico).*)"]')}`);
+            return;
+        }
         skip(`${legacy[0]} exists, not touched. Add to it:`);
         console.log(c.dim(PROXY_FILE.replace(/^/gm, "      ")));
         return;
@@ -194,10 +281,94 @@ async function db() {
     // Imported lazily: needs DATABASE_URL in process.env first.
     return import("./core/db.js");
 }
+// ── b17_auth.yaml ─────────────────────────────────────────────
+const CONFIG_FILE = "b17_auth.yaml";
+function appName() {
+    try {
+        const name = String(JSON.parse(readFileSync(join(cwd, "package.json"), "utf8")).name ?? "");
+        return name.replace(/^@[^/]+\//, "").replace(/[-_]+/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+    }
+    catch {
+        return "My App";
+    }
+}
+/** The file the install writes once. Secrets are ${…} references into .env.local. */
+function configTemplate(env) {
+    const gmail = env.AUTH_GMAIL_USER && env.AUTH_GMAIL_CLIENT_EMAIL && env.AUTH_GMAIL_PRIVATE_KEY;
+    const resend = env.AUTH_RESEND_API_KEY;
+    const from = env.AUTH_EMAIL_FROM || (gmail ? env.AUTH_GMAIL_USER : "");
+    return `# ${CONFIG_FILE}  ·  @binary1702/auth
+# One place for all of it. Secrets stay in .env.local and appear here as \${NAME}.
+# Docs: https://www.npmjs.com/package/@binary1702/auth#b17_authyaml
+
+name: ${appName()}                                    # page titles, email subjects
+signup: closed                                       # open | closed | invite  (invite also needs inviteCode)
+# inviteCode: \${AUTH_INVITE_CODE}
+# emailDomain: example.com                            # only these addresses may sign up
+# requireVerified: true                               # no session until the email link is clicked
+# protected: /app/* /api/*                           # only these need sign-in; everything else is open. * = anything below
+#                                                    # (or the reverse: public: / /pricing  = everything needs sign-in except these)
+# admins: you@example.com                            # who may open /auth/admin (users, organizations, roles)
+
+database: \${DATABASE_URL}
+secret: \${AUTH_SECRET}
+
+email:
+${from ? `  from: ${from}` : "  # from: NoReply (My App) <no-reply@example.com>"}
+  # replyTo: support@example.com
+${gmail
+        ? `  gmail:
+    user: ${env.AUTH_GMAIL_USER}                       # the mailbox the service account acts as
+    clientEmail: \${AUTH_GMAIL_CLIENT_EMAIL}
+    privateKey: \${AUTH_GMAIL_PRIVATE_KEY}`
+        : resend
+            ? `  resend:
+    apiKey: \${AUTH_RESEND_API_KEY}`
+            : `  # gmail:                                           # one of the two; see the README
+  #   user: you@example.com
+  #   clientEmail: \${AUTH_GMAIL_CLIENT_EMAIL}
+  #   privateKey: \${AUTH_GMAIL_PRIVATE_KEY}
+  # resend:
+  #   apiKey: \${AUTH_RESEND_API_KEY}`}
+
+permissions:                                          # role: what it may do. all = everything, x.* = a prefix
+  owner: all
+  admin: all
+  member:
+
+# organizations:                                      # overrides by organization name
+#   Acme:
+#     member: invoices.read
+`;
+}
+async function stepConfig() {
+    const abs = join(cwd, CONFIG_FILE);
+    if (existsSync(abs)) {
+        const { parseYaml } = await import("./core/yaml.js");
+        const { literalSecrets } = await import("./core/options.js");
+        let bad = [];
+        try {
+            bad = literalSecrets(parseYaml(readFileSync(abs, "utf8")));
+        }
+        catch (e) {
+            fail(`${CONFIG_FILE}: ${e instanceof Error ? e.message : String(e)}`);
+        }
+        if (bad.length) {
+            const ignored = spawnSync("git", ["check-ignore", "-q", CONFIG_FILE], { cwd }).status === 0;
+            if (!ignored) {
+                fail(`${CONFIG_FILE} holds a literal secret under ${bad.join(", ")}. Move it to .env.local and reference it as \${NAME}, or git-ignore the file.`);
+            }
+        }
+        skip(`${CONFIG_FILE} exists`);
+        return;
+    }
+    writeFileSync(abs, configTemplate(readEnv()));
+    done(`${CONFIG_FILE} written: app name, sign-up policy, email, permissions`);
+}
 async function stepSchema() {
-    const { ensureSchema } = await db();
+    const { ensureSchema, MIGRATIONS } = await db();
     await ensureSchema().catch((e) => fail(`Could not reach the database: ${e.message}`));
-    done("auth_users table ready");
+    done(`database schema ready (${MIGRATIONS.length} migration${MIGRATIONS.length === 1 ? "" : "s"})`);
 }
 async function createUserInteractive(presetEmail) {
     const { createUser, findUser } = await db();
@@ -213,7 +384,8 @@ async function createUserInteractive(presetEmail) {
     const again = await ask("Password again", { hidden: true });
     if (password !== again)
         fail("Passwords do not match.");
-    await createUser(email, await hashPassword(password));
+    // Created by whoever runs the CLI: no verification email to wait for
+    await createUser(email, await hashPassword(password), { verified: true });
     done(`user "${email}" created`);
 }
 async function stepFirstUser() {
@@ -230,15 +402,15 @@ function finish() {
     console.log(`
 ${c.bold("Done.")} Start the dev server and open ${c.bold("/auth/sign-in")}.
 
-Get the user in any route or server component:
+Get the session in any route, server component or action:
 
-  import { requireUser } from "${PKG}/next"
-  const user = await requireUser()   // { id, email }
+  import { getSession, requirePermission } from "${PKG}/next"
+  const session = await getSession()   // { user, organization, authorization } or null
 
-Add users later:  npx ${PKG} add-user
-Or let people register themselves at /auth/sign-up:
-  AUTH_SIGNUP=open            in .env.local (anyone)
-  AUTH_INVITE_CODE=<code>     optional, the form then needs it
+Settings live in ${c.bold(CONFIG_FILE)}: app name, who may sign up (signup: open | invite),
+which paths need sign-in (protected:), email, roles → permissions. Secrets stay in .env.local.
+Add users later:  npx ${PKG} add-user     Organizations:  npx ${PKG} add-org <name>
+Working with an AI agent in this app? Point it at node_modules/${PKG}/AGENTS.md
 `);
 }
 // ── main ──────────────────────────────────────────────────────
@@ -252,11 +424,53 @@ async function main() {
   npx ${PKG} remove-user [email]           delete; also signs them out everywhere
   npx ${PKG} sign-out-everywhere [email]   end every session of a user
   npx ${PKG} list-users
+
+  npx ${PKG} add-org <name>                     create an organization
+  npx ${PKG} add-member <email> <org> [role]    add a user to an org (role: member, admin, owner, …)
+  npx ${PKG} remove-member <email> <org>
+  npx ${PKG} list-orgs
 `);
         return;
     }
     stepProject();
     const USER_CMDS = ["add-user", "set-password", "remove-user", "sign-out-everywhere", "list-users"];
+    const ORG_CMDS = ["add-org", "add-member", "remove-member", "list-orgs"];
+    if (ORG_CMDS.includes(cmd)) {
+        await stepEnv();
+        const d = await db();
+        const [, email, orgName, role] = process.argv.slice(2);
+        const org = async (name) => {
+            if (!name)
+                fail(`Usage: npx ${PKG} ${cmd} <email> <org>`);
+            return (await d.findOrg(name)) ?? fail(`No organization "${name}". Create it: npx ${PKG} add-org "${name}"`);
+        };
+        const user = async (e) => {
+            if (!e)
+                fail(`Usage: npx ${PKG} ${cmd} <email> <org>`);
+            return (await d.findUser(e)) ?? fail(`No user "${e}".`);
+        };
+        if (cmd === "add-org") {
+            if (!arg)
+                fail(`Usage: npx ${PKG} add-org <name>`);
+            const o = await d.createOrg(arg);
+            done(`organization "${o.name}" created  ${c.dim(o.id)}`);
+        }
+        if (cmd === "list-orgs") {
+            for (const o of await d.listOrgs())
+                console.log(`  ${o.name}  ${c.dim(o.id)}  ${o.members} member${o.members === 1 ? "" : "s"}`);
+        }
+        if (cmd === "add-member") {
+            const [u, o] = [await user(email), await org(orgName)];
+            await d.addMember(o.id, u.id, role || "member");
+            done(`"${u.email}" is ${role || "member"} of "${o.name}"`);
+        }
+        if (cmd === "remove-member") {
+            const [u, o] = [await user(email), await org(orgName)];
+            (await d.removeMember(o.id, u.id)) ? done(`"${u.email}" removed from "${o.name}"`) : fail(`"${u.email}" is not a member of "${o.name}".`);
+        }
+        console.log();
+        return;
+    }
     if (USER_CMDS.includes(cmd)) {
         await stepEnv();
         const d = await db();
@@ -295,8 +509,9 @@ async function main() {
         fail(`Unknown command "${cmd}". Try: npx ${PKG} help`);
     const { appDir, src } = stepProject();
     stepInstall();
-    await stepEnv();
+    await stepEnv({ askEmail: true });
     stepFiles(appDir, src);
+    await stepConfig();
     await stepSchema();
     await stepFirstUser();
     finish();

package/dist/core/admin-html.d.ts

@@ -0,0 +1,26 @@
+import type { AdminOrg, AdminUser } from "./db.ts";
+import type { Options } from "./options.ts";
+export type AdminView = {
+    tab: "orgs" | "users" | "settings";
+} | {
+    tab: "org";
+    orgId: string;
+};
+export type AdminPageData = {
+    self: string;
+    view: AdminView;
+    users: AdminUser[];
+    orgs: AdminOrg[];
+    roles: string[];
+    options: Options;
+    transport: string;
+    tokens: {
+        total: number;
+        live: number;
+    };
+    notice?: string;
+    error?: string;
+    /** per-render, for the one script the page carries; must match the CSP header */
+    nonce: string;
+};
+export declare function adminPage(d: AdminPageData): string;

package/dist/core/admin-html.js

@@ -0,0 +1,252 @@
+// ─────────────────────────────────────────────────────────────
+// The admin page. Plain HTML like the other auth pages.
+//
+//   ?tab=orgs (default)   organizations: name, members, roles in use → click one
+//   ?org=<id>             one organization: its roles → permissions, its members
+//   ?tab=users            every user: verification, memberships, actions
+//   ?tab=settings         the resolved settings, read-only
+//
+// Every change is a small form that POSTs back and returns to the same
+// view. Nothing here decides anything; the handler and core/admin.ts
+// do. Every value goes through escape().
+// ─────────────────────────────────────────────────────────────
+import { escape } from "./html.js";
+import { ADMIN_PATH } from "./admin.js";
+import { SIGN_OUT_PATH } from "./config.js";
+import { PASSWORD_MAX, PASSWORD_MIN } from "./signup.js";
+import { permissionsFor } from "./org.js";
+const STYLE = `
+  :root { color-scheme: light dark; --fg: #111; --bg: #fff; --line: #e3e3e3; --muted: #6b6b6b; --err: #c0392b; --ok: #1e8449; --panel: #f6f6f7; --accent: #2f7fd6; }
+  @media (prefers-color-scheme: dark) { :root { --fg: #ececec; --bg: #121212; --line: #2c2c2c; --muted: #9a9a9a; --err: #ff6b6b; --ok: #58d68d; --panel: #1c1c1e; --accent: #6fb1ff; } }
+  * { box-sizing: border-box; }
+  body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.45 system-ui, -apple-system, sans-serif; }
+  main { max-width: 960px; margin: 0 auto; padding: 24px 20px 60px; }
+  h1 { font-size: 18px; margin: 0; }
+  h2 { font-size: 15px; margin: 0 0 10px; }
+  a { color: var(--accent); text-decoration: none; }
+  a:hover { text-decoration: underline; }
+  .top { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; margin-bottom: 14px; }
+  .top .who { color: var(--muted); font-size: 13px; margin-left: auto; }
+  .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
+  .tabs a { padding: 8px 12px; color: var(--muted); border-bottom: 2px solid transparent; font-weight: 500; }
+  .tabs a.on { color: var(--fg); border-bottom-color: var(--fg); }
+  .tabs a:hover { text-decoration: none; color: var(--fg); }
+  .crumb { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
+  .notice, .error { padding: 8px 12px; border-radius: 8px; font-size: 13px; margin: 0 0 14px; }
+  .notice { background: color-mix(in srgb, var(--ok) 12%, var(--bg)); color: var(--ok); }
+  .error { background: color-mix(in srgb, var(--err) 12%, var(--bg)); color: var(--err); }
+  .card { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
+  .card.panel { background: var(--panel); }
+  table { width: 100%; border-collapse: collapse; font-size: 13px; }
+  th { text-align: left; color: var(--muted); font-weight: 500; padding: 4px 10px 8px 0; }
+  td { padding: 9px 10px 9px 0; border-top: 1px solid var(--line); vertical-align: middle; }
+  tr.row:hover td { background: color-mix(in srgb, var(--panel) 60%, var(--bg)); }
+  code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
+  .muted { color: var(--muted); }
+  .ok { color: var(--ok); }
+  .warn { color: var(--err); }
+  .right { text-align: right; white-space: nowrap; }
+  form.inline { display: inline-flex; gap: 4px; align-items: center; margin: 0 4px 0 0; }
+  form.grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }
+  label { display: grid; gap: 3px; font-size: 12px; color: var(--muted); }
+  input, select { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); min-width: 0; }
+  button { font: inherit; font-size: 12.5px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); cursor: pointer; white-space: nowrap; }
+  button.primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
+  button.danger { color: var(--err); border-color: var(--err); }
+  button.quiet { border-color: transparent; color: var(--muted); }
+  .chip { display: inline-block; font-family: ui-monospace, Menlo, monospace; font-size: 11px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; margin: 1px 4px 1px 0; color: var(--muted); }
+  .chip.all { color: var(--fg); border-color: var(--fg); }
+  .pill { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); }
+  details summary { cursor: pointer; color: var(--muted); font-size: 13px; }
+  details.inline { display: inline-block; vertical-align: middle; margin-right: 6px; }
+  details.inline summary { display: inline-block; font-size: 12.5px; padding: 5px 10px; border: 1px solid transparent; border-radius: 6px; list-style: none; }
+  details.inline summary::-webkit-details-marker { display: none; }
+  details.inline[open] summary { color: var(--fg); }
+  details.inline form { margin-left: 4px; }
+  .nowrap { white-space: nowrap; }
+  button.quiet.danger { color: var(--err); }
+  pre { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font-size: 12px; overflow: auto; margin: 8px 0 0; }
+  .empty { color: var(--muted); font-size: 13px; padding: 6px 0; }
+`;
+const hidden = (fields) => Object.entries(fields)
+    .map(([k, v]) => `<input type="hidden" name="${escape(k)}" value="${escape(v)}">`)
+    .join("");
+const roleSelect = (name, roles, current) => `<select name="${name}">${roles.map((r) => `<option value="${escape(r)}"${r === current ? " selected" : ""}>${escape(r)}</option>`).join("")}</select>`;
+// The CSP allows no inline handlers; a nonce'd script below wires these up
+const confirmRemove = (what) => `data-confirm="Remove ${escape(what)}? This cannot be undone."`;
+const chips = (perms) => perms.length ? perms.map((p) => (p === "*" ? `<span class="chip all">everything</span>` : `<span class="chip">${escape(p)}</span>`)).join("") : `<span class="chip">nothing</span>`;
+export function adminPage(d) {
+    const usersPath = `${ADMIN_PATH}/users`;
+    const orgsPath = `${ADMIN_PATH}/orgs`;
+    const o = d.options;
+    const tab = d.view.tab === "org" ? "orgs" : d.view.tab;
+    const link = (t) => `${ADMIN_PATH}${t === "orgs" ? "" : `?tab=${t}`}`;
+    const orgLink = (id) => `${ADMIN_PATH}?org=${escape(id)}`;
+    let body = "";
+    // ── organizations ───────────────────────────────────────────
+    if (d.view.tab === "orgs") {
+        const rows = d.orgs
+            .map((org) => {
+            const roles = [...new Set(org.members.map((m) => m.role))];
+            return `<tr class="row">
+  <td><a href="${orgLink(org.id)}"><b>${escape(org.name)}</b></a><br><code class="muted">${escape(org.id)}</code></td>
+  <td>${org.members.length} member${org.members.length === 1 ? "" : "s"}</td>
+  <td>${roles.length ? roles.map((r) => `<span class="pill">${escape(r)}</span>`).join(" ") : '<span class="muted">none yet</span>'}</td>
+  <td class="right"><a href="${orgLink(org.id)}">open →</a></td>
+</tr>`;
+        })
+            .join("\n");
+        body = `
+<div class="card">
+<h2>Organizations <span class="muted">(${d.orgs.length})</span></h2>
+${d.orgs.length ? `<table><thead><tr><th>organization</th><th>members</th><th>roles in use</th><th></th></tr></thead><tbody>${rows}</tbody></table>` : '<p class="empty">No organizations yet. Create the first one below.</p>'}
+</div>
+<div class="card panel">
+<form class="grid" method="post" action="${orgsPath}">${hidden({ action: "create" })}
+  <label>New organization <input name="name" required autocomplete="off" placeholder="name"></label>
+  <button type="submit" class="primary">Create</button>
+</form>
+</div>`;
+    }
+    // ── one organization ────────────────────────────────────────
+    if (d.view.tab === "org") {
+        const orgId = d.view.orgId;
+        const org = d.orgs.find((x) => x.id === orgId);
+        if (!org) {
+            body = `<p class="error">No such organization.</p><p><a href="${ADMIN_PATH}">← Organizations</a></p>`;
+        }
+        else {
+            const inUse = org.members.map((m) => m.role);
+            const roleRows = d.roles
+                .filter((r) => inUse.includes(r) || o.permissions[r] || o.organizations[org.name]?.[r])
+                .map((r) => {
+                const override = o.organizations[org.name]?.[r] !== undefined;
+                return `<tr class="row">
+  <td><span class="pill">${escape(r)}</span></td>
+  <td>${chips(permissionsFor(r, org.name, o))}</td>
+  <td class="muted">${override ? `organizations.${escape(org.name)}.${escape(r)}` : o.permissions[r] ? `permissions.${escape(r)}` : "not in b17_auth.yaml"}</td>
+  <td class="right">${inUse.filter((x) => x === r).length} member${inUse.filter((x) => x === r).length === 1 ? "" : "s"}</td>
+</tr>`;
+            })
+                .join("\n");
+            const memberRows = org.members
+                .map((m) => `<tr class="row">
+  <td><b>${escape(m.email)}</b>${m.email === d.self ? ' <span class="muted">(you)</span>' : ""}</td>
+  <td><form class="inline" method="post" action="${orgsPath}">${hidden({ action: "set-role", org: org.id, email: m.email })}${roleSelect("role", d.roles, m.role)}<button type="submit" class="quiet">set</button></form></td>
+  <td>${chips(permissionsFor(m.role, org.name, o))}</td>
+  <td class="right"><form class="inline" method="post" action="${orgsPath}">${hidden({ action: "remove-member", org: org.id, email: m.email })}<button type="submit" class="danger">remove</button></form></td>
+</tr>`)
+                .join("\n");
+            body = `
+<div class="crumb"><a href="${ADMIN_PATH}">Organizations</a> › <b>${escape(org.name)}</b> <code class="muted">${escape(org.id)}</code></div>
+<div class="card">
+<h2>Roles in ${escape(org.name)} <span class="muted">· what each may do, from b17_auth.yaml</span></h2>
+${roleRows ? `<table><thead><tr><th>role</th><th>permissions</th><th>defined in</th><th class="right">used by</th></tr></thead><tbody>${roleRows}</tbody></table>` : '<p class="empty">No roles yet.</p>'}
+</div>
+<div class="card">
+<h2>Members <span class="muted">(${org.members.length})</span></h2>
+${memberRows ? `<table><thead><tr><th>user</th><th>role</th><th>permissions here</th><th></th></tr></thead><tbody>${memberRows}</tbody></table>` : '<p class="empty">No members yet.</p>'}
+</div>
+<div class="card panel">
+<form class="grid" method="post" action="${orgsPath}">${hidden({ action: "add-member", org: org.id })}
+  <label>Add a member <input type="email" name="email" placeholder="email of an existing user" required></label>
+  <label>as ${roleSelect("role", d.roles, "member")}</label>
+  <button type="submit" class="primary">Add</button>
+</form>
+</div>
+<form class="inline" method="post" action="${orgsPath}" ${confirmRemove(org.name)}>${hidden({ action: "remove-org", org: org.id })}<button type="submit" class="danger">Remove ${escape(org.name)}</button></form>`;
+        }
+    }
+    // ── users ───────────────────────────────────────────────────
+    if (d.view.tab === "users") {
+        const rows = d.users
+            .map((u) => {
+            const self = u.email === d.self;
+            const memberships = u.memberships.length
+                ? u.memberships.map((m) => `<a href="${orgLink(m.org_id)}">${escape(m.org)}</a> <span class="muted">(${escape(m.role)})</span>`).join(" · ")
+                : '<span class="muted">none</span>';
+            const status = u.verified
+                ? '<span class="ok">verified</span>'
+                : `<span class="warn">unverified</span>
+    <form class="inline" method="post" action="${usersPath}">${hidden({ action: "send-verify", email: u.email, tab: "users" })}<button type="submit" class="quiet" title="send a verification email">email</button></form>
+    <form class="inline" method="post" action="${usersPath}">${hidden({ action: "verify", email: u.email, tab: "users" })}<button type="submit" class="quiet" title="mark verified without the email">mark</button></form>`;
+            return `<tr class="row">
+  <td title="${escape(u.id)}"><b>${escape(u.email)}</b>${self ? ' <span class="muted">you</span>' : ""}${o.admins.includes(u.email) ? ' <span class="pill">admin</span>' : ""}</td>
+  <td class="nowrap">${status}</td>
+  <td>${memberships}</td>
+  <td class="right">
+    <details class="inline"><summary class="quiet">password</summary><form class="inline" method="post" action="${usersPath}">${hidden({ action: "set-password", email: u.email, tab: "users" })}<input type="password" name="password" placeholder="new password" minlength="${PASSWORD_MIN}" maxlength="${PASSWORD_MAX}" required autocomplete="new-password" size="14"><button type="submit">set</button></form></details>
+    ${self
+                ? ""
+                : `<form class="inline" method="post" action="${usersPath}">${hidden({ action: "sign-out", email: u.email, tab: "users" })}<button type="submit" class="quiet">sign out</button></form>
+    <form class="inline" method="post" action="${usersPath}" ${confirmRemove(u.email)}>${hidden({ action: "remove", email: u.email, tab: "users" })}<button type="submit" class="quiet danger">remove</button></form>`}
+  </td>
+</tr>`;
+        })
+            .join("\n");
+        body = `
+<div class="card">
+<h2>Users <span class="muted">(${d.users.length})</span></h2>
+<table><thead><tr><th>user</th><th>email</th><th>organizations</th><th></th></tr></thead><tbody>${rows}</tbody></table>
+<p class="empty">Permissions are per organization: open one under Organizations.</p>
+</div>
+<div class="card panel">
+<form class="grid" method="post" action="${usersPath}">${hidden({ action: "add", tab: "users" })}
+  <label>New user <input type="email" name="email" required autocomplete="off" placeholder="email"></label>
+  <label>Password <input type="password" name="password" minlength="${PASSWORD_MIN}" maxlength="${PASSWORD_MAX}" required autocomplete="new-password"></label>
+  <button type="submit" class="primary">Add user</button>
+</form>
+</div>`;
+    }
+    // ── settings ────────────────────────────────────────────────
+    if (d.view.tab === "settings") {
+        const permissionRows = Object.entries(o.permissions)
+            .map(([role, perms]) => `  ${role}: ${perms.join(" ") || "(nothing)"}`)
+            .join("\n");
+        const orgOverrides = Object.entries(o.organizations)
+            .map(([org, roles]) => `  ${org}:\n` + Object.entries(roles).map(([r, p]) => `    ${r}: ${p.join(" ") || "(nothing)"}`).join("\n"))
+            .join("\n");
+        body = `
+<div class="card">
+<h2>Settings <span class="muted">· read-only, from b17_auth.yaml and .env.local</span></h2>
+<table><tbody>
+<tr><td>name</td><td>${escape(o.name || "(none: the request's host)")}</td></tr>
+<tr><td>signup</td><td>${escape(o.signup)}${o.emailDomain ? ` · only @${escape(o.emailDomain)}` : ""}</td></tr>
+<tr><td>requireVerified</td><td>${o.requireVerified}</td></tr>
+<tr><td>sessionDays</td><td>${o.sessionDays}</td></tr>
+<tr><td>${o.protected.length ? "protected" : "public"}</td><td>${escape((o.protected.length ? o.protected : o.public).join(" ") || "(everything needs sign-in)")}</td></tr>
+<tr><td>admins</td><td>${escape(o.admins.join(" "))}</td></tr>
+<tr><td>email</td><td>${escape(d.transport)}${o.email.from ? ` · from ${escape(o.email.from)}` : ""}${o.email.replyTo ? ` · reply-to ${escape(o.email.replyTo)}` : ""}</td></tr>
+<tr><td>tokens</td><td>${d.tokens.total} issued · ${d.tokens.live} still usable</td></tr>
+</tbody></table>
+<pre>permissions:
+${escape(permissionRows) || "  (none)"}${orgOverrides ? `\norganizations:\n${escape(orgOverrides)}` : ""}</pre>
+</div>`;
+    }
+    return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Admin${o.name ? ` · ${escape(o.name)}` : ""}</title>
+<style>${STYLE}</style>
+</head>
+<body>
+<main>
+<div class="top"><h1>${escape(o.name || "Auth")} admin</h1><a href="/">app</a><a href="${SIGN_OUT_PATH}">sign out</a><span class="who">${escape(d.self)}</span></div>
+<nav class="tabs">
+  <a href="${link("orgs")}" class="${tab === "orgs" ? "on" : ""}">Organizations</a>
+  <a href="${link("users")}" class="${tab === "users" ? "on" : ""}">Users</a>
+  <a href="${link("settings")}" class="${tab === "settings" ? "on" : ""}">Settings</a>
+</nav>
+${d.notice ? `<p class="notice">${escape(d.notice)}</p>` : ""}${d.error ? `<p class="error">${escape(d.error)}</p>` : ""}
+${body}
+</main>
+<script nonce="${escape(d.nonce)}">
+for (const f of document.querySelectorAll("form[data-confirm]")) {
+  f.addEventListener("submit", (e) => { if (!confirm(f.dataset.confirm)) e.preventDefault() })
+}
+</script>
+</body>
+</html>`;
+}