Website: Next.js app for accounts, linking, who's online, device sign-in and the console

apps/web: Next.js 16 (App Router), Tailwind 4 and shadcn/ui, light and dark from the system. Pages render on the
server and call the API with Eden Treaty (typed by @t5de/api), forwarding the visitor's cookie; forms use server
actions; sign-up, sign-in and sign-out use Better Auth's React client. /api is rewritten to the API so its cookies
are first-party. Who's online follows the API's event stream (Next's gzip is off: it held the stream back).
Standalone output with a Dockerfile; deploys to Vercel as is.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

apps/web/lib/actions.ts

@@ -0,0 +1,22 @@
+// Server actions answer forms with an ActionState: an error to show, or a notice.
+import "server-only";
+import { ApiError } from "./api";
+
+export type ActionState = { error?: string; notice?: string } | null;
+
+/** Runs fn, turning the API's errors into a message for the form; fn may return a notice. */
+export async function attempt(fn: () => Promise<string | void>): Promise<ActionState> {
+  try {
+    const notice = await fn();
+    return notice ? { notice } : {};
+  } catch (e) {
+    if (e instanceof ApiError) return { error: e.message };
+    throw e;
+  }
+}
+
+/** A form field as a string ("" when missing). */
+export function field(form: FormData, name: string): string {
+  const v = form.get(name);
+  return typeof v === "string" ? v.trim() : "";
+}

apps/web/lib/api.ts

@@ -0,0 +1,78 @@
+// The hub's API, called from server components and server actions. Calls go to the API's internal address
+// (API_URL) with the visitor's cookie, so the API sees the same session the browser has.
+import "server-only";
+import { treaty } from "@elysiajs/eden";
+import type { App } from "@t5de/api";
+import { headers } from "next/headers";
+import { cache } from "react";
+
+const apiURL = process.env.API_URL ?? "http://localhost:4101";
+
+/** The visitor's cookie and address, to pass on to the API. */
+async function forwarded(): Promise<Record<string, string>> {
+  const incoming = await headers();
+  const forward: Record<string, string> = {};
+  for (const name of ["cookie", "x-forwarded-for", "user-agent"]) {
+    const value = incoming.get(name);
+    if (value) forward[name] = value;
+  }
+  return forward;
+}
+
+/**
+ * The API's /api/v1 routes, as the person making this request. (Never await the client itself: it's a proxy, and
+ * awaiting it would call a route named "then".)
+ */
+export const api = treaty<App>(apiURL, { headers: forwarded }).api.v1;
+
+type V1 = typeof api;
+type Problem = { error: string; message: string };
+/** What a route answers when it succeeds (the API's error shape is part of its declared answers). */
+type Ok<T> = Exclude<T, Problem>;
+type Data<Route extends (...args: any[]) => Promise<{ data: unknown }>> = Ok<
+  NonNullable<Awaited<ReturnType<Route>>["data"]>
+>;
+
+export type Person = Data<V1["me"]["get"]>["person"];
+export type Account = Data<V1["account"]["get"]>;
+export type Link = Account["links"][number];
+export type Challenge = Account["challenges"][number];
+export type OnlineEntry = Data<V1["online"]["get"]>["online"][number];
+export type ConsoleData = Data<V1["console"]["get"]>;
+export type AuditEntry = ConsoleData["audit"][number];
+
+/** An error the API answered: message is written to be shown as is. */
+export class ApiError extends Error {
+  constructor(
+    readonly status: number,
+    readonly slug: string,
+    message: string,
+  ) {
+    super(message);
+  }
+}
+
+type Answer<T> = { data: T; error: null } | { data: null; error: { status: unknown; value: unknown } };
+
+/** The answer's data, or throws ApiError with the API's message. */
+export function unwrap<T>(answer: Answer<T>): Ok<NonNullable<T>> {
+  if (answer.error) {
+    const status = typeof answer.error.status === "number" ? answer.error.status : 500;
+    const value = answer.error.value as { error?: unknown; message?: unknown } | null;
+    const slug = typeof value?.error === "string" ? value.error : "error";
+    const message =
+      typeof value?.message === "string" && value.message
+        ? value.message
+        : "Something went wrong. Try again in a moment.";
+    throw new ApiError(status, slug, message);
+  }
+  return answer.data as Ok<NonNullable<T>>;
+}
+
+/** Who's signed in, or undefined. Once per request. */
+export const getMe = cache(async (): Promise<Person | undefined> => {
+  const { data } = await api.me.get();
+  return data && "person" in data ? data.person : undefined;
+});
+
+export const isModerator = (p: Person | undefined) => p?.role === "moderator" || p?.role === "admin";

apps/web/lib/auth-client.ts

@@ -0,0 +1,10 @@
+// Better Auth in the browser: sign-up, sign-in and sign-out. Its requests go to /api/auth on this site, which Next
+// rewrites to the API, so the session cookie is set for this site.
+"use client";
+import { createAuthClient } from "better-auth/react";
+import { usernameClient } from "better-auth/client/plugins";
+
+export const authClient = createAuthClient({
+  baseURL: typeof window === "undefined" ? undefined : window.location.origin,
+  plugins: [usernameClient()],
+});

apps/web/lib/paths.ts

@@ -0,0 +1,6 @@
+/** next if it's a path on this site, else fallback (so ?next= can't send people elsewhere). */
+export function safeNext(next: string | string[] | undefined | null, fallback = "/account"): string {
+  if (typeof next !== "string") return fallback;
+  if (!next.startsWith("/") || next.startsWith("//") || next.startsWith("/\\")) return fallback;
+  return next;
+}

apps/web/lib/utils.ts

@@ -0,0 +1 @@
+export { cn } from "cn";