Next.js App Routerアプリで認証をどのように処理しますか？

Question

Accepted Answer

App Routerの認証はセッション、ミドルウェア、サーバーサイドチェック、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. ミドルウェアでの粗粒度のゲーティング（高速ですが、それが全部ではありません） ```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(); } ``` ミドルウェアはマッチするすべてのリクエストの前のEdgeで実行されます — 低コストなリダイレクトに最適です。ただし、*軽量な*プレゼンスチェックのみを行うべきです。唯一の認可手段として依存しないでください（クッキーが無効な可能性があります）。 ## 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クッキー（XSS安全なセッション）、高速リダイレクト用のミドルウェア、そして — 極めて重要なこと — **機密データが読み取られたり変更されたりするサーバー上のすべてのポイントでのサーバーサイド検証**。一般的で危険な誤りは、ミドルウェアチェックまたは隠されたクライアントUIを十分なものとして扱うことです。真の保護は、機密データが読み取られたり変更されたりするサーバー上のどこかでセッションと認可を検証することから来ます。