API

.github/workflows/ci.yml

@@ -14,8 +14,6 @@ jobs:
     steps:
       - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
       - uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
-        with:
-          bun-version: 1.4.2
       - run: bun install --frozen-lockfile
       - run: bun run format:check
 
@@ -24,8 +22,6 @@ jobs:
     steps:
       - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
       - uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
-        with:
-          bun-version: 1.4.2
       - run: bun install --frozen-lockfile
       - run: bun run lint:check
 
@@ -34,8 +30,6 @@ jobs:
     steps:
       - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
       - uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
-        with:
-          bun-version: 1.4.2
       - run: bun install --frozen-lockfile
       - run: bun run test:run
 
@@ -44,7 +38,5 @@ jobs:
     steps:
       - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
       - uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
-        with:
-          bun-version: 1.4.2
       - run: bun install --frozen-lockfile
       - run: bun run typecheck

README.md

@@ -15,11 +15,12 @@ Example names combine the authentication flow and storage, with a transport suff
 
 | Flow | TanStack Start | Next.js | Bun | Convex |
 | --- | --- | --- | --- | --- |
-| `otp` | [memory](examples/tanstack-start-react/otp-memory), postgres (planned) | [memory](examples/nextjs/otp-memory) | [memory-cookie](examples/bun-react/otp-memory-cookie), [memory-header](examples/bun-react/otp-memory-header) | [Convex](examples/convex-react/otp) |
+| `otp` | postgres (planned) | [memory](examples/nextjs/otp-memory) | [memory-cookie](examples/bun-react/otp-memory-cookie), [memory-header](examples/bun-react/otp-memory-header) | [Convex](examples/convex-react/otp) |
 | `passkey` | [memory](examples/tanstack-start-react/passkey-memory), postgres (planned) | — | — | — |
 | `otp-passkey` | [memory](examples/tanstack-start-react/otp-passkey-memory), postgres (planned) | — | — | — |
 | `otp-passkey-strict` | [memory](examples/tanstack-start-react/otp-passkey-strict-memory), postgres (planned) | — | — | — |
 | `passkey-otp` | [memory](examples/tanstack-start-react/passkey-otp-memory), postgres (planned) | — | — | — |
+| `kitchen-sink` | [memory](examples/tanstack-start-react/kitchen-sink) | — | — | — |
 
 Memory storage is for demos. Its state is local to each server instance and is lost on restart.
 

examples/bun-react/otp-memory-cookie/src/index.css

@@ -1,10 +1,2 @@
 @import "tailwindcss";
 @import "@repo/shared-react/styles.css";
-
-/* Button cursor */
-@layer base {
-  button:not(:disabled),
-  [role="button"]:not(:disabled) {
-    cursor: pointer;
-  }
-}

examples/bun-react/otp-memory-header/src/index.css

@@ -1,10 +1,2 @@
 @import "tailwindcss";
 @import "@repo/shared-react/styles.css";
-
-/* Button cursor */
-@layer base {
-  button:not(:disabled),
-  [role="button"]:not(:disabled) {
-    cursor: pointer;
-  }
-}

examples/tanstack-start-react/otp-memory/README.md → examples/bun/otp/README.md

@@ -1,4 +1,4 @@
-# otp-memory
+# otp
 
 ## License
 

examples/bun/otp/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@repo/example-bun-spike-otp",
+  "private": true,
+  "license": "MIT-0",
+  "type": "module",
+  "scripts": {
+    "dev": "bun --hot src/server.ts",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@repo/spike": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/bun": "^1.4.2",
+    "typescript": "^6.0.3"
+  }
+}

examples/bun/otp/src/auth.ts

@@ -0,0 +1,38 @@
+import { makeOpaqueSessionManager, makeOTP } from "@repo/spike";
+import { db } from "./db";
+
+/** How long someone stays signed in, in seconds */
+export const sessionTtl = 30 * 24 * 60 * 60;
+
+export const sessionManager = makeOpaqueSessionManager<{ userId: string }>({
+  store: async (token, row) => {
+    await db.sessions.insert({
+      token,
+      userId: row.userId,
+      expiresAt: row.expiresAt,
+    });
+  },
+  get: async (token) => {
+    const row = await db.sessions.get(token);
+
+    return row ? { userId: row.userId, expiresAt: row.expiresAt } : null;
+  },
+  delete: async (token) => {
+    await db.sessions.delete(token);
+  },
+  ttl: sessionTtl,
+});
+
+/** Signs someone in or up */
+export const signInOtp = makeOTP({
+  purpose: "sign-in",
+  store: async (row) => {
+    await db.otps.insert(row);
+  },
+  take: async (ticket) => db.otps.delete(ticket),
+  send: async ({ to, otp }) => {
+    console.log(`[OTP] Sign in, ${to}: ${otp}`);
+  },
+  ttl: 10 * 60,
+  attempts: 3,
+});

examples/bun/otp/src/db.ts

@@ -0,0 +1,26 @@
+/**
+ * In-memory database
+ *
+ * Simple in-memory stores for demonstration purposes. In a real app these
+ * would be replaced with database queries.
+ */
+import { makeMemoryTable } from "@repo/spike/demo";
+
+export const db = {
+  users: makeMemoryTable<{
+    userId: string;
+    email: string;
+  }>("userId"),
+  sessions: makeMemoryTable<{
+    token: string;
+    userId: string;
+    expiresAt: number;
+  }>("token"),
+  otps: makeMemoryTable<{
+    ticket: string;
+    identifier: string;
+    otp: string;
+    expiresAt: number;
+    attemptsLeft: number;
+  }>("ticket"),
+};

examples/bun/otp/src/index.html

@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>AuthAX - Bun OTP example</title>
+    <script type="module" src="./page.ts"></script>
+  </head>
+  <body>
+    <main>
+      <h1>AuthAX</h1>
+      <p id="viewer" hidden></p>
+      <form id="email-form" hidden>
+        <label>
+          Email address
+          <input name="email" type="email" autocomplete="email" required />
+        </label>
+        <button>Send one-time password</button>
+      </form>
+      <form id="otp-form" hidden>
+        <label>
+          One-time password
+          <input
+            name="otp"
+            inputmode="numeric"
+            autocomplete="one-time-code"
+            required
+          />
+        </label>
+        <button>Sign in</button>
+      </form>
+      <p id="error" role="alert"></p>
+    </main>
+  </body>
+</html>

examples/bun/otp/src/page.ts

@@ -0,0 +1,62 @@
+const viewerText = document.getElementById("viewer") as HTMLParagraphElement;
+const emailForm = document.getElementById("email-form") as HTMLFormElement;
+const otpForm = document.getElementById("otp-form") as HTMLFormElement;
+const errorText = document.getElementById("error") as HTMLParagraphElement;
+
+// Held between sending the OTP and verifying it
+let ticket = "";
+
+async function showViewer() {
+  const response = await fetch("/api/viewer");
+  const viewer: { email: string } | null = await response.json();
+
+  if (viewer) {
+    viewerText.textContent = `Signed in as ${viewer.email}`;
+    viewerText.hidden = false;
+    emailForm.hidden = true;
+    otpForm.hidden = true;
+  } else {
+    emailForm.hidden = false;
+  }
+}
+
+emailForm.addEventListener("submit", async (event) => {
+  event.preventDefault();
+
+  const response = await fetch("/api/otp/send", {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify({ email: new FormData(emailForm).get("email") }),
+  });
+
+  if (!response.ok) {
+    errorText.textContent = "Could not send a one-time password";
+    return;
+  }
+
+  const body: { ticket: string } = await response.json();
+  ticket = body.ticket;
+  errorText.textContent = "";
+  emailForm.hidden = true;
+  otpForm.hidden = false;
+});
+
+otpForm.addEventListener("submit", async (event) => {
+  event.preventDefault();
+
+  const response = await fetch("/api/otp/verify", {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify({ ticket, otp: new FormData(otpForm).get("otp") }),
+  });
+
+  if (!response.ok) {
+    errorText.textContent = "Wrong or expired one-time password";
+    return;
+  }
+
+  errorText.textContent = "";
+  await showViewer();
+});
+
+await showViewer();

examples/bun/otp/src/server.ts

@@ -0,0 +1,108 @@
+import { db } from "./db";
+import { sessionManager, sessionTtl, signInOtp } from "./auth";
+import page from "./index.html";
+
+/**
+ * Every origin the page is served from. Not read from the request, since
+ * behind a proxy the request's URL holds the internal address.
+ */
+const origins = ["http://localhost:3108"];
+
+const server = Bun.serve({
+  port: 3108,
+  development: process.env.NODE_ENV !== "production",
+  routes: {
+    "/": page,
+
+    /** Sends an OTP to the email address and answers the ticket */
+    "/api/otp/send": {
+      POST: async (req) => {
+        // A page on another site can post here too
+        const origin = req.headers.get("origin");
+
+        if (origin === null || !origins.includes(origin)) {
+          return new Response(null, { status: 403 });
+        }
+
+        const body: unknown = await req.json();
+
+        if (
+          typeof body !== "object" ||
+          body === null ||
+          !("email" in body) ||
+          typeof body.email !== "string"
+        ) {
+          return new Response(null, { status: 400 });
+        }
+
+        const ticket = await signInOtp.send(body.email);
+
+        return Response.json({ ticket });
+      },
+    },
+
+    /** Checks the OTP, finds or creates the user, and signs them in */
+    "/api/otp/verify": {
+      POST: async (req) => {
+        // A page on another site could sign the visitor in to its own account
+        const origin = req.headers.get("origin");
+
+        if (origin === null || !origins.includes(origin)) {
+          return new Response(null, { status: 403 });
+        }
+
+        const body: unknown = await req.json();
+
+        if (
+          typeof body !== "object" ||
+          body === null ||
+          !("ticket" in body) ||
+          !("otp" in body) ||
+          typeof body.ticket !== "string" ||
+          typeof body.otp !== "string"
+        ) {
+          return new Response(null, { status: 400 });
+        }
+
+        const verified = await signInOtp.verify({
+          ticket: body.ticket,
+          otp: body.otp,
+        });
+
+        if (!verified.success) {
+          return Response.json({ error: verified.error }, { status: 400 });
+        }
+
+        const { row: user } = await db.users.findOrInsert(
+          { email: verified.data.identifier },
+          { userId: crypto.randomUUID(), email: verified.data.identifier },
+        );
+
+        const token = await sessionManager.make({ userId: user.userId });
+
+        req.cookies.set("session", token, {
+          httpOnly: true,
+          secure: process.env.NODE_ENV === "production",
+          sameSite: "lax",
+          path: "/",
+          maxAge: sessionTtl,
+        });
+
+        return Response.json({ email: user.email });
+      },
+    },
+
+    /** Who is signed in, null when nobody is */
+    "/api/viewer": {
+      GET: async (req) => {
+        const token = req.cookies.get("session");
+        const session = token ? await sessionManager.get(token) : null;
+        const user = session ? await db.users.get(session.userId) : null;
+
+        return Response.json(user ? { email: user.email } : null);
+      },
+    },
+  },
+});
+
+console.log(`Listening on ${server.url}`);

examples/bun/otp/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "Preserve",
+    "moduleResolution": "bundler",
+    "lib": ["ESNext", "DOM"],
+    "types": ["bun"],
+
+    "moduleDetection": "force",
+    "verbatimModuleSyntax": true,
+    "erasableSyntaxOnly": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noImplicitOverride": true,
+    "noFallthroughCasesInSwitch": true
+  }
+}

examples/convex-react/otp/package.json

@@ -25,6 +25,6 @@
     "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "^6.1.1",
     "typescript": "^6.0.3",
-    "vite": "^8.3.1"
+    "vite": "^8.3.2"
   }
 }