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/signup/page.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from "next";
+import { redirect } from "next/navigation";
+import { NarrowCard } from "@/components/narrow-card";
+import { getMe } from "@/lib/api";
+import { SignUpForm } from "./signup-form";
+
+export const metadata: Metadata = { title: "Create account" };
+
+export default async function SignUp() {
+  if (await getMe()) redirect("/account");
+  return (
+    <NarrowCard title="Create account" description="One T5DE account for all your IMVU accounts.">
+      <SignUpForm />
+    </NarrowCard>
+  );
+}

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

@@ -0,0 +1,85 @@
+"use client";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { ErrorText } from "@/components/forms";
+import { Button } from "@/components/ui/button";
+import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { authClient } from "@/lib/auth-client";
+
+export function SignUpForm() {
+  const router = useRouter();
+  const [error, setError] = useState("");
+  const [pending, setPending] = useState(false);
+
+  async function submit(form: FormData) {
+    const username = String(form.get("username"));
+    const password = String(form.get("password"));
+    if (password !== form.get("password2")) {
+      setError("The passwords don't match.");
+      return;
+    }
+    setError("");
+    setPending(true);
+    const { error } = await authClient.signUp.email({
+      username,
+      name: username,
+      email: String(form.get("email")),
+      password,
+    });
+    if (error) {
+      setError(error.message ?? "That didn't work. Try again.");
+      setPending(false);
+      return;
+    }
+    router.push("/account?welcome=1");
+    router.refresh();
+  }
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        void submit(new FormData(e.currentTarget));
+      }}
+    >
+      <FieldGroup>
+        <Field>
+          <FieldLabel htmlFor="username">Username</FieldLabel>
+          <Input
+            id="username"
+            name="username"
+            autoComplete="username"
+            required
+            autoFocus
+            pattern="[A-Za-z0-9_]{3,32}"
+            title="3 to 32 letters, digits or underscores"
+          />
+        </Field>
+        <Field>
+          <FieldLabel htmlFor="email">Email</FieldLabel>
+          <Input id="email" name="email" type="email" autoComplete="email" required />
+        </Field>
+        <Field>
+          <FieldLabel htmlFor="password">Password</FieldLabel>
+          <Input id="password" name="password" type="password" autoComplete="new-password" required minLength={10} />
+        </Field>
+        <Field>
+          <FieldLabel htmlFor="password2">Password again</FieldLabel>
+          <Input id="password2" name="password2" type="password" autoComplete="new-password" required minLength={10} />
+          <FieldDescription>Not your IMVU password: use a new one.</FieldDescription>
+        </Field>
+        {error && <ErrorText>{error}</ErrorText>}
+        <Field>
+          <Button type="submit" disabled={pending}>
+            {pending ? "Creating account…" : "Create account"}
+          </Button>
+          <FieldDescription className="text-center">
+            Have one? <Link href="/signin">Sign in</Link>
+          </FieldDescription>
+        </Field>
+      </FieldGroup>
+    </form>
+  );
+}