Bạn xử lý xác thực trong một app Next.js App Router như thế nào?

Question

Accepted Answer

Xác thực trong App Router trải qua nhiều lớp — session, middleware, kiểm tra phía server, và bảo vệ Server Actions. Cách tiếp cận hiện đại ưu tiên **xác minh session phía server** hơn là kiểm tra chỉ ở client. ## Chiến lược session ```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. Chặn thô trong middleware (nhanh, nhưng chưa phải tất cả) ```ts // middleware.ts — kiểm tra nhanh: cookie session có tồn tại không? 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 chạy trên Edge trước mỗi request được khớp — lý tưởng cho redirect rẻ. Nhưng nó chỉ nên làm một *kiểm tra sự hiện diện* nhẹ; đừng dựa vào nó như cơ chế phân quyền duy nhất (cookie có thể không hợp lệ). ## 2. Xác minh session ngay nơi bạn dùng dữ liệu (cổng thực sự) ```tsx // app/dashboard/page.tsx — xác minh trên server, ngay trong page import { redirect } from "next/navigation"; export default async function Dashboard() { const user = await getCurrentUser(); // xác thực cookie session phía server if (!user) redirect("/login"); // kiểm tra có thẩm quyền return

Welcome {user.name}

; } ``` Xác minh phía server này (trong Server Component) là kiểm tra **có thẩm quyền** — nó thực sự xác thực session và nạp user. ## 3. Bảo vệ cả Server Actions và Route Handlers ```tsx "use server"; export async function deletePost(id: string) { const user = await getCurrentUser(); if (!user) throw new Error("Unauthorized"); // không bao giờ tin caller if (post.authorId !== user.id) throw new Error("Forbidden"); // phân quyền await db.post.delete({ where: { id } }); } ``` Server Actions là các public endpoint — **luôn kiểm tra lại auth và phân quyền bên trong chúng**, bất kể có chặn ở cấp UI hay không. ## Vì sao kiểm tra theo lớp ```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 ``` ## Tại sao điều này quan trọng Auth trong App Router là phòng thủ theo chiều sâu: cookie httpOnly (session an toàn trước XSS), middleware cho redirect nhanh, và — quan trọng nhất — **xác minh phía server ở mọi điểm truy cập và mutation dữ liệu**. Lỗi phổ biến và nguy hiểm là coi một kiểm tra middleware hoặc UI client bị ẩn là đủ; bảo vệ thực sự đến từ việc xác thực session và phân quyền trên server ở bất cứ nơi nào dữ liệu nhạy cảm được đọc hoặc thay đổi.