Next.js App Router 인증 실전 가이드 — 미들웨어, Server Action, HttpOnly 쿠키, SSR 인증 완전 정복

// Server Component — cookies() API로 직접 접근 가능
import { cookies } from 'next/headers'

export default async function DashboardPage() {
  const cookieStore = await cookies()
  const token = cookieStore.get('access_token')?.value

  if (!token) {
    redirect('/login')
  }

  const user = await verifyAndDecodeToken(token)
  return <Dashboard user={user} />
}

// Client Component — API 호출 필요
'use client'

import { useEffect, useState } from 'react'

export function UserProfile() {
  const [user, setUser] = useState(null)

  useEffect(() => {
    fetch('/api/auth/me', { credentials: 'include' })
      .then((res) => res.json())
      .then(setUser)
  }, [])

  if (!user) return <LoginButton />
  return <Profile user={user} />
}

┌─────────────────────────────────────────────────────────────────┐
│                        Browser                                   │
│  ┌──────────────┐    ┌──────────────┐    ┌──────────────────┐   │
│  │ Client Comp  │    │ Form Submit  │    │ fetch(/api/...)  │   │
│  │ (useAuth)    │    │ (Server Act) │    │ credentials:     │   │
│  │              │    │              │    │  'include'       │   │
│  └──────┬───────┘    └──────┬───────┘    └────────┬─────────┘   │
│         │                   │                      │             │
└─────────┼───────────────────┼──────────────────────┼─────────────┘
          │                   │                      │
          ▼                   ▼                      ▼
┌─────────────────────────────────────────────────────────────────┐
│                    middleware.ts (Edge Runtime)                   │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │  1. NextRequest에서 쿠키 읽기                              │   │
│  │  2. jose로 JWT 검증 (Edge 호환)                            │   │
│  │  3. 미인증 → /login 리다이렉트                              │   │
│  │  4. 인증 → 요청 헤더에 사용자 정보 주입 (선택)                │   │
│  └──────────────────────────────────────────────────────────┘   │
│                             │                                    │
└─────────────────────────────┼────────────────────────────────────┘
                              ▼
┌──────────────────┐  ┌──────────────────┐  ┌──────────────────┐
│ Server Component │  │  Server Action   │  │  Route Handler   │
│ cookies() 읽기    │  │ cookies() 읽기   │  │ cookies() 설정   │
│ JWT 파싱          │  │ 쿠키 설정/삭제    │  │ 로그인/로그아웃   │
│ 조건부 렌더링     │  │ revalidate       │  │ 토큰 리프레시     │
└──────────────────┘  └──────────────────┘  └──────────────────┘
                              │
                              ▼
                   ┌──────────────────┐
                   │  Backend API      │
                   │  (인증 서버)       │
                   │  JWT 발급/검증     │
                   └──────────────────┘

// middleware.ts (프로젝트 루트)
import { NextRequest, NextResponse } from 'next/server'
import { jwtVerify, type JWTPayload } from 'jose'

interface AuthPayload extends JWTPayload {
  sub: string
  roles: string[]
  email: string
}

const JWT_SECRET = new TextEncoder().encode(process.env.JWT_SECRET!)

// 인증이 필요한 경로 패턴
const protectedPaths = ['/dashboard', '/settings', '/api/protected']

// 인증 없이 접근 가능한 경로
const publicPaths = ['/login', '/register', '/api/auth']

function isProtectedPath(pathname: string): boolean {
  return protectedPaths.some((path) => pathname.startsWith(path))
}

function isPublicPath(pathname: string): boolean {
  return publicPaths.some((path) => pathname.startsWith(path))
}

async function verifyToken(token: string): Promise<AuthPayload | null> {
  try {
    const { payload } = await jwtVerify(token, JWT_SECRET, {
      algorithms: ['HS256'],
      clockTolerance: 15, // 15초 시계 허용 오차
    })
    return payload as AuthPayload
  } catch (error) {
    return null
  }
}

export async function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl

  // 공개 경로는 통과
  if (isPublicPath(pathname)) {
    return NextResponse.next()
  }

  // 보호된 경로가 아니면 통과
  if (!isProtectedPath(pathname)) {
    return NextResponse.next()
  }

  const token = request.cookies.get('access_token')?.value

  if (!token) {
    const loginUrl = new URL('/login', request.url)
    loginUrl.searchParams.set('callbackUrl', pathname)
    return NextResponse.redirect(loginUrl)
  }

  const payload = await verifyToken(token)

  if (!payload) {
    // 토큰이 유효하지 않으면 리프레시 시도
    const refreshToken = request.cookies.get('refresh_token')?.value
    if (refreshToken) {
      // 리프레시는 Route Handler에서 처리하도록 리다이렉트
      const refreshUrl = new URL('/api/auth/refresh', request.url)
      refreshUrl.searchParams.set('callbackUrl', pathname)
      return NextResponse.redirect(refreshUrl)
    }

    const loginUrl = new URL('/login', request.url)
    loginUrl.searchParams.set('callbackUrl', pathname)
    return NextResponse.redirect(loginUrl)
  }

  // 인증된 요청: 사용자 정보를 요청 헤더에 주입 (선택적)
  const requestHeaders = new Headers(request.headers)
  requestHeaders.set('x-user-id', payload.sub)
  requestHeaders.set('x-user-roles', JSON.stringify(payload.roles))

  return NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  })
}

export const config = {
  matcher: [
    /*
     * 정적 파일과 이미지를 제외한 모든 요청 경로에 매칭
     * _next/static, _next/image, favicon.ico 제외
     */
    '/((?!_next/static|_next/image|favicon.ico|public).*)',
  ],
}

// app/api/auth/login/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { SignJWT } from 'jose'

const JWT_SECRET = new TextEncoder().encode(process.env.JWT_SECRET!)
const IS_PRODUCTION = process.env.NODE_ENV === 'production'

interface LoginRequest {
  email: string
  password: string
}

interface BackendAuthResponse {
  user: {
    id: string
    email: string
    name: string
    roles: string[]
  }
  accessToken: string
  refreshToken: string
}

export async function POST(request: NextRequest) {
  try {
    const body: LoginRequest = await request.json()

    // 백엔드 인증 서버에 로그인 요청
    const backendResponse = await fetch(`${process.env.BACKEND_URL}/auth/login`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body),
    })

    if (!backendResponse.ok) {
      const error = await backendResponse.json()
      return NextResponse.json(
        { error: error.message || '로그인에 실패했습니다.' },
        { status: 401 }
      )
    }

    const data: BackendAuthResponse = await backendResponse.json()

    // Next.js에서 자체 JWT를 발급하거나, 백엔드 토큰을 그대로 사용
    const response = NextResponse.json({
      user: {
        id: data.user.id,
        email: data.user.email,
        name: data.user.name,
        roles: data.user.roles,
      },
    })

    // Access Token 쿠키 설정
    response.cookies.set('access_token', data.accessToken, {
      httpOnly: true,
      secure: IS_PRODUCTION,
      sameSite: 'lax',
      path: '/',
      maxAge: 60 * 15, // 15분
      ...(IS_PRODUCTION && { domain: '.example.com' }),
    })

    // Refresh Token 쿠키 설정
    response.cookies.set('refresh_token', data.refreshToken, {
      httpOnly: true,
      secure: IS_PRODUCTION,
      sameSite: 'lax',
      path: '/api/auth/refresh', // 리프레시 경로에서만 전송
      maxAge: 60 * 60 * 24 * 7, // 7일
      ...(IS_PRODUCTION && { domain: '.example.com' }),
    })

    return response
  } catch (error) {
    console.error('Login error:', error)
    return NextResponse.json({ error: '서버 내부 오류가 발생했습니다.' }, { status: 500 })
  }
}

// app/api/auth/logout/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { cookies } from 'next/headers'

export async function POST(request: NextRequest) {
  try {
    const cookieStore = await cookies()
    const accessToken = cookieStore.get('access_token')?.value

    // 백엔드에 토큰 무효화 요청 (선택적: 서버 사이드 블랙리스트)
    if (accessToken) {
      await fetch(`${process.env.BACKEND_URL}/auth/logout`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${accessToken}`,
        },
      }).catch(() => {
        // 백엔드 호출 실패해도 쿠키는 삭제
      })
    }

    const response = NextResponse.json({ success: true })

    // 쿠키 삭제 — maxAge: 0 으로 즉시 만료
    response.cookies.set('access_token', '', {
      httpOnly: true,
      secure: process.env.NODE_ENV === 'production',
      sameSite: 'lax',
      path: '/',
      maxAge: 0,
    })

    response.cookies.set('refresh_token', '', {
      httpOnly: true,
      secure: process.env.NODE_ENV === 'production',
      sameSite: 'lax',
      path: '/api/auth/refresh',
      maxAge: 0,
    })

    return response
  } catch (error) {
    return NextResponse.json({ error: '로그아웃 처리 중 오류가 발생했습니다.' }, { status: 500 })
  }
}

// app/api/auth/refresh/route.ts
import { NextRequest, NextResponse } from 'next/server'

export async function POST(request: NextRequest) {
  const refreshToken = request.cookies.get('refresh_token')?.value

  if (!refreshToken) {
    return NextResponse.json({ error: 'Refresh token이 없습니다.' }, { status: 401 })
  }

  try {
    const backendResponse = await fetch(`${process.env.BACKEND_URL}/auth/refresh`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ refreshToken }),
    })

    if (!backendResponse.ok) {
      // 리프레시 실패 → 모든 토큰 쿠키 삭제
      const response = NextResponse.json(
        { error: '세션이 만료되었습니다. 다시 로그인해주세요.' },
        { status: 401 }
      )
      response.cookies.set('access_token', '', { path: '/', maxAge: 0 })
      response.cookies.set('refresh_token', '', { path: '/api/auth/refresh', maxAge: 0 })
      return response
    }

    const data = await backendResponse.json()
    const IS_PRODUCTION = process.env.NODE_ENV === 'production'

    const response = NextResponse.json({ success: true })

    response.cookies.set('access_token', data.accessToken, {
      httpOnly: true,
      secure: IS_PRODUCTION,
      sameSite: 'lax',
      path: '/',
      maxAge: 60 * 15,
      ...(IS_PRODUCTION && { domain: '.example.com' }),
    })

    // Refresh Token Rotation 적용 시
    if (data.refreshToken) {
      response.cookies.set('refresh_token', data.refreshToken, {
        httpOnly: true,
        secure: IS_PRODUCTION,
        sameSite: 'lax',
        path: '/api/auth/refresh',
        maxAge: 60 * 60 * 24 * 7,
        ...(IS_PRODUCTION && { domain: '.example.com' }),
      })
    }

    return response
  } catch (error) {
    return NextResponse.json({ error: '토큰 갱신 중 오류가 발생했습니다.' }, { status: 500 })
  }
}

// app/api/auth/me/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { jwtVerify } from 'jose'

const JWT_SECRET = new TextEncoder().encode(process.env.JWT_SECRET!)

export async function GET(request: NextRequest) {
  const token = request.cookies.get('access_token')?.value

  if (!token) {
    return NextResponse.json({ user: null }, { status: 401 })
  }

  try {
    const { payload } = await jwtVerify(token, JWT_SECRET)

    return NextResponse.json({
      user: {
        id: payload.sub,
        email: payload.email,
        name: payload.name,
        roles: payload.roles,
      },
    })
  } catch (error) {
    return NextResponse.json({ user: null }, { status: 401 })
  }
}

// app/actions/auth.ts
'use server'

import { cookies } from 'next/headers'
import { redirect } from 'next/navigation'
import { revalidatePath } from 'next/cache'

interface LoginFormState {
  error?: string
  success?: boolean
}

export async function loginAction(
  prevState: LoginFormState,
  formData: FormData
): Promise<LoginFormState> {
  const email = formData.get('email') as string
  const password = formData.get('password') as string

  if (!email || !password) {
    return { error: '이메일과 비밀번호를 입력해주세요.' }
  }

  try {
    const response = await fetch(`${process.env.BACKEND_URL}/auth/login`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password }),
    })

    if (!response.ok) {
      const data = await response.json()
      return { error: data.message || '이메일 또는 비밀번호가 올바르지 않습니다.' }
    }

    const data = await response.json()
    const cookieStore = await cookies()
    const IS_PRODUCTION = process.env.NODE_ENV === 'production'

    cookieStore.set('access_token', data.accessToken, {
      httpOnly: true,
      secure: IS_PRODUCTION,
      sameSite: 'lax',
      path: '/',
      maxAge: 60 * 15,
    })

    cookieStore.set('refresh_token', data.refreshToken, {
      httpOnly: true,
      secure: IS_PRODUCTION,
      sameSite: 'lax',
      path: '/api/auth/refresh',
      maxAge: 60 * 60 * 24 * 7,
    })
  } catch (error) {
    return { error: '서버에 연결할 수 없습니다.' }
  }

  revalidatePath('/')
  redirect('/dashboard')
}

export async function logoutAction(): Promise<void> {
  const cookieStore = await cookies()
  const accessToken = cookieStore.get('access_token')?.value

  // 백엔드에 토큰 무효화 요청
  if (accessToken) {
    await fetch(`${process.env.BACKEND_URL}/auth/logout`, {
      method: 'POST',
      headers: { Authorization: `Bearer ${accessToken}` },
    }).catch(() => {})
  }

  cookieStore.delete('access_token')
  cookieStore.delete('refresh_token')

  revalidatePath('/')
  redirect('/login')
}

// app/login/page.tsx — Server Action을 사용하는 로그인 폼
'use client'

import { useActionState } from 'react'
import { loginAction } from '@/app/actions/auth'

export default function LoginPage() {
  const [state, formAction, isPending] = useActionState(loginAction, {})

  return (
    <form action={formAction}>
      {state.error && <div className="rounded-md bg-red-50 p-3 text-red-600">{state.error}</div>}
      <div>
        <label htmlFor="email">이메일</label>
        <input id="email" name="email" type="email" required autoComplete="email" />
      </div>
      <div>
        <label htmlFor="password">비밀번호</label>
        <input
          id="password"
          name="password"
          type="password"
          required
          autoComplete="current-password"
        />
      </div>
      <button type="submit" disabled={isPending}>
        {isPending ? '로그인 중...' : '로그인'}
      </button>
    </form>
  )
}

// lib/auth.ts — 서버 사이드 인증 유틸리티
import { cookies } from 'next/headers'
import { jwtVerify, type JWTPayload } from 'jose'
import { cache } from 'react'

interface User {
  id: string
  email: string
  name: string
  roles: string[]
}

interface AuthPayload extends JWTPayload {
  sub: string
  email: string
  name: string
  roles: string[]
}

const JWT_SECRET = new TextEncoder().encode(process.env.JWT_SECRET!)

// React cache로 같은 요청 내 중복 검증 방지
export const getAuthUser = cache(async (): Promise<User | null> => {
  const cookieStore = await cookies()
  const token = cookieStore.get('access_token')?.value

  if (!token) return null

  try {
    const { payload } = (await jwtVerify(token, JWT_SECRET)) as { payload: AuthPayload }

    return {
      id: payload.sub,
      email: payload.email,
      name: payload.name,
      roles: payload.roles,
    }
  } catch (error) {
    return null
  }
})

export async function requireAuth(): Promise<User> {
  const user = await getAuthUser()
  if (!user) {
    const { redirect } = await import('next/navigation')
    redirect('/login')
  }
  return user
}

// app/dashboard/page.tsx — 인증된 Server Component
import { requireAuth } from '@/lib/auth'
import { LogoutButton } from '@/components/LogoutButton'

export default async function DashboardPage() {
  const user = await requireAuth()

  return (
    <div>
      <header>
        <h1>대시보드</h1>
        <p>{user.name}님, 환영합니다.</p>
        <span className="text-sm text-gray-500">{user.email}</span>
        <LogoutButton />
      </header>

      {user.roles.includes('admin') && (
        <section>
          <h2>관리자 메뉴</h2>
          {/* 관리자 전용 콘텐츠 */}
        </section>
      )}

      <section>
        <h2>내 정보</h2>
        <p>역할: {user.roles.join(', ')}</p>
      </section>
    </div>
  )
}

// contexts/AuthContext.tsx
'use client'

import { createContext, useContext, useCallback, useMemo, type ReactNode } from 'react'
import useSWR from 'swr'

interface User {
  id: string
  email: string
  name: string
  roles: string[]
}

interface AuthContextType {
  user: User | null
  isLoading: boolean
  isAuthenticated: boolean
  login: (email: string, password: string) => Promise<void>
  logout: () => Promise<void>
  refresh: () => Promise<void>
}

const AuthContext = createContext<AuthContextType | undefined>(undefined)

const fetcher = (url: string) =>
  fetch(url, { credentials: 'include' }).then((res) => {
    if (!res.ok) return { user: null }
    return res.json()
  })

export function AuthProvider({
  children,
  initialUser,
}: {
  children: ReactNode
  initialUser: User | null
}) {
  const { data, mutate, isLoading } = useSWR('/api/auth/me', fetcher, {
    fallbackData: { user: initialUser },
    revalidateOnFocus: true,
    revalidateInterval: 5 * 60 * 1000, // 5분마다 갱신
    dedupingInterval: 60 * 1000,
  })

  const user = data?.user ?? null

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

      if (!res.ok) {
        const error = await res.json()
        throw new Error(error.error || '로그인에 실패했습니다.')
      }

      await mutate()
    },
    [mutate]
  )

  const logout = useCallback(async () => {
    await fetch('/api/auth/logout', {
      method: 'POST',
      credentials: 'include',
    })
    await mutate({ user: null }, { revalidate: false })
  }, [mutate])

  const refresh = useCallback(async () => {
    await mutate()
  }, [mutate])

  const value = useMemo(
    () => ({
      user,
      isLoading,
      isAuthenticated: !!user,
      login,
      logout,
      refresh,
    }),
    [user, isLoading, login, logout, refresh]
  )

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
}

export function useAuth(): AuthContextType {
  const context = useContext(AuthContext)
  if (context === undefined) {
    throw new Error('useAuth는 AuthProvider 내부에서만 사용할 수 있습니다.')
  }
  return context
}

// app/layout.tsx — Server Component에서 Client Context로 초기값 전달
import { getAuthUser } from '@/lib/auth'
import { AuthProvider } from '@/contexts/AuthContext'

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const user = await getAuthUser()

  return (
    <html lang="ko">
      <body>
        <AuthProvider initialUser={user}>{children}</AuthProvider>
      </body>
    </html>
  )
}

// lib/cookie-config.ts
export interface CookieConfig {
  httpOnly: boolean
  secure: boolean
  sameSite: 'strict' | 'lax' | 'none'
  path: string
  maxAge: number
  domain?: string
}

const IS_PRODUCTION = process.env.NODE_ENV === 'production'
const COOKIE_DOMAIN = process.env.COOKIE_DOMAIN // .example.com

export const ACCESS_TOKEN_COOKIE: CookieConfig = {
  httpOnly: true,
  secure: IS_PRODUCTION, // 개발: false (HTTP), 프로덕션: true (HTTPS)
  sameSite: IS_PRODUCTION ? 'lax' : 'lax',
  path: '/', // 모든 경로에서 전송
  maxAge: 60 * 15, // 15분
  ...(IS_PRODUCTION && COOKIE_DOMAIN && { domain: COOKIE_DOMAIN }),
}

export const REFRESH_TOKEN_COOKIE: CookieConfig = {
  httpOnly: true,
  secure: IS_PRODUCTION,
  sameSite: IS_PRODUCTION ? 'strict' : 'lax',
  path: '/api/auth/refresh', // 리프레시 엔드포인트에서만 전송
  maxAge: 60 * 60 * 24 * 7, // 7일
  ...(IS_PRODUCTION && COOKIE_DOMAIN && { domain: COOKIE_DOMAIN }),
}

// 사용 예시
// response.cookies.set('access_token', token, ACCESS_TOKEN_COOKIE)

// lib/jwt.ts
import { jwtVerify, SignJWT, type JWTPayload } from 'jose'

const JWT_SECRET = new TextEncoder().encode(process.env.JWT_SECRET!)

export interface TokenClaims extends JWTPayload {
  sub: string // 사용자 ID
  email: string // 이메일
  name: string // 이름
  roles: string[] // 역할 목록
  iat: number // 발급 시각
  exp: number // 만료 시각
  iss: string // 발급자
  jti: string // 토큰 고유 ID (블랙리스트용)
}

export async function verifyAccessToken(token: string): Promise<TokenClaims> {
  const { payload } = await jwtVerify(token, JWT_SECRET, {
    algorithms: ['HS256'],
    issuer: 'https://auth.example.com',
    clockTolerance: 15,
  })

  // 필수 클레임 존재 확인
  if (!payload.sub || !payload.email) {
    throw new Error('필수 클레임이 누락되었습니다.')
  }

  return payload as TokenClaims
}

export async function createAccessToken(user: {
  id: string
  email: string
  name: string
  roles: string[]
}): Promise<string> {
  return new SignJWT({
    email: user.email,
    name: user.name,
    roles: user.roles,
  })
    .setProtectedHeader({ alg: 'HS256' })
    .setSubject(user.id)
    .setIssuedAt()
    .setExpirationTime('15m')
    .setIssuer('https://auth.example.com')
    .setJti(crypto.randomUUID())
    .sign(JWT_SECRET)
}

// 프론트엔드에 전달할 필드만 선별
export function sanitizeUserForClient(claims: TokenClaims) {
  // 민감 정보(jti, iat, exp, iss)는 제외
  return {
    id: claims.sub,
    email: claims.email,
    name: claims.name,
    roles: claims.roles,
  }
}

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        // API 경로에 대한 CORS 설정
        source: '/api/:path*',
        headers: [
          {
            key: 'Access-Control-Allow-Origin',
            value: process.env.ALLOWED_ORIGIN || 'https://app.example.com',
          },
          {
            key: 'Access-Control-Allow-Methods',
            value: 'GET, POST, PUT, DELETE, OPTIONS',
          },
          {
            key: 'Access-Control-Allow-Headers',
            value: 'Content-Type, Authorization',
          },
          {
            key: 'Access-Control-Allow-Credentials',
            value: 'true',
          },
          {
            key: 'Access-Control-Max-Age',
            value: '86400',
          },
        ],
      },
    ]
  },
}

module.exports = nextConfig

// app/api/auth/login/route.ts (CORS 프리플라이트 대응)
import { NextRequest, NextResponse } from 'next/server'

const ALLOWED_ORIGINS = ['https://app.example.com', 'https://admin.example.com']

function getCorsHeaders(origin: string | null) {
  const isAllowed = origin && ALLOWED_ORIGINS.includes(origin)
  return {
    'Access-Control-Allow-Origin': isAllowed ? origin : '',
    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
    'Access-Control-Allow-Headers': 'Content-Type',
    'Access-Control-Allow-Credentials': 'true',
  }
}

export async function OPTIONS(request: NextRequest) {
  const origin = request.headers.get('origin')
  return new NextResponse(null, {
    status: 204,
    headers: getCorsHeaders(origin),
  })
}

export async function POST(request: NextRequest) {
  const origin = request.headers.get('origin')
  // ... 로그인 로직 ...
  const response = NextResponse.json({ success: true })
  Object.entries(getCorsHeaders(origin)).forEach(([key, value]) => {
    response.headers.set(key, value)
  })
  return response
}

// middleware.ts 내 CORS 처리 로직 (발췌)
if (request.method === 'OPTIONS') {
  const origin = request.headers.get('origin')
  if (origin && ALLOWED_ORIGINS.includes(origin)) {
    return new NextResponse(null, {
      status: 204,
      headers: {
        'Access-Control-Allow-Origin': origin,
        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
        'Access-Control-Allow-Credentials': 'true',
        'Access-Control-Max-Age': '86400',
      },
    })
  }
}

// lib/token-blacklist.ts
// Redis를 사용한 토큰 블랙리스트 예시
import { Redis } from 'ioredis'

const redis = new Redis(process.env.REDIS_URL!)

export async function blacklistToken(jti: string, expiresAt: number): Promise<void> {
  const ttl = expiresAt - Math.floor(Date.now() / 1000)
  if (ttl > 0) {
    await redis.setex(`blacklist:${jti}`, ttl, '1')
  }
}

export async function isTokenBlacklisted(jti: string): Promise<boolean> {
  const result = await redis.get(`blacklist:${jti}`)
  return result === '1'
}

// app/actions/auth.ts (logoutAction — 블랙리스트 포함)
'use server'

import { cookies } from 'next/headers'
import { redirect } from 'next/navigation'
import { revalidatePath } from 'next/cache'
import { verifyAccessToken } from '@/lib/jwt'
import { blacklistToken } from '@/lib/token-blacklist'

export async function logoutAction(): Promise<void> {
  const cookieStore = await cookies()
  const token = cookieStore.get('access_token')?.value

  if (token) {
    try {
      const claims = await verifyAccessToken(token)
      // jti와 exp를 사용하여 블랙리스트에 추가
      await blacklistToken(claims.jti, claims.exp!)
    } catch {
      // 토큰이 이미 만료된 경우 무시
    }
  }

  cookieStore.delete('access_token')
  cookieStore.delete('refresh_token')

  revalidatePath('/', 'layout')
  redirect('/login')
}

// components/LogoutButton.tsx
'use client'

import { logoutAction } from '@/app/actions/auth'

export function LogoutButton() {
  return (
    <form action={logoutAction}>
      <button type="submit">로그아웃</button>
    </form>
  )
}