Improve fresh install flow and auth page routing

- Move /setup out of protected (pages) route group so it's accessible
  without auth (fixes fresh install redirect loop)
- Redirect /login → /register when zero users exist
- Add "Get Started" button on landing page for fresh installs
- Hide register button/link when registration is closed
- Add auth redirects: logged-in users on /login or /register → /dashboard
- Convert register page to server component with server-side checks
- Fix animation snap on auth form buttons (transition-all → scoped)
- Update proxy middleware with /login and /register routes

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/(auth)/login/page.tsx

@@ -1,11 +1,22 @@
+import { headers } from "next/headers";
+import { redirect } from "next/navigation";
 import { AuthForm } from "@/components/auth-form";
+import { auth } from "@/lib/auth/server";
 import {
   getOidcProviderName,
   isOidcConfigured,
   isPasswordLoginDisabled,
 } from "@/lib/config";
+import { getUserCount, isRegistrationOpen } from "@/lib/services/settings";
+
+export default async function LoginPage() {
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (session) redirect("/dashboard");
+
+  if (getUserCount() === 0) {
+    redirect("/register");
+  }
 
-export default function LoginPage() {
   const oidcEnabled = isOidcConfigured();
 
   return (
@@ -16,6 +27,7 @@ export default function LoginPage() {
           oidcEnabled,
           oidcProviderName: oidcEnabled ? getOidcProviderName() : null,
           passwordLoginDisabled: isPasswordLoginDisabled(),
+          registrationOpen: isRegistrationOpen(),
         }}
       />
     </div>

app/(auth)/register/page.tsx

@@ -1,55 +1,26 @@
-"use client";
-
 import { IconLock } from "@tabler/icons-react";
-import { motion } from "motion/react";
+import { headers } from "next/headers";
 import Link from "next/link";
-import { useEffect, useState } from "react";
-import type { AuthConfig } from "@/components/auth-form";
+import { redirect } from "next/navigation";
 import { AuthForm } from "@/components/auth-form";
+import { auth } from "@/lib/auth/server";
+import {
+  getOidcProviderName,
+  isOidcConfigured,
+  isPasswordLoginDisabled,
+} from "@/lib/config";
+import { isRegistrationOpen } from "@/lib/services/settings";
 
-export default function RegisterPage() {
-  const [registrationOpen, setRegistrationOpen] = useState<boolean | null>(
-    null,
-  );
-  const [authConfig, setAuthConfig] = useState<AuthConfig>({
-    oidcEnabled: false,
-    oidcProviderName: null,
-    passwordLoginDisabled: false,
-  });
+export default async function RegisterPage() {
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (session) redirect("/dashboard");
 
-  useEffect(() => {
-    fetch("/api/registration/status")
-      .then((res) => res.json())
-      .then((data) => {
-        setRegistrationOpen(data.registrationOpen);
-        setAuthConfig({
-          oidcEnabled: data.oidcEnabled ?? false,
-          oidcProviderName: data.oidcProviderName ?? null,
-          passwordLoginDisabled: data.passwordLoginDisabled ?? false,
-        });
-      })
-      .catch(() => setRegistrationOpen(false));
-  }, []);
-
-  if (registrationOpen === null) {
-    return <div className="flex min-h-[80vh] items-center justify-center" />;
-  }
-
-  if (!registrationOpen) {
+  if (!isRegistrationOpen()) {
     return (
       <div className="flex min-h-[80vh] items-center justify-center px-4">
         <div className="relative mx-auto w-full max-w-sm">
           <div className="absolute -inset-4 rounded-2xl bg-primary/3 blur-2xl" />
-          <motion.div
-            className="relative space-y-6 rounded-xl border border-border/50 bg-card/80 p-8 text-center backdrop-blur-sm"
-            initial={{ opacity: 0, y: 20, scale: 0.98 }}
-            animate={{ opacity: 1, y: 0, scale: 1 }}
-            transition={{
-              type: "spring" as const,
-              stiffness: 200,
-              damping: 20,
-            }}
-          >
+          <div className="relative space-y-6 rounded-xl border border-border/50 bg-card/80 p-8 text-center backdrop-blur-sm">
             <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
               <IconLock className="size-6 text-primary" />
             </div>
@@ -68,15 +39,24 @@ export default function RegisterPage() {
             >
               Sign in instead
             </Link>
-          </motion.div>
+          </div>
         </div>
       </div>
     );
   }
 
+  const oidcEnabled = isOidcConfigured();
+
   return (
     <div className="flex min-h-[80vh] items-center justify-center px-4">
-      <AuthForm mode="register" authConfig={authConfig} />
+      <AuthForm
+        mode="register"
+        authConfig={{
+          oidcEnabled,
+          oidcProviderName: oidcEnabled ? getOidcProviderName() : null,
+          passwordLoginDisabled: isPasswordLoginDisabled(),
+        }}
+      />
     </div>
   );
 }

app/page.tsx

@@ -1,4 +1,6 @@
+import { connection } from "next/server";
 import { LandingPage } from "@/components/landing-page";
+import { getUserCount, isRegistrationOpen } from "@/lib/services/settings";
 import { tmdbImageUrl } from "@/lib/tmdb/image";
 
 // Well-known TMDB poster paths for the background collage
@@ -21,6 +23,14 @@ const posterUrls = posterPaths
   .map((p) => tmdbImageUrl(p, "w300"))
   .filter(Boolean) as string[];
 
-export default function Home() {
-  return <LandingPage posterUrls={posterUrls} />;
+export default async function Home() {
+  await connection();
+  const userCount = getUserCount();
+  return (
+    <LandingPage
+      posterUrls={posterUrls}
+      freshInstall={userCount === 0}
+      registrationOpen={isRegistrationOpen()}
+    />
+  );
 }

components/auth-form.tsx

@@ -12,6 +12,7 @@ export interface AuthConfig {
   oidcEnabled: boolean;
   oidcProviderName: string | null;
   passwordLoginDisabled: boolean;
+  registrationOpen?: boolean;
 }
 
 const fieldVariants = {
@@ -122,7 +123,7 @@ export function AuthForm({
               disabled={oidcLoading}
               variants={fieldVariants}
               whileTap={{ scale: 0.98 }}
-              className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg border border-border/50 bg-background/50 text-sm font-medium transition-all hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
+              className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg border border-border/50 bg-background/50 text-sm font-medium transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
             >
               <IconKey className="size-4" />
               {oidcLoading
@@ -213,7 +214,7 @@ export function AuthForm({
               disabled={loading}
               variants={fieldVariants}
               whileTap={{ scale: 0.98 }}
-              className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-primary font-medium text-primary-foreground transition-all hover:shadow-lg hover:shadow-primary/20 disabled:pointer-events-none disabled:opacity-50"
+              className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-primary font-medium text-primary-foreground transition-shadow hover:shadow-lg hover:shadow-primary/20 disabled:pointer-events-none disabled:opacity-50"
             >
               {loading
                 ? "Loading..."
@@ -237,31 +238,32 @@ export function AuthForm({
           )}
         </AnimatePresence>
 
-        {showPasswordForm && (
-          <p className="text-center text-sm text-muted-foreground">
-            {isRegister ? (
-              <>
-                Already have an account?{" "}
-                <Link
-                  href="/login"
-                  className="font-medium text-primary transition-colors hover:text-primary/80"
-                >
-                  Sign in
-                </Link>
-              </>
-            ) : (
-              <>
-                Don&apos;t have an account?{" "}
-                <Link
-                  href="/register"
-                  className="font-medium text-primary transition-colors hover:text-primary/80"
-                >
-                  Register
-                </Link>
-              </>
-            )}
-          </p>
-        )}
+        {showPasswordForm &&
+          (isRegister || authConfig?.registrationOpen !== false) && (
+            <p className="text-center text-sm text-muted-foreground">
+              {isRegister ? (
+                <>
+                  Already have an account?{" "}
+                  <Link
+                    href="/login"
+                    className="font-medium text-primary transition-colors hover:text-primary/80"
+                  >
+                    Sign in
+                  </Link>
+                </>
+              ) : (
+                <>
+                  Don&apos;t have an account?{" "}
+                  <Link
+                    href="/register"
+                    className="font-medium text-primary transition-colors hover:text-primary/80"
+                  >
+                    Register
+                  </Link>
+                </>
+              )}
+            </p>
+          )}
       </motion.div>
     </div>
   );

components/landing-page.tsx

@@ -40,7 +40,15 @@ const posterLayout = [
   { x: "78%", y: "66%", rotate: 5, delay: 0.23 },
 ];
 
-export function LandingPage({ posterUrls }: { posterUrls: string[] }) {
+export function LandingPage({
+  posterUrls,
+  freshInstall,
+  registrationOpen,
+}: {
+  posterUrls: string[];
+  freshInstall: boolean;
+  registrationOpen: boolean;
+}) {
   const { data: session, isPending } = useSession();
   const router = useRouter();
 
@@ -169,19 +177,33 @@ export function LandingPage({ posterUrls }: { posterUrls: string[] }) {
             delay: 0.35,
           }}
         >
-          <Link
-            href="/login"
-            className="group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-lg bg-primary px-8 font-medium text-primary-foreground transition-all hover:shadow-lg hover:shadow-primary/20"
-          >
-            <span className="relative z-10">Sign In</span>
-            <div className="absolute inset-0 bg-gradient-to-t from-black/10 to-transparent opacity-0 transition-opacity group-hover:opacity-100" />
-          </Link>
-          <Link
-            href="/register"
-            className="inline-flex h-12 items-center justify-center rounded-lg border border-border px-8 font-medium transition-all hover:border-primary/40 hover:bg-primary/5"
-          >
-            Register
-          </Link>
+          {freshInstall ? (
+            <Link
+              href="/register"
+              className="group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-lg bg-primary px-8 font-medium text-primary-foreground transition-all hover:shadow-lg hover:shadow-primary/20"
+            >
+              <span className="relative z-10">Get Started</span>
+              <div className="absolute inset-0 bg-gradient-to-t from-black/10 to-transparent opacity-0 transition-opacity group-hover:opacity-100" />
+            </Link>
+          ) : (
+            <>
+              <Link
+                href="/login"
+                className="group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-lg bg-primary px-8 font-medium text-primary-foreground transition-all hover:shadow-lg hover:shadow-primary/20"
+              >
+                <span className="relative z-10">Sign In</span>
+                <div className="absolute inset-0 bg-gradient-to-t from-black/10 to-transparent opacity-0 transition-opacity group-hover:opacity-100" />
+              </Link>
+              {registrationOpen && (
+                <Link
+                  href="/register"
+                  className="inline-flex h-12 items-center justify-center rounded-lg border border-border px-8 font-medium transition-all hover:border-primary/40 hover:bg-primary/5"
+                >
+                  Register
+                </Link>
+              )}
+            </>
+          )}
         </motion.div>
       </main>
 

proxy.ts

@@ -1,6 +1,8 @@
 import { getSessionCookie } from "better-auth/cookies";
 import { type NextRequest, NextResponse } from "next/server";
 
+const authRoutes = new Set(["/login", "/register"]);
+
 export function proxy(request: NextRequest) {
   const sessionCookie = getSessionCookie(request);
   const { pathname } = request.nextUrl;
@@ -12,7 +14,13 @@ export function proxy(request: NextRequest) {
     return NextResponse.next();
   }
 
-  if (!sessionCookie) {
+  // Logged-in users on auth pages → dashboard
+  if (authRoutes.has(pathname) && sessionCookie) {
+    return NextResponse.redirect(new URL("/dashboard", request.url));
+  }
+
+  // Unauthenticated users on protected pages → login
+  if (!authRoutes.has(pathname) && !sessionCookie) {
     return NextResponse.redirect(new URL("/login", request.url));
   }
 
@@ -22,6 +30,8 @@ export function proxy(request: NextRequest) {
 export const config = {
   matcher: [
     "/",
+    "/login",
+    "/register",
     "/dashboard",
     "/explore",
     "/settings",