{"content":"# Better Auth Protected Routes\n\nAdd server-side route protection to enforce authentication on specific pages while keeping others public.\n\n### Core Pattern: Server-Side Session Check\n\nThe standard pattern for protecting pages uses server-side session validation with redirect:\n\n```tsx\nimport { redirect } from \"next/navigation\";\nimport { headers } from \"next/headers\";\nimport { auth } from \"@/lib/auth/server\";\n\nexport default async function ProtectedPage() {\n const session = await auth.api.getSession({\n headers: await headers(),\n });\n\n if (!session) {\n redirect(\"/sign-in\");\n }\n\n return
Welcome, {session.user.name}
;\n}\n```\n\nThis pattern:\n\n- Runs entirely on the server (no client-side flash)\n- Redirects unauthenticated users before rendering\n- Provides the session data for use in the page\n\n---\n\n## Example: Public Landing Page\n\nCreate a public landing page with sign-in/sign-up buttons:\n\n```tsx\n// src/app/page.tsx\nimport Link from \"next/link\";\nimport { Button } from \"@/components/ui/button\";\n\nexport default function HomePage() {\n return (\n
\n
\n

\n Welcome to Your App\n

\n

\n Sign in to access your dashboard and start using the app.\n

\n
\n
\n \n \n \n \n \n \n
\n
\n );\n}\n```\n\n---\n\n## Example: Protected Chat Page\n\nMove your main app functionality to a protected route:\n\n```tsx\n// src/app/chats/page.tsx\nimport type { Metadata } from \"next\";\nimport { redirect } from \"next/navigation\";\nimport { headers } from \"next/headers\";\nimport Link from \"next/link\";\nimport { ChefHat } from \"lucide-react\";\nimport { auth } from \"@/lib/auth/server\";\nimport { getUserChats } from \"@/lib/chat/queries\";\nimport { ChatList } from \"@/components/chats/chat-list\";\nimport { UserMenu } from \"@/components/auth/user-menu\";\nimport { ThemeSelector } from \"@/components/themes/selector\";\n\nexport const metadata: Metadata = {\n title: \"Your Chats\",\n description: \"View and manage your AI conversations.\",\n};\n\nexport default async function ChatsPage() {\n const session = await auth.api.getSession({\n headers: await headers(),\n });\n\n if (!session) {\n redirect(\"/sign-in\");\n }\n\n const chats = await getUserChats(session.user.id);\n\n return (\n
\n
\n
\n
\n \n
\n \n
\n \n Your App\n \n \n
\n
\n \n \n
\n
\n
\n\n
\n
\n

Your Chats

\n

\n View and manage your conversations\n

\n
\n\n \n
\n
\n );\n}\n```\n\n---\n\n## Auth Pages: Redirect Authenticated Users\n\nAuth pages should redirect already-authenticated users away:\n\n```tsx\n// src/app/sign-in/page.tsx\nimport { redirect } from \"next/navigation\";\nimport { headers } from \"next/headers\";\nimport { auth } from \"@/lib/auth/server\";\nimport { SignIn } from \"@/components/auth/sign-in\";\n\nexport default async function SignInPage() {\n const session = await auth.api.getSession({\n headers: await headers(),\n });\n\n if (session) {\n redirect(\"/chats\"); // Redirect to app when already signed in\n }\n\n return (\n
\n \n
\n );\n}\n```\n\n---\n\n## Route Structure\n\nA typical app has three types of routes:\n\n| Route Type | Example | Auth Behavior |\n| **Public** | `/`, `/pricing` | Anyone can access |\n| **Auth** | `/sign-in`, `/sign-up` | Redirect to app if signed in |\n| **Protected** | `/chats`, `/profile` | Redirect to sign-in if not signed in |\n\n### Example Directory Structure\n\n```\nsrc/app/\n page.tsx # Public landing page\n pricing/page.tsx # Public pricing page\n\n sign-in/page.tsx # Auth: redirects if signed in\n sign-up/page.tsx # Auth: redirects if signed in\n forgot-password/page.tsx\n reset-password/page.tsx\n verify-email/page.tsx\n\n chats/ # Protected: requires auth\n page.tsx # Chat list\n [chatId]/page.tsx # Individual chat\n\n profile/page.tsx # Protected: account settings\n```\n\n---\n\n## Loading User Data\n\nFor protected pages that need user-specific data, fetch it server-side after authentication:\n\n```tsx\nexport default async function DashboardPage() {\n const session = await auth.api.getSession({\n headers: await headers(),\n });\n\n if (!session) {\n redirect(\"/sign-in\");\n }\n\n // Fetch user-specific data using the session\n const [chats, subscription] = await Promise.all([\n getUserChats(session.user.id),\n getUserSubscription(session.user.id),\n ]);\n\n return (\n \n );\n}\n```\n\n---\n\n## Callback URLs\n\nWhen redirecting to sign-in, you may want to return users to their original destination. The auth components support callback URLs:\n\n```tsx\n// In your SignIn component\nawait signIn.email({\n email,\n password,\n callbackURL: \"/chats\", // Where to go after sign in\n});\n```\n\nFor dynamic redirect-back behavior, you can use search params:\n\n```tsx\n// Protected page: redirect with return URL\nif (!session) {\n redirect(`/sign-in?returnTo=${encodeURIComponent(\"/chats/123\")}`);\n}\n\n// Sign-in page: read the return URL\nconst searchParams = await props.searchParams;\nconst returnTo = searchParams.returnTo || \"/chats\";\n\n// After sign in success\nrouter.push(returnTo);\n```\n\n---\n\n## Summary\n\n1. **Public pages** - No session check needed\n2. **Auth pages** - Redirect away if already signed in\n3. **Protected pages** - Redirect to sign-in if not authenticated\n4. Use `auth.api.getSession()` server-side for immediate protection without flash\n5. Fetch user-specific data after validating the session"}