🔐 Next.js App Router 기반 인증 흐름 정리

✅ 1. API Route (로그인 처리)

• 역할: 사용자의 이메일/비밀번호를 받아 JWT 토큰 발급

• 위치: pages/api/auth/login.ts

• 동작:

  1. 사용자가 로그인 폼 제출
  2. API Route가 로그인 정보를 검증
  3. Access Token & Refresh Token 발급
  4. Access Token → localStorage에 저장
  5. Refresh Token → HttpOnly Cookie로 저장

• 예시 코드:

  const res = await fetch("/api/auth/login", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ email, password }),
    credentials: "include",
  });
  

🔑 2. JWT 토큰 관리 (Access / Refresh)

• JWT 발급 유틸 (lib/auth.ts):

  export async function generateAccessToken(payload: JWTPayload) {
    return await new SignJWT(payload)
      .setProtectedHeader({ alg: "HS256" })
      .setExpirationTime("15m")
      .sign(secret);
  }
  

• JWT 검증:

  export async function verifyToken(token: string) {
    try {
      return await jwtVerify(token, secret);
    } catch (e) {
      return null;
    }
  }
  

🧩 3. Middleware (인증 보호)

• 역할: 페이지 접근 전 쿠키에 있는 refreshToken 검사

• 위치: middleware.ts (루트에 위치)

• matcher: 인증 보호 경로 설정 (/, /dashboard/:path* 등)

• 동작:

  1. 사용자가 / 또는 /dashboard 등 보호된 페이지 접근
  2. 미들웨어가 쿠키에서 refreshToken 확인
  3. 없으면 /login으로 리다이렉트
  4. 있으면 요청 통과

• 예시 코드:

  import { NextResponse } from "next/server";
  import type { NextRequest } from "next/server";
  
  export function middleware(req: NextRequest) {
    const token = req.cookies.get("refreshToken");
    const { pathname } = req.nextUrl;
  
    if (pathname.startsWith("/login")) return NextResponse.next();
    if (!token) {
      const loginUrl = req.nextUrl.clone();
      loginUrl.pathname = "/login";
      return NextResponse.redirect(loginUrl);
    }
  
    return NextResponse.next();
  }
  
  export const config = {
    matcher: ["/", "/dashboard/:path*"],
  };
  

📌 4. 인증 흐름 요약