Next.js App Router 앱에서 인증은 어떻게 처리하나요?

Question

Accepted Answer

App Router에서의 인증은 여러 계층 — 세션, middleware, 서버 측 검사, Server Action 보호 — 에 걸쳐 있습니다. 현대적인 접근은 클라이언트 전용 검사보다 **서버 측 세션 검증**을 선호합니다. ## 세션 전략 ```text 쿠키 기반 세션 (httpOnly 쿠키): ✓ 서명된 세션 id 또는 암호화된 JWT를 httpOnly, secure 쿠키에 저장 ✓ httpOnly = JavaScript로 읽을 수 없음 → XSS 토큰 탈취로부터 보호 ✓ 라이브러리 사용: Auth.js(NextAuth), Clerk, Lucia, 또는 커스텀 솔루션 ``` ## 1. middleware에서의 대략적인 게이팅 (빠르지만 전부는 아님) ```ts // middleware.ts — 빠른 검사: 세션 쿠키가 존재하는가? 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에서 실행됩니다. 저렴한 리다이렉트에 이상적이죠. 하지만 *가벼운* 존재 검사만 해야 하며, 유일한 권한 부여로 의존해서는 안 됩니다(쿠키가 유효하지 않을 수 있음). ## 2. 데이터를 사용하는 곳에서 세션 검증 (진짜 게이트) ```tsx // app/dashboard/page.tsx — 페이지 자체에서 서버 측 검증 import { redirect } from "next/navigation"; export default async function Dashboard() { const user = await getCurrentUser(); // 서버 측에서 세션 쿠키 검증 if (!user) redirect("/login"); // 권위 있는 검사 return

Welcome {user.name}

; } ``` 이 서버 측 검증(Server Component 내)이 **권위 있는** 검사입니다. 실제로 세션을 검증하고 사용자를 로드합니다. ## 3. Server Action과 Route Handler도 보호 ```tsx "use server"; export async function deletePost(id: string) { const user = await getCurrentUser(); if (!user) throw new Error("Unauthorized"); // 호출자를 절대 신뢰하지 마라 if (post.authorId !== user.id) throw new Error("Forbidden"); // 권한 부여 await db.post.delete({ where: { id } }); } ``` Server Action은 공개 엔드포인트입니다. UI 수준 게이팅과 무관하게 **항상 그 안에서 인증과 권한을 다시 확인**하세요. ## 계층화된 검사가 필요한 이유 ```text middleware → 일반적인 경우에 대한 빠른 리다이렉트 (UX 향상, 보안에 결정적이지 않음) Server Component/Action → 진짜 검증 (보안 경계) 클라이언트에서 UI를 숨기는 것을 보안 수단으로 절대 의존하지 마라 ``` ## 왜 중요한가 App Router의 인증은 심층 방어입니다: httpOnly 쿠키(XSS 안전 세션), 빠른 리다이렉트를 위한 middleware, 그리고 결정적으로 **모든 데이터 접근 및 변경 지점에서의 서버 측 검증**. 흔하고 위험한 실수는 middleware 검사나 숨겨진 클라이언트 UI를 충분하다고 여기는 것입니다. 진짜 보호는 민감한 데이터를 읽거나 변경하는 모든 곳에서 서버에서 세션과 권한을 검증하는 데서 나옵니다.