Как вы обрабатываете аутентификацию в приложении Next.js App Router?

Question

Accepted Answer

Аутентификация в App Router охватывает несколько уровней — сессии, middleware, проверки на стороне сервера и защита Server Actions. Современный подход отдаёт предпочтение **проверке сессии на стороне сервера** перед проверками только на клиенте. ## Стратегия сессии ```text Cookie-based sessions (httpOnly cookie): ✓ Store a signed session id or encrypted JWT in an httpOnly, secure cookie ✓ httpOnly = not readable by JavaScript → protects against XSS token theft ✓ Use a library: Auth.js (NextAuth), Clerk, Lucia, or a custom solution ``` ## 1. Грубая блокировка в middleware (быстро, но это не всё) ```ts // middleware.ts — quick check: does a session cookie exist? export function middleware(req: NextRequest) { const session = req.cookies.get("session")?.value; if (req.nextUrl.pathname.startsWith("/dashboard") && !session) { return NextResponse.redirect(new URL("/login", req.url)); } return NextResponse.next(); } ``` Middleware выполняется на Edge перед каждым совпадающим запросом — идеально для дешёвых редирактов. Но он должен выполнять только *лёгкую* проверку присутствия; не полагайтесь на неё как на единственную авторизацию (cookie может быть невалидным). ## 2. Проверьте сессию там, где вы используете данные (настоящая блокировка) ```tsx // app/dashboard/page.tsx — verify on the server, in the page itself import { redirect } from "next/navigation"; export default async function Dashboard() { const user = await getCurrentUser(); // validates the session cookie server-side if (!user) redirect("/login"); // authoritative check return

Welcome {user.name}

; } ``` Эта проверка на стороне сервера (в Server Component) является **авторитетной** проверкой — она фактически валидирует сессию и загружает пользователя. ## 3. Также защитите Server Actions и Route Handlers ```tsx "use server"; export async function deletePost(id: string) { const user = await getCurrentUser(); if (!user) throw new Error("Unauthorized"); // never trust the caller if (post.authorId !== user.id) throw new Error("Forbidden"); // authorization await db.post.delete({ where: { id } }); } ``` Server Actions — это открытые конечные точки — **всегда повторно проверяйте аутентификацию и авторизацию внутри них**, независимо от блокировки на уровне UI. ## Почему многоуровневые проверки ```text Middleware → fast redirect for the common case (better UX, not security-critical) Server Component/Action → real verification (security boundary) Never rely on hiding UI in the client as a security measure ``` ## Почему это важно Аутентификация в App Router — это защита в глубину: httpOnly cookies (защищённые от XSS сессии), middleware для быстрых редиректов и — критично — **проверка на стороне сервера в каждой точке доступа и изменения данных**. Общая и опасная ошибка — рассматривать проверку middleware или скрытый клиентский UI как достаточное; реальная защита происходит из валидации сессии и авторизации на сервере везде, где конфиденциальные данные читаются или изменяются.