Authentication across front-end and back-end

// src/index.js -- app-level sessions stored in Workers KV
export default {
  async fetch(request, env) {
    const url = new URL(request.url);

    // Public: log in and receive a session cookie
    if (url.pathname === "/login" && request.method === "POST") {
      return handleLogin(request, env);
    }
    // Public: drop the session
    if (url.pathname === "/logout" && request.method === "POST") {
      return handleLogout(request, env);
    }
    // Protected: only reachable with a valid session cookie
    if (url.pathname === "/me") {
      return requireSession(request, env, (session) =>
        Response.json({ email: session.email })
      );
    }
    return new Response("Not found", { status: 404 });
  },
};

// --- Login: verify password, create a session in KV, set a cookie ---
async function handleLogin(request, env) {
  const { email, password } = await request.json();

  const record = await env.USERS.get(`user:${email}`);
  if (!record) return new Response("Invalid login", { status: 401 });
  const user = JSON.parse(record);

  // DEMO ONLY: comparing SHA-256 hashes.
  // In production hash passwords with a real KDF (Argon2id / scrypt / bcrypt,
  // or PBKDF2 via Web Crypto with many iterations and a per-user salt).
  if ((await sha256(password)) !== user.passwordHash) {
    return new Response("Invalid login", { status: 401 });
  }

  // Opaque random id -- the cookie holds only this id, never user data.
  const sessionId = crypto.randomUUID();
  const session = { email: user.email, createdAt: Date.now() };
  const ttl = 60 * 60 * 24 * 7; // 7 days, in seconds

  await env.SESSIONS.put(`session:${sessionId}`, JSON.stringify(session), {
    expirationTtl: ttl,
  });

  return new Response(JSON.stringify({ ok: true }), {
    headers: {
      "Content-Type": "application/json",
      "Set-Cookie": cookie("session", sessionId, ttl),
    },
  });
}

// --- Middleware: read the cookie, look the session up in KV ---
async function requireSession(request, env, handler) {
  const id = getCookie(request, "session");
  if (!id) return new Response("Unauthorized", { status: 401 });

  const record = await env.SESSIONS.get(`session:${id}`);
  if (!record) return new Response("Unauthorized", { status: 401 });

  return handler(JSON.parse(record));
}

// --- Logout: delete the session and clear the cookie ---
async function handleLogout(request, env) {
  const id = getCookie(request, "session");
  if (id) await env.SESSIONS.delete(`session:${id}`);
  return new Response(JSON.stringify({ ok: true }), {
    headers: {
      "Content-Type": "application/json",
      "Set-Cookie": cookie("session", "", 0),
    },
  });
}

// --- Helpers ---
function cookie(name, value, maxAge) {
  return [
    `${name}=${value}`,
    "HttpOnly",
    "Secure",
    "SameSite=Lax",
    "Path=/",
    `Max-Age=${maxAge}`,
  ].join("; ");
}

function getCookie(request, name) {
  const header = request.headers.get("Cookie") || "";
  for (const part of header.split(";")) {
    const [key, ...rest] = part.trim().split("=");
    if (key === name) return rest.join("=");
  }
  return null;
}

async function sha256(text) {
  const data = new TextEncoder().encode(text);
  const digest = await crypto.subtle.digest("SHA-256", data);
  return [...new Uint8Array(digest)]
    .map((b) => b.toString(16).padStart(2, "0"))
    .join("");
}

<!-- A plain login form posting JSON to the Worker -->
<form id="login">
  <input name="email" type="email" placeholder="Email" required />
  <input name="password" type="password" placeholder="Password" required />
  <button>Log in</button>
</form>

<script>
  const form = document.getElementById("login");
  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    const res = await fetch("/login", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include", // let the browser store & resend the cookie
      body: JSON.stringify({
        email: form.email.value,
        password: form.password.value,
      }),
    });
    if (res.ok) {
      // The session cookie is set; protected fetches now work automatically.
      const me = await fetch("/me", { credentials: "include" }).then((r) => r.json());
      alert(`Welcome, ${me.email}`);
    } else {
      alert("Login failed");
    }
  });
</script>