feat(app): Next.js 16 + Auth.js v5 portal skeleton

Next.js 16 + Auth.js v5 skeleton: host→slug middleware, tenant-context layout, OIDC sign-in flow against breakpilot-dev realm. 100% coverage on src/lib. Bumps next to 16.2.6 to clear trivy CVEs in 15.0.3.
2026-05-19 09:35:05 +00:00
parent 3c7409ee9e
commit e7a1290246
25 changed files with 5611 additions and 14 deletions
@@ -0,0 +1,44 @@
+import { auth, signIn, signOut } from "@/auth";
+
+export default async function Dashboard({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  const session = await auth();
+
+  if (!session) {
+    async function login() {
+      "use server";
+      await signIn("keycloak", { redirectTo: `/${slug}/dashboard` });
+    }
+    return (
+      <div>
+        <h1>Sign in to {slug}</h1>
+        <form action={login}>
+          <button type="submit">Sign in with Keycloak</button>
+        </form>
+      </div>
+    );
+  }
+
+  async function logout() {
+    "use server";
+    await signOut({ redirectTo: `/${slug}/dashboard` });
+  }
+
+  return (
+    <div>
+      <h1>Dashboard</h1>
+      <p>
+        Welcome, {session.user?.name ?? session.user?.email ?? "user"}. This is the{" "}
+        <code>{slug}</code> dashboard. Real product tiles, settings, billing — land
+        in M5.2 / M10.1.
+      </p>
+      <form action={logout} style={{ marginTop: 24 }}>
+        <button type="submit">Sign out</button>
+      </form>
+    </div>
+  );
+}
@@ -0,0 +1,36 @@
+import { notFound } from "next/navigation";
+import type { ReactNode } from "react";
+import { fetchTenantBySlug } from "@/lib/tenant-registry";
+
+export default async function TenantLayout({
+  children,
+  params,
+}: {
+  children: ReactNode;
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  const tenant = await fetchTenantBySlug(slug);
+  if (!tenant) notFound();
+
+  return (
+    <div>
+      <header
+        style={{
+          padding: "12px 24px",
+          borderBottom: "1px solid #eaeaea",
+          background: "white",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+        }}
+      >
+        <strong>{tenant.name}</strong>
+        <span style={{ fontSize: 12, color: "#666" }}>
+          {tenant.plan} · {tenant.status}
+        </span>
+      </header>
+      <main style={{ padding: 24 }}>{children}</main>
+    </div>
+  );
+}
@@ -0,0 +1,10 @@
+import { redirect } from "next/navigation";
+
+export default async function TenantRoot({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  redirect(`/${slug}/dashboard`);
+}
@@ -0,0 +1,3 @@
+import { handlers } from "@/auth";
+
+export const { GET, POST } = handlers;
@@ -0,0 +1,25 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+
+export const metadata: Metadata = {
+  title: "Breakpilot",
+  description: "Breakpilot Platform — customer portal",
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body
+        style={{
+          margin: 0,
+          fontFamily:
+            'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
+          background: "#fafafa",
+          color: "#111",
+        }}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}
@@ -0,0 +1,18 @@
+// Apex landing page. In dev this is what loads at http://localhost:3000.
+// Tenant portals live at http://<slug>.localhost:3000 (middleware rewrites).
+
+export default function Apex() {
+  return (
+    <main style={{ maxWidth: 720, margin: "10vh auto", padding: "0 24px" }}>
+      <h1 style={{ fontSize: 32, marginBottom: 16 }}>Breakpilot</h1>
+      <p>
+        Customer portals live at <code>&lt;tenant&gt;.localhost:3000</code> in dev,{" "}
+        <code>&lt;tenant&gt;.breakpilot.com</code> in prod. Backstage lives at{" "}
+        <code>backstage.&lt;apex&gt;</code>.
+      </p>
+      <p style={{ marginTop: 24 }}>
+        Try: <a href="http://acme.localhost:3000">http://acme.localhost:3000</a>
+      </p>
+    </main>
+  );
+}
@@ -0,0 +1,59 @@
+// Auth.js v5 — Keycloak provider.
+//
+// Dev uses the breakpilot-dev realm from platform/orca-platform/dev. The
+// realm's dev-portal client is a public PKCE client; we still pass a
+// non-empty clientSecret because the Keycloak provider requires it
+// structurally — it's unused in the auth code grant for public clients
+// when PKCE is enabled.
+
+import NextAuth from "next-auth";
+import Keycloak from "next-auth/providers/keycloak";
+
+export const { handlers, auth, signIn, signOut } = NextAuth({
+  providers: [
+    Keycloak({
+      clientId: process.env.KEYCLOAK_CLIENT_ID ?? "dev-portal",
+      clientSecret: process.env.KEYCLOAK_CLIENT_SECRET ?? "unused-public-client",
+      issuer:
+        process.env.KEYCLOAK_ISSUER ??
+        "http://localhost:8080/realms/breakpilot-dev",
+    }),
+  ],
+  callbacks: {
+    async jwt({ token, profile }) {
+      // Pass the breakpilot-dev realm's custom claims through to the session.
+      if (profile) {
+        token.tenant_id = (profile as Record<string, unknown>).tenant_id as
+          | string
+          | undefined;
+        token.tenant_slug = (profile as Record<string, unknown>).tenant_slug as
+          | string
+          | undefined;
+        token.org_roles = (profile as Record<string, unknown>).org_roles as
+          | string[]
+          | undefined;
+        token.products = (profile as Record<string, unknown>).products as
+          | string[]
+          | undefined;
+        token.plan = (profile as Record<string, unknown>).plan as
+          | string
+          | undefined;
+        token.tenant_status = (profile as Record<string, unknown>)
+          .tenant_status as string | undefined;
+      }
+      return token;
+    },
+    async session({ session, token }) {
+      session.user = session.user ?? { name: null, email: null, image: null };
+      Object.assign(session, {
+        tenant_id: token.tenant_id,
+        tenant_slug: token.tenant_slug,
+        org_roles: token.org_roles,
+        products: token.products,
+        plan: token.plan,
+        tenant_status: token.tenant_status,
+      });
+      return session;
+    },
+  },
+});
@@ -0,0 +1,46 @@
+import { describe, expect, test } from "vitest";
+import { parseHost } from "./host";
+
+describe("parseHost", () => {
+  test("null host → unknown", () => {
+    expect(parseHost(null)).toEqual({ kind: "unknown" });
+    expect(parseHost(undefined)).toEqual({ kind: "unknown" });
+    expect(parseHost("")).toEqual({ kind: "unknown" });
+  });
+
+  test("apex hosts return apex", () => {
+    expect(parseHost("localhost")).toEqual({ kind: "apex" });
+    expect(parseHost("localhost:3000")).toEqual({ kind: "apex" });
+    expect(parseHost("breakpilot.com")).toEqual({ kind: "apex" });
+    expect(parseHost("stage.breakpilot.com")).toEqual({ kind: "apex" });
+  });
+
+  test("tenant subdomain returns slug", () => {
+    expect(parseHost("acme.localhost:3000")).toEqual({ kind: "tenant", slug: "acme" });
+    expect(parseHost("acme.breakpilot.com")).toEqual({ kind: "tenant", slug: "acme" });
+    expect(parseHost("acme.stage.breakpilot.com")).toEqual({ kind: "tenant", slug: "acme" });
+  });
+
+  test("backstage subdomain is reserved", () => {
+    expect(parseHost("backstage.localhost:3000")).toEqual({ kind: "backstage" });
+    expect(parseHost("backstage.breakpilot.com")).toEqual({ kind: "backstage" });
+  });
+
+  test("invalid slugs return unknown", () => {
+    expect(parseHost("a.localhost")).toEqual({ kind: "unknown" }); // too short (1 char)
+    expect(parseHost("foo_bar.localhost")).toEqual({ kind: "unknown" }); // underscore not allowed
+    expect(parseHost("FOO!.localhost")).toEqual({ kind: "unknown" }); // exclamation invalid
+  });
+
+  test("empty subdomain falls back to apex", () => {
+    expect(parseHost(".localhost")).toEqual({ kind: "apex" });
+  });
+
+  test("uppercase host is lowercased", () => {
+    expect(parseHost("ACME.LOCALHOST")).toEqual({ kind: "tenant", slug: "acme" });
+  });
+
+  test("unknown apex returns unknown", () => {
+    expect(parseHost("acme.example.com")).toEqual({ kind: "unknown" });
+  });
+});
@@ -0,0 +1,41 @@
+// Host → tenant slug parser for the portal middleware.
+//
+// In dev we serve at <slug>.localhost:3000 (e.g. acme.localhost:3000). In
+// prod we serve at <slug>.breakpilot.com. Backstage lives at the apex —
+// no subdomain — and resolves to a fixed `__backstage__` slug.
+
+export type HostMatch =
+  | { kind: "tenant"; slug: string }
+  | { kind: "backstage" }
+  | { kind: "apex" }
+  | { kind: "unknown" };
+
+// Longest-first so `stage.breakpilot.com` is matched before `breakpilot.com`.
+const APEX_HOSTS = ["stage.breakpilot.com", "breakpilot.com", "localhost"];
+const APEX_SET = new Set(APEX_HOSTS);
+
+export function parseHost(host: string | null | undefined): HostMatch {
+  if (!host) return { kind: "unknown" };
+
+  const hostNoPort = host.split(":")[0].toLowerCase();
+
+  if (APEX_SET.has(hostNoPort)) return { kind: "apex" };
+
+  // Strip the known apex suffix to extract the subdomain.
+  for (const apex of APEX_HOSTS) {
+    const suffix = `.${apex}`;
+    if (hostNoPort.endsWith(suffix)) {
+      const sub = hostNoPort.slice(0, -suffix.length);
+      if (!sub) return { kind: "apex" };
+      // Backstage is reserved.
+      if (sub === "backstage") return { kind: "backstage" };
+      // Slugs are [a-z0-9-]{2,40} per the tenant-registry schema check.
+      if (/^[a-z0-9-]{2,40}$/.test(sub)) {
+        return { kind: "tenant", slug: sub };
+      }
+      return { kind: "unknown" };
+    }
+  }
+
+  return { kind: "unknown" };
+}
@@ -0,0 +1,64 @@
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { fetchTenantBySlug, type Tenant } from "./tenant-registry";
+
+const SAMPLE: Tenant = {
+  id: "00000000-0000-0000-0000-000000000001",
+  slug: "acme",
+  name: "Acme Inc.",
+  status: "active",
+  plan: "professional",
+  products: ["certifai", "compliance"],
+  created_at: "2026-05-18T22:00:00Z",
+};
+
+const originalFetch = globalThis.fetch;
+const originalRegistryUrl = process.env.TENANT_REGISTRY_URL;
+
+afterEach(() => {
+  globalThis.fetch = originalFetch;
+  process.env.TENANT_REGISTRY_URL = originalRegistryUrl;
+  vi.restoreAllMocks();
+});
+
+describe("fetchTenantBySlug", () => {
+  beforeEach(() => {
+    process.env.TENANT_REGISTRY_URL = "http://test:1234";
+  });
+
+  test("200 → parsed tenant", async () => {
+    globalThis.fetch = vi.fn(async () => new Response(JSON.stringify(SAMPLE), { status: 200 }));
+    const t = await fetchTenantBySlug("acme");
+    expect(t).toEqual(SAMPLE);
+  });
+
+  test("404 → null", async () => {
+    globalThis.fetch = vi.fn(async () => new Response("", { status: 404 }));
+    const t = await fetchTenantBySlug("nope");
+    expect(t).toBeNull();
+  });
+
+  test("500 → throws", async () => {
+    globalThis.fetch = vi.fn(async () => new Response("", { status: 500, statusText: "boom" }));
+    await expect(fetchTenantBySlug("acme")).rejects.toThrow(/tenant-registry: 500/);
+  });
+
+  test("falls back to default base URL when env unset", async () => {
+    delete process.env.TENANT_REGISTRY_URL;
+    const fetchSpy = vi.fn(async () => new Response(JSON.stringify(SAMPLE), { status: 200 }));
+    globalThis.fetch = fetchSpy;
+    await fetchTenantBySlug("acme");
+    expect(fetchSpy).toHaveBeenCalledWith(
+      "http://localhost:8080/v1/tenants/by-slug/acme",
+      expect.any(Object),
+    );
+  });
+
+  test("encodes slug to defend against weird input", async () => {
+    const fetchSpy = vi.fn<typeof fetch>(async () => new Response("", { status: 404 }));
+    globalThis.fetch = fetchSpy;
+    await fetchTenantBySlug("a/b c");
+    const firstCall = fetchSpy.mock.calls[0];
+    expect(firstCall).toBeDefined();
+    expect(firstCall![0]).toBe("http://test:1234/v1/tenants/by-slug/a%2Fb%20c");
+  });
+});
@@ -0,0 +1,29 @@
+// Tenant Registry client — fetches tenant data from the Go service.
+// Skeleton-mode: read-only by-slug lookup. The portal middleware uses this
+// to resolve `<slug>.localhost:3000` → tenant context before rendering.
+
+export type Tenant = {
+  id: string;
+  slug: string;
+  name: string;
+  status: "active" | "trial" | "frozen" | "archived" | "demo";
+  plan: "starter" | "professional" | "enterprise";
+  products: string[];
+  created_at: string;
+};
+
+function baseUrl(): string {
+  return process.env.TENANT_REGISTRY_URL ?? "http://localhost:8080";
+}
+
+export async function fetchTenantBySlug(slug: string): Promise<Tenant | null> {
+  const res = await fetch(`${baseUrl()}/v1/tenants/by-slug/${encodeURIComponent(slug)}`, {
+    headers: { accept: "application/json" },
+    cache: "no-store",
+  });
+  if (res.status === 404) return null;
+  if (!res.ok) {
+    throw new Error(`tenant-registry: ${res.status} ${res.statusText}`);
+  }
+  return (await res.json()) as Tenant;
+}
@@ -0,0 +1,36 @@
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+import { parseHost } from "@/lib/host";
+
+// Host → URL-rewrite. Acme visits acme.localhost:3000/dashboard; we
+// internally rewrite to /acme/dashboard so the [slug] route group renders.
+// URL bar stays unchanged.
+//
+// Backstage (backstage.<apex>) rewrites to /__backstage__/<rest>.
+// Apex hosts (localhost, breakpilot.com) get a marketing/landing page
+// at the root route.
+
+export function middleware(request: NextRequest) {
+  const match = parseHost(request.headers.get("host"));
+  const url = request.nextUrl.clone();
+
+  if (match.kind === "tenant") {
+    if (!url.pathname.startsWith(`/${match.slug}/`) && url.pathname !== `/${match.slug}`) {
+      url.pathname = `/${match.slug}${url.pathname === "/" ? "" : url.pathname}`;
+      return NextResponse.rewrite(url);
+    }
+  } else if (match.kind === "backstage") {
+    if (!url.pathname.startsWith("/__backstage__")) {
+      url.pathname = `/__backstage__${url.pathname === "/" ? "" : url.pathname}`;
+      return NextResponse.rewrite(url);
+    }
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  // Skip Next internals + API + static assets so middleware doesn't
+  // double-rewrite the auth callback or _next/static.
+  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
+};