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/app/device/actions.ts

@@ -0,0 +1,10 @@
+"use server";
+import { api, unwrap } from "@/lib/api";
+import { attempt, field, type ActionState } from "@/lib/actions";
+
+/** Approves the sign-in code T5DE shows, signing that computer in as this person. */
+export async function approveDevice(_: ActionState, form: FormData): Promise<ActionState> {
+  return attempt(async () => {
+    unwrap(await api.device.approve.post({ code: field(form, "code") }));
+  });
+}

apps/web/app/device/device-form.tsx

@@ -0,0 +1,42 @@
+"use client";
+import { useActionState } from "react";
+import { FormMessage, SubmitButton } from "@/components/forms";
+import { NarrowCard } from "@/components/narrow-card";
+import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { approveDevice } from "./actions";
+
+export function DeviceForm({ code, username }: { code: string; username: string }) {
+  const [state, action] = useActionState(approveDevice, null);
+
+  if (state && !state.error)
+    return <NarrowCard title="T5DE is signed in" description="You can close this page and go back to T5DE." />;
+
+  return (
+    <NarrowCard title="Sign T5DE in" description={`Enter the code T5DE shows, to sign it in as ${username}.`}>
+      <form action={action}>
+        <FieldGroup>
+          <Field>
+            <FieldLabel htmlFor="code">Code</FieldLabel>
+            <Input
+              id="code"
+              name="code"
+              defaultValue={code}
+              placeholder="XXXX-XXXX"
+              required
+              autoFocus
+              autoComplete="off"
+              spellCheck={false}
+              className="h-11 text-center font-mono text-lg tracking-widest uppercase"
+            />
+          </Field>
+          <FormMessage state={state} />
+          <Field>
+            <SubmitButton pendingLabel="Signing in…">Sign in</SubmitButton>
+            <FieldDescription>Only enter a code you got from T5DE yourself.</FieldDescription>
+          </Field>
+        </FieldGroup>
+      </form>
+    </NarrowCard>
+  );
+}

apps/web/app/device/page.tsx

@@ -0,0 +1,20 @@
+import type { Metadata } from "next";
+import { redirect } from "next/navigation";
+import { getMe } from "@/lib/api";
+import { DeviceForm } from "./device-form";
+
+export const metadata: Metadata = { title: "Sign T5DE in" };
+
+type Search = { user_code?: string | string[]; code?: string | string[] };
+
+export default async function Device({ searchParams }: { searchParams: Promise<Search> }) {
+  const search = await searchParams;
+  // Better Auth's verification link carries user_code; ?code= is shorter to type.
+  const code = [search.user_code, search.code].find((c) => typeof c === "string") ?? "";
+  const me = await getMe();
+  if (!me) {
+    const here = code ? `/device?code=${encodeURIComponent(code)}` : "/device";
+    redirect(`/signin?next=${encodeURIComponent(here)}`);
+  }
+  return <DeviceForm code={code} username={me.username} />;
+}