Phase 8

src/app/(auth)/layout.tsx

@@ -1,11 +1,36 @@
 import { Scissors } from "lucide-react";
+import { getBranding } from "@/lib/business/branding";
 
-export default function AuthLayout({ children }: { children: React.ReactNode }) {
+/**
+ * Every auth page (sign-in, register, forgot-password, verify) shares
+ * this shell, so the business logo is shown once here rather than on
+ * each page — see the brief's "Authentication Branding" requirement.
+ * Unreachable pre-install: src/proxy.ts redirects auth routes to
+ * /install until a business exists, so `getBranding()` never falls back
+ * to neutral wording here in practice.
+ *
+ * Forced dynamic: without this, a production build can statically
+ * prerender /sign-in and /register with whatever branding (or the
+ * neutral fallback) happened to be in the database at *build* time,
+ * baked into static HTML served forever after — a real business's name
+ * would never actually reach these pages in that deployment. See
+ * docs/phase-8-summary.md, "Known limitations" for how this was found
+ * (a Docker build with no live database at build time).
+ */
+export const dynamic = "force-dynamic";
+
+export default async function AuthLayout({ children }: { children: React.ReactNode }) {
+  const branding = await getBranding();
   return (
     <div className="flex min-h-screen flex-col bg-stone p-6">
       <div id="main-content" className="mx-auto flex w-full max-w-md flex-1 flex-col justify-center">
         <div className="mb-8 flex h-16 w-16 items-center justify-center rounded-[1.25rem] bg-ink text-3xl text-white shadow-xl shadow-ink/20">
-          <Scissors className="h-7 w-7" aria-hidden="true" />
+          {branding.logoUrl ? (
+            // eslint-disable-next-line @next/next/no-img-element -- external, business-supplied URL.
+            <img src={branding.logoUrl} alt="" className="h-full w-full rounded-[1.25rem] object-cover" />
+          ) : (
+            <Scissors className="h-7 w-7" aria-hidden="true" />
+          )}
         </div>
         {children}
       </div>

src/app/(auth)/register/page.tsx

@@ -1,16 +1,22 @@
 import type { Metadata } from "next";
+import { Suspense } from "react";
 import { RegisterForm } from "@/features/auth/components/register-form";
+import { getBranding } from "@/lib/business/branding";
 
 export const metadata: Metadata = {
   title: "Create Account",
 };
 
-export default function RegisterPage() {
+export default async function RegisterPage() {
+  const branding = await getBranding();
   return (
     <div>
-      <h1 className="mb-2 text-3xl font-bold tracking-tight">Create Account</h1>
-      <p className="mb-10 text-muted">Join to track your appointments and loyalty.</p>
-      <RegisterForm />
+      <h1 className="mb-2 text-3xl font-bold tracking-tight">Join {branding.name}</h1>
+      <p className="mb-10 text-muted">Create an account to track your appointments and loyalty.</p>
+      {/* useSearchParams in RegisterForm requires a Suspense boundary. */}
+      <Suspense>
+        <RegisterForm />
+      </Suspense>
     </div>
   );
 }

src/app/(auth)/sign-in/page.tsx

@@ -1,15 +1,17 @@
 import type { Metadata } from "next";
 import { Suspense } from "react";
 import { SignInForm } from "@/features/auth/components/sign-in-form";
+import { getBranding } from "@/lib/business/branding";
 
 export const metadata: Metadata = {
   title: "Sign In",
 };
 
-export default function SignInPage() {
+export default async function SignInPage() {
+  const branding = await getBranding();
   return (
     <div>
-      <h1 className="mb-2 text-4xl font-bold tracking-tight">Welcome back</h1>
+      <h1 className="mb-2 text-4xl font-bold tracking-tight">Welcome back to {branding.name}</h1>
       <p className="mb-12 leading-relaxed text-muted">
         Please enter your credentials to access your appointments.
       </p>