Add sign-in to a Node site

import { readFileSync } from "node:fs";
import { createServer } from "node:http";
import { DatabaseSync } from "node:sqlite";
import { createAuth, createHandler, handleNode, toRequest } from "modest-auth";

// The address people open the site at.
const ORIGIN = process.env.ORIGIN ?? "http://localhost:3000";

// Accounts, sessions, and limits, kept in one SQLite file.
const auth = createAuth(new DatabaseSync(process.env.DATABASE_PATH ?? "app.db"));

// The routes under /auth, which your pages call.
const handler = createHandler(auth, {
  origin: ORIGIN,
  // Your page that emailed links open.
  linkPage: "/link",
  // For now, print each email (with its link) here, rather than send it.
  sendEmail: (to, subject, text) => console.log(`\nTo: ${to}\nSubject: ${subject}\n\n${text}\n`),
});

// The site's own files: only these, each read once.
const file = (path, type) => ({ body: readFileSync(path, "utf8"), type });
const files = {
  "/": file("public/index.html", "text/html"),
  "/link": file("public/link.html", "text/html"),
  "/app.js": file("public/app.js", "text/javascript"),
  "/link.js": file("public/link.js", "text/javascript"),
};

const headers = (type) => ({
  "content-type": `${type}; charset=utf-8`,
  // Only this site's own scripts run on its pages.
  "content-security-policy": "default-src 'none'; script-src 'self'; connect-src 'self'; form-action 'none'; frame-ancestors 'none'; base-uri 'none'",
  "referrer-policy": "no-referrer",
});

const server = createServer(async (req, res) => {
  try {
    // Anything under /auth is answered here.
    if (await handleNode(handler, req, res)) return;

    // A page only for people signed in.
    if (req.url === "/members") {
      const user = handler.userOf(toRequest(req));
      if (!user) return res.writeHead(303, { location: "/" }).end();
      return res.writeHead(200, { "content-type": "text/plain; charset=utf-8" }).end(`Welcome to the members' page, ${user.email}.`);
    }

    const found = files[req.url];
    if (!found) return res.writeHead(404, headers("text/plain")).end("Not found");
    res.writeHead(200, headers(found.type)).end(found.body);
  } catch (error) {
    console.error(error);
    res.writeHead(500).end("Something went wrong.");
  }
});
// Slow clients get ten seconds, not Node's five minutes.
server.requestTimeout = 10_000;
server.headersTimeout = 10_000;
server.listen(3000, () => console.log(`Open ${ORIGIN}`));

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My site</title>
  </head>
  <body>
    <h1 id="who">…</h1>
    <p id="status" role="status"></p>

    <div id="signed-out" hidden>
      <h2>Sign up, or forgot your password?</h2>
      <form method="post" data-route="send-password-link">
        <label>Email <input name="email" type="email" autocomplete="email" required /></label>
        <button>Email me a link</button>
      </form>

      <h2>Sign in</h2>
      <form method="post" data-route="sign-in">
        <label>Email <input name="email" type="email" autocomplete="username" required /></label>
        <label>Password <input name="password" type="password" autocomplete="current-password" required /></label>
        <button>Sign in</button>
      </form>
      <form method="post" data-route="send-sign-in-link">
        <label>Email <input name="email" type="email" autocomplete="email" required /></label>
        <button>Email me a sign-in link instead</button>
      </form>
    </div>

    <div id="signed-in" hidden>
      <p><a href="/members">The members' page</a></p>
      <form method="post" data-route="sign-out"><button>Sign out</button></form>

      <h2>Change your password</h2>
      <form method="post" data-route="password">
        <label>Current password <input name="current" type="password" autocomplete="current-password" required /></label>
        <label>New password <input name="next" type="password" autocomplete="new-password" required minlength="15" /></label>
        <button>Change it</button>
      </form>
    </div>

    <script type="module" src="/app.js"></script>
  </body>
</html>

// Sends a route JSON, as every /auth route expects.
async function post(route, body) {
  const res = await fetch(`/auth/${route}`, {
    method: "POST",
    headers: { "content-type": "application/json" },
    body: JSON.stringify(body),
  });
  return { res, json: await res.json() };
}
const say = (text) => (document.getElementById("status").textContent = text);

// Who's signed in, if anyone.
const { user } = await (await fetch("/auth/session")).json();
document.getElementById("who").textContent = user ? `Signed in as ${user.email}` : "Not signed in";
document.getElementById(user ? "signed-in" : "signed-out").hidden = false;

// Each form sends its fields to the route named in its data-route.
for (const form of document.querySelectorAll("form")) {
  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    const { res, json } = await post(form.dataset.route, Object.fromEntries(new FormData(form)));
    if (res.status === 202) say("Check your email for a link.");
    else if (res.ok) location.reload();
    else say(json.error.message);
  });
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My site</title>
  </head>
  <body>
    <h1 id="for">Checking the link…</h1>
    <p id="status" role="status"></p>

    <form method="post" data-route="set-password" hidden>
      <label>New password <input name="password" type="password" autocomplete="new-password" required minlength="15" /></label>
      <button>Save and sign in</button>
    </form>
    <form method="post" data-route="sign-in-with-link" hidden>
      <button>Sign in</button>
    </form>

    <script type="module" src="/link.js"></script>
  </body>
</html>

// The token comes after the "#", which browsers never send to a server.
// Read it first, then take it out of the address bar.
const token = location.hash.slice(1).split("=")[1];
history.replaceState(null, "", location.pathname);

async function post(route, body) {
  const res = await fetch(`/auth/${route}`, {
    method: "POST",
    headers: { "content-type": "application/json" },
    body: JSON.stringify(body),
  });
  return { res, json: await res.json() };
}
const heading = document.getElementById("for");

// Which email is this link for? Say so, so nobody is signed in to an account they didn't expect.
const link = await post("link", { token });
if (!link.res.ok) {
  heading.textContent = link.json.error.message;
} else {
  const { kind, email } = link.json;
  const route = kind === "password" ? "set-password" : "sign-in-with-link";
  heading.textContent = `${kind === "password" ? "Choose a password for" : "Sign in as"} ${email}`;
  const form = document.querySelector(`[data-route="${route}"]`);
  form.hidden = false;

  // Nothing happens until the person presses the button.
  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    const { res, json } = await post(route, { ...Object.fromEntries(new FormData(form)), token });
    if (res.ok) location.href = "/";
    else document.getElementById("status").textContent = json.error.message;
  });
}

const request = toRequest(req);
const user = handler.userOf(request);
if (!user) return res.writeHead(401).end();
if (!handler.fromSite(request)) return res.writeHead(403).end();

<form method="post" data-route="delete-account">
  <label>Password <input name="password" type="password" autocomplete="current-password" required /></label>
  <button>Delete my account</button>
</form>

// Accounts, sessions, and limits, kept in one SQLite file.
const auth = createAuth(new DatabaseSync(process.env.DATABASE_PATH ?? "app.db"), {
  // Refuse passwords known from data breaches. Only the first 5 characters of a hash leave.
  breachedRange: (prefix, { signal }) =>
    fetch(`https://api.pwnedpasswords.com/range/${prefix}`, { headers: { "add-padding": "true" }, signal }),
});

// Sends an email with Resend (any email service with an HTTPS API works much the same).
async function sendWithResend(to, subject, text, { signal }) {
  const res = await fetch("https://api.resend.com/emails", {
    method: "POST",
    headers: { authorization: `Bearer ${process.env.RESEND_API_KEY}`, "content-type": "application/json" },
    body: JSON.stringify({ from: "My site <signin@example.org>", to, subject, text }),
    signal,
  });
  if (!res.ok) throw new Error(`Resend answered ${res.status}`);
}

// The routes under /auth, which your pages call.
const handler = createHandler(auth, {
  origin: ORIGIN,
  // Your page that emailed links open.
  linkPage: "/link",
  // Sent for real when there's a key; printed here when there isn't.
  sendEmail: process.env.RESEND_API_KEY
    ? sendWithResend
    : (to, subject, text) => console.log(`\nTo: ${to}\nSubject: ${subject}\n\n${text}\n`),
  // The proxy in front: here, nginx or Caddy on the same machine. Leave it out if nothing's in front.
  trustedProxies: ["loopback"],
});