Drop in the SDK snippet

// sdk-app.ts: the SDK snippet renders the buttons; state + PKCE are made on your server.
// Node 24+: ACCOUNTS_APP_ID=briefcase ACCOUNTS_APP_SECRET=sa_app_… node sdk-app.ts, then open http://localhost:3000/
import { createServer, type ServerResponse } from "node:http";
import { createHash, randomBytes } from "node:crypto";

const ACCOUNTS_URL = process.env.ACCOUNTS_URL ?? "https://accounts.teamofsilicons.com";
const APP_ID = process.env.ACCOUNTS_APP_ID ?? "briefcase";
const APP_SECRET = process.env.ACCOUNTS_APP_SECRET ?? "";
const PORT = Number(process.env.PORT ?? 3000);
const REDIRECT_URI = `http://localhost:${PORT}/callback`; // in the app's redirect_uris

const pending = new Map<string, { verifier: string; startedAt: number }>();
const random = (bytes: number) => randomBytes(bytes).toString("base64url");
const text = (res: ServerResponse, status: number, body: string) =>
  res.writeHead(status, { "Content-Type": "text/plain; charset=utf-8" }).end(body);
const attr = (s: string) => s.replace(/&/g, "&amp;").replace(/"/g, "&quot;");

createServer(async (req, res) => {
  const url = new URL(req.url ?? "/", `http://localhost:${PORT}`);

  if (url.pathname === "/") {
    const state = random(32);
    const verifier = random(32);
    pending.set(state, { verifier, startedAt: Date.now() });
    const challenge = createHash("sha256").update(verifier).digest("base64url");
    res.writeHead(200, {
      "Content-Type": "text/html; charset=utf-8",
      "Set-Cookie": `signin_state=${state}; HttpOnly; SameSite=Lax; Path=/; Max-Age=3600`,
    });
    return res.end(`<!doctype html><title>Sign in</title>
<div id="silicon-accounts" style="max-width:400px"></div>
<script src="${ACCOUNTS_URL}/sdk/v1.js" async
        data-app-id="${attr(APP_ID)}"
        data-redirect-uri="${attr(REDIRECT_URI)}"
        data-target="#silicon-accounts"
        data-scope="email"
        data-state="${attr(state)}"
        data-code-challenge="${attr(challenge)}"
        data-code-challenge-method="S256"></script>`);
  }

  if (url.pathname === "/callback") {
    // Exactly the hosted pages' callback: check the state, exchange the code with the verifier.
    const error = url.searchParams.get("error");
    if (error) return text(res, 400, `Sign-in ended without signing in: ${error}`);
    const state = url.searchParams.get("state") ?? "";
    const cookieState = /(?:^|;\s*)signin_state=([^;]+)/.exec(req.headers.cookie ?? "")?.[1];
    const started = pending.get(state);
    pending.delete(state);
    if (!started || cookieState !== state || Date.now() - started.startedAt > 60 * 60_000) {
      return text(res, 400, "This sign-in was not started in this browser (or it expired).");
    }
    const response = await fetch(new URL("/v1/oauth/token", ACCOUNTS_URL), {
      method: "POST",
      headers: {
        Authorization: `Basic ${Buffer.from(`${APP_ID}:${APP_SECRET}`).toString("base64")}`,
        "Content-Type": "application/x-www-form-urlencoded",
      },
      body: new URLSearchParams({
        grant_type: "authorization_code",
        code: url.searchParams.get("code") ?? "",
        redirect_uri: REDIRECT_URI,
        code_verifier: started.verifier,
      }),
    });
    const tokens = await response.json();
    if (!response.ok) return text(res, 502, `${tokens.error}: ${tokens.error_description}`);
    return text(res, 200, `Signed in as ${tokens.account.id} (${tokens.membership_id})`);
  }

  text(res, 404, "Not found");
}).listen(PORT, () => console.log(`Open http://localhost:${PORT}/`));

https://accounts.teamofsilicons.com/authorize?app_id=briefcase&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fcallback&response_type=code&state=GQe4rfj-DYDcsc1QSee9P0knbkY4YaF83btELqx-7Lo&code_challenge=9oFWaKZEmIFd4oWb4yVL2fRCaobJFwMKi1wdbMs-A50&code_challenge_method=S256&scope=email&method=email

// sdk-static.ts: the SDK makes state + PKCE in the browser; your server only exchanges the code.
// Node 24+: ACCOUNTS_APP_ID=briefcase ACCOUNTS_APP_SECRET=sa_app_… node sdk-static.ts, then open http://localhost:3000/
import { createServer } from "node:http";

const ACCOUNTS_URL = process.env.ACCOUNTS_URL ?? "https://accounts.teamofsilicons.com";
const APP_ID = process.env.ACCOUNTS_APP_ID ?? "briefcase";
const APP_SECRET = process.env.ACCOUNTS_APP_SECRET ?? "";
const PORT = Number(process.env.PORT ?? 3000);
const REDIRECT_URI = `http://localhost:${PORT}/signed-in`; // listed in the app's redirect_uris

const pages: Record<string, string> = {
  // The buttons. data-pkce="S256": the SDK creates state + PKCE and keeps them in sessionStorage.
  "/": `<!doctype html><title>Sign in</title>
<div id="silicon-accounts" style="max-width:400px"></div>
<script src="${ACCOUNTS_URL}/sdk/v1.js" async data-app-id="${APP_ID}"
        data-redirect-uri="${REDIRECT_URI}" data-target="#silicon-accounts"
        data-scope="email" data-pkce="S256"></script>`,
  // The callback page: the SDK checks the state, hands back the code and its verifier.
  "/signed-in": `<!doctype html><title>Signing in…</title><pre id="out">Signing in…</pre>
<script src="${ACCOUNTS_URL}/sdk/v1.js"></script>
<script type="module">
  const out = document.getElementById("out");
  try {
    const { code, codeVerifier } = SiliconAccounts.handleCallback();
    const response = await fetch("/exchange", {
      method: "POST", headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ code, codeVerifier }),
    });
    out.textContent = await response.text();
  } catch (error) {
    out.textContent = \`\${error.code}: \${error.message}\`; // access_denied, unknown_state, …
  }
</script>`,
};

createServer(async (req, res) => {
  const url = new URL(req.url ?? "/", `http://localhost:${PORT}`);
  if (req.method === "POST" && url.pathname === "/exchange") {
    let body = "";
    for await (const chunk of req) body += chunk;
    const { code, codeVerifier } = JSON.parse(body);
    const response = await fetch(new URL("/v1/oauth/token", ACCOUNTS_URL), {
      method: "POST",
      headers: {
        Authorization: `Basic ${Buffer.from(`${APP_ID}:${APP_SECRET}`).toString("base64")}`,
        "Content-Type": "application/x-www-form-urlencoded",
      },
      body: new URLSearchParams({ grant_type: "authorization_code", code, redirect_uri: REDIRECT_URI, code_verifier: codeVerifier }),
    });
    const tokens = await response.json();
    if (!response.ok) return res.writeHead(400).end(`${tokens.error}: ${tokens.error_description}`);
    // Start your own session for tokens.account.uuid here (an HttpOnly cookie), keep the tokens server side.
    return res.writeHead(200).end(`Signed in as ${tokens.account.id} (${tokens.membership_id})`);
  }
  const page = pages[url.pathname];
  if (!page) return res.writeHead(404).end();
  res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" }).end(page);
}).listen(PORT, () => console.log(`Open http://localhost:${PORT}/`));

unknown_state: Silicon Accounts: no sign-in with this state was started in this browser tab, or it was already finished. Start the sign-in again (never reuse a callback address).

{"state": "…", "code_verifier": "…", "nonce": null, "redirect_uri": "http://localhost:3000/signed-in", "app_id": "briefcase", "created_at": 1791341046000}

<button id="sign-in">Sign in</button>
<script src="https://accounts.teamofsilicons.com/sdk/v1.js" async></script>
<script>
  document.addEventListener("silicon-accounts:ready", ({ detail: sdk }) => {
    document.getElementById("sign-in").onclick = () =>
      sdk.signIn({ appId: "briefcase", redirectUri: "https://briefcase.example/callback", pkce: "S256", method: "google" });
  });
</script>