Auth flows, diagrammed

Authentication can feel abstract because the important parts happen invisibly between the browser, your server, and an identity provider. This guide draws four of the most common login flows as sequence diagrams, so you can literally see who talks to whom, in what order, and what gets passed along.

SSO (Single Sign-On) means you log in once with one identity provider and then reach many apps without logging in again. With Cloudflare Access, Cloudflare sits in front of your app and handles the whole login — you write no auth code. After login, Cloudflare gives the browser a signed cookie that your app can trust.

A session is the server's memory of one logged-in visitor. After you log in, the server stores a session record (here in Workers KV) and hands the browser a cookie holding only a random session id. The browser sends that cookie on every later request, and the server looks the id up to know who you are. This is the classic flow for server-rendered web apps.

A JWT (JSON Web Token) is a signed string that carries claims like the user id and an expiry time. Because it is signed with a secret, the server can trust it without storing anything — it just checks the signature. The client sends it in an Authorization header as a 'bearer' token, meaning 'whoever bears this token is allowed in'. This is the go-to flow for APIs, single-page apps, and mobile apps.

export default {
  async fetch(req, env) {
    const header = req.headers.get("Authorization") || "";
    const [scheme, token] = header.split(" ");
    if (scheme !== "Bearer" || !token) {
      return new Response("Missing bearer token", { status: 401 });
    }
    const valid = await verifyJWT(token, env.JWT_SECRET);
    if (!valid) return new Response("Invalid token", { status: 401 });
    return Response.json({ ok: true, message: "Welcome back!" });
  }
};

// Verify an HS256 JWT signature with the Web Crypto API
async function verifyJWT(token, secret) {
  const [head, body, sig] = token.split(".");
  if (!head || !body || !sig) return false;
  const key = await crypto.subtle.importKey(
    "raw",
    new TextEncoder().encode(secret),
    { name: "HMAC", hash: "SHA-256" },
    false,
    ["verify"]
  );
  const signed = new TextEncoder().encode(head + "." + body);
  const bytes = Uint8Array.from(
    atob(sig.replace(/-/g, "+").replace(/_/g, "/")),
    (c) => c.charCodeAt(0)
  );
  return crypto.subtle.verify("HMAC", key, bytes, signed);
}

OAuth lets users log in with an account they already have, like Google or GitHub, without giving your app their password. Your app redirects the user to the provider, the user approves, and the provider redirects back with a short-lived code. Your app then swaps that code for an access token on the server side. The 'authorization code' style below is the secure, recommended pattern.

• Never store a raw JWT or session id in localStorage if you can avoid it — an HttpOnly cookie is safer against XSS.
• Always verify a JWT's signature AND its expiry on the server; never trust the payload alone.
• For pure internal tools, Cloudflare Access often replaces all of this with zero auth code.
• Add Turnstile to your login form to block bots before they ever reach your password check.
• Give sessions and tokens a short lifetime, and provide a real logout that deletes the server-side session.