create-feedbax 0.1.0 → 0.2.1

package/template/src/components/ui/styles/globals.css

@@ -0,0 +1,151 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "@fontsource-variable/geist";
+@source "../../../**/*.{ts,tsx}";
+@source "../**/*.{ts,tsx}";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --status-planned: oklch(0.606 0.25 292.7);
+  --status-in-progress: oklch(0.623 0.214 259.8);
+  --status-shipped: oklch(0.723 0.219 149.6);
+  --changelog-new: oklch(0.55 0.17 255);
+  --changelog-improved: oklch(0.58 0.16 80);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.16 0.009 258);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0.011 258);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0.011 258);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.97 0 0);
+  --primary-foreground: oklch(0.205 0.011 258);
+  --secondary: oklch(0.269 0.011 258);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0.011 258);
+  --muted-foreground: oklch(0.708 0.008 258);
+  --accent: oklch(0.269 0.011 258);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --status-planned: oklch(0.606 0.25 292.7);
+  --status-in-progress: oklch(0.623 0.214 259.8);
+  --status-shipped: oklch(0.723 0.219 149.6);
+  --changelog-new: oklch(0.72 0.15 255);
+  --changelog-improved: oklch(0.8 0.16 80);
+  --sidebar: oklch(0.205 0.011 258);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0.011 258);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+  --font-sans: "Geist Variable", sans-serif;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-status-planned: var(--status-planned);
+  --color-status-in-progress: var(--status-in-progress);
+  --color-status-shipped: var(--status-shipped);
+  --color-changelog-new: var(--changelog-new);
+  --color-changelog-improved: var(--changelog-improved);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --font-heading: var(--font-sans);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply font-sans bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+    color-scheme: light;
+  }
+  html.dark {
+    color-scheme: dark;
+  }
+}

package/template/src/connected-identity.test.ts

@@ -0,0 +1,144 @@
+import { expect, it } from "vitest";
+import { createConnectedIdentityHandler } from "./connected-identity";
+
+it("starts sign-in with a secure browser challenge and never accepts a return URL", async () => {
+  const handler = createConnectedIdentityHandler({
+    siteUrl: "https://feedback.example",
+    loginUrl: "https://app.example/feedback-login",
+    issuer: "https://app.example",
+    secret: "identity-test-secret-at-least-32-characters",
+    store: undefined!,
+  });
+  const response = await handler(
+    new Request(
+      "https://feedback.example/internal/identity/start?returnTo=https://evil.example",
+    ),
+  );
+  expect(response.status).toBe(303);
+  const target = new URL(response.headers.get("location")!);
+  expect(target.origin).toBe("https://app.example");
+  expect(target.searchParams.get("state")?.length).toBeGreaterThan(30);
+  expect(target.searchParams.get("callback")).toBe(
+    "https://feedback.example/internal/identity/callback",
+  );
+  expect(response.headers.get("set-cookie")).toContain(
+    "HttpOnly; Secure; SameSite=None",
+  );
+  expect(response.headers.get("cache-control")).toBe("no-store");
+});
+
+it("exchanges a browser-bound handoff once, keeps identity private, and revokes sessions on logout", async () => {
+  const { Miniflare } = await import("miniflare");
+  const { readFile } = await import("node:fs/promises");
+  const { existsSync } = await import("node:fs");
+  const { createConnectedStore, signIdentityHandoff } =
+    await import("@feedbax/feedback");
+  const runtime = new Miniflare({
+    modules: true,
+    script: "export default {fetch(){return new Response('ok')}}",
+    compatibilityDate: "2026-07-30",
+    d1Databases: ["DB"],
+  });
+  try {
+    const db = await runtime.getD1Database("DB");
+    await db.exec(
+      (await readFile(
+        existsSync("apps/portal/migrations/0001_connected.sql")
+          ? "apps/portal/migrations/0001_connected.sql"
+          : "migrations/0001_connected.sql",
+        "utf8",
+      )) +
+        "\n" +
+        (await readFile(
+          existsSync("apps/portal/migrations/0002_participation.sql")
+            ? "apps/portal/migrations/0002_participation.sql"
+            : "migrations/0002_participation.sql",
+          "utf8",
+        )),
+    );
+    const secret = "identity-test-secret-at-least-32-characters";
+    const handler = createConnectedIdentityHandler({
+      siteUrl: "https://feedback.example",
+      loginUrl: "https://app.example/login",
+      issuer: "https://app.example",
+      secret,
+      store: createConnectedStore(db),
+      now: () => 1000000,
+    });
+    const started = await handler(
+      new Request("https://feedback.example/internal/identity/start"),
+    );
+    const challenge = started.headers.get("set-cookie")!.split(";")[0]!;
+    const state = new URL(started.headers.get("location")!).searchParams.get(
+      "state",
+    )!;
+    const token = signIdentityHandoff(
+      {
+        subject: "private-subject",
+        displayName: "Alice",
+        audience: "https://feedback.example",
+        issuer: "https://app.example",
+        state,
+        nonce: "nonce",
+        issuedAt: 1000,
+        expiresAt: 1100,
+      },
+      secret,
+    );
+    const callback = (cookie: string, origin = "https://app.example") =>
+      new Request("https://feedback.example/internal/identity/callback", {
+        method: "POST",
+        headers: {
+          Origin: origin,
+          Cookie: cookie,
+          "Content-Type": "application/x-www-form-urlencoded",
+        },
+        body: new URLSearchParams({ token }),
+      });
+    expect((await handler(callback(""))).status).toBe(401);
+    expect(
+      (await handler(callback(challenge, "https://evil.example"))).status,
+    ).toBe(403);
+    const signedIn = await handler(callback(challenge));
+    expect(signedIn.status).toBe(303);
+    expect((await handler(callback(challenge))).status).toBe(401);
+    const session = signedIn.headers
+      .getSetCookie()
+      .find((c) => c.startsWith("__Host-feedbax-session="))!
+      .split(";")[0]!;
+    const sessionRequest = () =>
+      new Request("https://feedback.example/internal/identity/session", {
+        headers: { Cookie: session },
+      });
+    const response = await handler(sessionRequest());
+    expect(response.headers.get("cache-control")).toBe("no-store");
+    expect(await response.json()).toEqual({
+      participant: { displayName: "Alice" },
+    });
+    expect(
+      (
+        await handler(
+          new Request("https://feedback.example/internal/identity/logout", {
+            method: "POST",
+            headers: { Cookie: session, Origin: "https://evil.example" },
+          }),
+        )
+      ).status,
+    ).toBe(403);
+    expect(
+      (
+        await handler(
+          new Request("https://feedback.example/internal/identity/logout", {
+            method: "POST",
+            headers: { Cookie: session, Origin: "https://feedback.example" },
+          }),
+        )
+      ).status,
+    ).toBe(200);
+    expect(await (await handler(sessionRequest())).json()).toEqual({
+      participant: null,
+    });
+  } finally {
+    await runtime.dispose();
+  }
+});

package/template/src/connected-identity.ts

@@ -0,0 +1,122 @@
+import { createHash, randomBytes } from "node:crypto";
+import { verifyIdentityHandoff, type ConnectedStore } from "@feedbax/feedback";
+
+const challengeCookie = "__Host-feedbax-handoff";
+const sessionCookie = "__Host-feedbax-session";
+export const sessionHash = (token: string) =>
+  createHash("sha256").update(token).digest("hex");
+export function readSessionToken(request: Request) {
+  return cookie(request, sessionCookie);
+}
+export function sameOrigin(request: Request, siteUrl: string) {
+  return request.headers.get("origin") === new URL(siteUrl).origin;
+}
+export function createConnectedIdentityHandler(options: {
+  siteUrl: string;
+  loginUrl: string;
+  issuer: string;
+  secret: string;
+  store: ConnectedStore;
+  now?: () => number;
+}) {
+  const origin = new URL(options.siteUrl).origin;
+  return async (request: Request): Promise<Response> => {
+    const path = new URL(request.url).pathname;
+    const headers = new Headers({
+      "Cache-Control": "no-store",
+      "Referrer-Policy": "no-referrer",
+    });
+    const json = (value: unknown, status = 200) =>
+      Response.json(value, { status, headers });
+    try {
+      if (path === "/internal/identity/start" && request.method === "GET") {
+        const state = randomBytes(32).toString("base64url");
+        const target = new URL(options.loginUrl);
+        target.searchParams.set("state", state);
+        target.searchParams.set(
+          "callback",
+          `${origin}/internal/identity/callback`,
+        );
+        headers.set(
+          "Set-Cookie",
+          `${challengeCookie}=${state}; Path=/; Max-Age=300; HttpOnly; Secure; SameSite=None`,
+        );
+        headers.set("Location", target.toString());
+        return new Response(null, { status: 303, headers });
+      }
+      if (path === "/internal/identity/callback" && request.method === "POST") {
+        if (request.headers.get("origin") !== new URL(options.loginUrl).origin)
+          return json({ error: "Sign-in origin is invalid." }, 403);
+        const body = await request.text();
+        if (body.length > 12000)
+          return json({ error: "Sign-in request is too large." }, 413);
+        const form = new URLSearchParams(body);
+        const now = options.now?.() ?? Date.now();
+        const identity = verifyIdentityHandoff(
+          form.get("token") ?? "",
+          options.secret,
+          {
+            audience: origin,
+            issuer: options.issuer,
+            state: cookie(request, challengeCookie) ?? "",
+            now: Math.floor(now / 1000),
+          },
+        );
+        const token = randomBytes(32).toString("base64url");
+        await options.store.acceptIdentity({
+          ...identity,
+          subject: JSON.stringify([identity.issuer, identity.subject]),
+          nonce: identity.nonce,
+          challenge: identity.state,
+          sessionHash: sessionHash(token),
+          expiresAt: now + 7 * 86400000,
+        });
+        headers.append(
+          "Set-Cookie",
+          `${sessionCookie}=${token}; Path=/; Max-Age=604800; HttpOnly; Secure; SameSite=Lax`,
+        );
+        headers.append(
+          "Set-Cookie",
+          `${challengeCookie}=; Path=/; Max-Age=0; HttpOnly; Secure; SameSite=None`,
+        );
+        headers.set("Location", origin);
+        return new Response(null, { status: 303, headers });
+      }
+      if (path === "/internal/identity/session" && request.method === "GET") {
+        const token = readSessionToken(request);
+        const participant = token
+          ? await options.store.session(sessionHash(token), options.now?.())
+          : undefined;
+        return json({
+          participant: participant
+            ? { displayName: participant.displayName }
+            : null,
+        });
+      }
+      if (path === "/internal/identity/logout" && request.method === "POST") {
+        if (!sameOrigin(request, origin))
+          return json({ error: "Request origin is invalid." }, 403);
+        const token = readSessionToken(request);
+        if (token) await options.store.logout(sessionHash(token));
+        headers.set(
+          "Set-Cookie",
+          `${sessionCookie}=; Path=/; Max-Age=0; HttpOnly; Secure; SameSite=Lax`,
+        );
+        return json({ signedOut: true });
+      }
+      return json({ error: "Not found." }, 404);
+    } catch {
+      return json(
+        { error: "Sign-in could not be completed. Start sign-in again." },
+        401,
+      );
+    }
+  };
+}
+function cookie(request: Request, name: string): string | undefined {
+  const pairs = (request.headers.get("cookie") ?? "")
+    .split(";")
+    .map((v) => v.trim())
+    .filter((v) => v.startsWith(`${name}=`));
+  return pairs.length === 1 ? pairs[0]!.slice(name.length + 1) : undefined;
+}

package/template/src/connected-participation.test.tsx

@@ -0,0 +1,67 @@
+// @vitest-environment jsdom
+import { afterEach, expect, it, vi } from "vitest";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import { ConnectedIdentityProvider } from "./components/connected-identity-provider";
+import { VoteToggle } from "./vote-toggle";
+vi.mock("./feedbax", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("./feedbax")>();
+  return {
+    default: {
+      ...actual.default,
+      connected: {
+        issuer: "https://app.example",
+        loginUrl: "https://app.example/login",
+      },
+    },
+  };
+});
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+  localStorage.clear();
+  sessionStorage.clear();
+});
+it("restores a signed-in Participant's Vote from the server instead of device storage", async () => {
+  const request = vi.fn<typeof fetch>().mockImplementation(async (input) => {
+    const url = String(input);
+    if (url === "/internal/identity/session")
+      return Response.json({ participant: { displayName: "Alice" } });
+    if (url.startsWith("/internal/connected/votes?"))
+      return Response.json({ voted: true, voteCount: 4 });
+    return Response.json({ slug: "post", voteCount: 3, voted: false });
+  });
+  vi.stubGlobal("fetch", request);
+  render(
+    <ConnectedIdentityProvider>
+      <VoteToggle
+        post={{
+          slug: "post",
+          title: "Post",
+          description: "Description",
+          type: "Feature Request",
+          status: "Planned",
+          createdAt: new Date(),
+          updatedAt: new Date(),
+          voteCount: 4,
+        }}
+      />
+    </ConnectedIdentityProvider>,
+  );
+  const button = await screen.findByRole("button", {
+    name: "Remove Vote, 4 Votes",
+  });
+  expect(button.getAttribute("aria-pressed")).toBe("true");
+  fireEvent.click(button);
+  await waitFor(() =>
+    expect(
+      screen.getByRole("button", { name: "Add Vote, 3 Votes" }),
+    ).toBeTruthy(),
+  );
+  expect(localStorage.length).toBe(0);
+});