Working with Authentication

Use Better Auth for client and server-side authentication. Covers session access, protected routes, sign in/out, and fetching user data.

Implement Working with Authentication

Use Better Auth for client and server-side authentication. Covers session access, protected routes, sign in/out, and fetching user data.

See:

Resource: using-authentication in Fullstack Recipes URL: https://fullstackrecipes.com/recipes/using-authentication Client-Side Authentication

Use the auth client hooks in React components:

"use client";

import { useSession, signOut } from "@/lib/auth/client";

export function UserMenu() { const { data: session, isPending } = useSession();

if (isPending) return

; if (!session) return Sign In;

return (

{session.user.name}

); }

Server-Side Session Access

Get the session in Server Components and API routes:

import { auth } from "@/lib/auth/server"; import { headers } from "next/headers";

// In a Server Component export default async function Page() { const session = await auth.api.getSession({ headers: await headers(), });

if (!session) { return

Not signed in

; }

return

Hello, {session.user.name}

; }

// In an API route export async function POST(request: Request) { const session = await auth.api.getSession({ headers: await headers(), });

if (!session) { return new Response("Unauthorized", { status: 401 }); }

// Use session.user.id for queries... }

Protected Pages Pattern

Redirect unauthenticated users:

import { redirect } from "next/navigation"; import { headers } from "next/headers"; import { auth } from "@/lib/auth/server";

export default async function ProtectedPage() { const session = await auth.api.getSession({ headers: await headers(), });

if (!session) { redirect("/sign-in"); }

return ; }

Auth Pages Pattern

Redirect authenticated users away from auth pages:

import { redirect } from "next/navigation"; import { headers } from "next/headers"; import { auth } from "@/lib/auth/server";

export default async function SignInPage() { const session = await auth.api.getSession({ headers: await headers(), });

if (session) { redirect("/chats"); // Already signed in }

return ; }

Signing In import { signIn } from "@/lib/auth/client";

// Email/password await signIn.email({ email: "user@example.com", password: "password", callbackURL: "/chats", });

// Social provider await signIn.social({ provider: "google", callbackURL: "/chats", });

Signing Up import { signUp } from "@/lib/auth/client";

await signUp.email({ email: "user@example.com", password: "password", name: "John Doe", callbackURL: "/verify-email", });

Signing Out import { signOut } from "@/lib/auth/client";

await signOut({ fetchOptions: { onSuccess: () => { router.push("/"); }, }, });

Fetching User Data After Auth

In protected pages, fetch user-specific data after validating the session:

export default async function DashboardPage() { const session = await auth.api.getSession({ headers: await headers(), });

if (!session) { redirect("/sign-in"); }

const [chats, profile] = await Promise.all([ getUserChats(session.user.id), getUserProfile(session.user.id), ]);

return ; }

References Better Auth React Better Auth Server

安装