🚀 Next.js 심화 11장: Next.js + Spring 완전한 인증 아키텍처 — BFF 패턴과 하이브리드 토큰 설계

// lib/session.ts
import 'server-only'
import { cookies } from 'next/headers'
 
const ACCESS_TOKEN_KEY = 'access_token'
const REFRESH_TOKEN_KEY = 'refresh_token'
 
// 로그인 성공 후 Spring이 발급한 두 토큰을 역할에 따라 다르게 보관
export async function setTokenCookies(
  accessToken: string,
  refreshToken: string,
  accessExpiresIn: number  // 초 단위, 보통 3600 (1시간)
) {
  const cookieStore = await cookies()
 
  // ✅ 액세스 토큰: httpOnly=false → CSR에서 JS로 읽어 Spring 직접 호출 가능
  cookieStore.set(ACCESS_TOKEN_KEY, accessToken, {
    httpOnly: false,                                          // 클라이언트 접근 허용 (의도적)
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'lax',
    path: '/',
    expires: new Date(Date.now() + accessExpiresIn * 1000),  // 1시간
  })
 
  // ✅ 리프레시 토큰: httpOnly=true → JS 접근 완전 차단, 서버만 읽을 수 있음
  cookieStore.set(REFRESH_TOKEN_KEY, refreshToken, {
    httpOnly: true,                                           // JS 접근 차단 (보안 핵심!)
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'lax',
    path: '/',
    expires: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // 7일
  })
}
 
export async function getAccessToken(): Promise<string | null> {
  const cookieStore = await cookies()
  return cookieStore.get(ACCESS_TOKEN_KEY)?.value ?? null
}
 
export async function getRefreshToken(): Promise<string | null> {
  const cookieStore = await cookies()
  return cookieStore.get(REFRESH_TOKEN_KEY)?.value ?? null
}
 
export async function clearTokenCookies() {
  const cookieStore = await cookies()
  cookieStore.delete(ACCESS_TOKEN_KEY)
  cookieStore.delete(REFRESH_TOKEN_KEY)
}

// actions/auth.ts
'use server'
import { redirect } from 'next/navigation'
import { setTokenCookies, clearTokenCookies } from '@/lib/session'
 
interface SpringAuthResponse {
  accessToken: string
  refreshToken: string
  expiresIn: number
}
 
export async function login(prevState: unknown, formData: FormData) {
  const email = formData.get('email') as string
  const password = formData.get('password') as string
 
  try {
    // Spring 인증 API 호출 (서버-서버 통신, 안전)
    const response = await fetch(`${process.env.SPRING_API_URL}/auth/login`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password }),
    })
 
    if (!response.ok) {
      const error = await response.json()
      return { error: error.message || '이메일 또는 비밀번호가 올바르지 않아요' }
    }
 
    const { accessToken, refreshToken, expiresIn }: SpringAuthResponse = await response.json()
 
    // 두 토큰을 역할에 따라 분리 저장
    await setTokenCookies(accessToken, refreshToken, expiresIn)
  } catch {
    return { error: '서버 연결에 실패했어요. 잠시 후 다시 시도해주세요.' }
  }
 
  redirect('/dashboard')
}
 
export async function logout() {
  // Spring 로그아웃 API 호출 (선택적 — 서버 측 토큰 무효화)
  const { getAccessToken } = await import('@/lib/session')
  const accessToken = await getAccessToken()
 
  if (accessToken) {
    await fetch(`${process.env.SPRING_API_URL}/auth/logout`, {
      method: 'POST',
      headers: { Authorization: `Bearer ${accessToken}` },
    }).catch(console.error)  // 실패해도 로컬 쿠키는 제거
  }
 
  await clearTokenCookies()
  redirect('/login')
}

// lib/springClient.ts — 서버 컴포넌트용 Spring API 통신
import 'server-only'
import { getAccessToken } from './session'
 
const SPRING_API_URL = process.env.SPRING_API_URL!
 
interface FetchOptions extends RequestInit {
  requireAuth?: boolean
}
 
// 서버 컴포넌트에서 Spring API를 호출하는 래퍼
export async function springFetch(path: string, options: FetchOptions = {}) {
  const { requireAuth = true, ...fetchOptions } = options
 
  const headers: Record<string, string> = {
    'Content-Type': 'application/json',
    ...(fetchOptions.headers as Record<string, string>),
  }
 
  if (requireAuth) {
    const accessToken = await getAccessToken()
    if (!accessToken) {
      throw new Error('UNAUTHORIZED')
    }
    headers['Authorization'] = `Bearer ${accessToken}`
  }
 
  const response = await fetch(`${SPRING_API_URL}${path}`, {
    ...fetchOptions,
    headers,
  })
 
  if (response.status === 401) {
    // 액세스 토큰 만료 — 서버에서 갱신 시도 불가 (브라우저 쿠키 수정 불가)
    // 클라이언트가 /api/auth/refresh를 호출해야 함
    throw new Error('TOKEN_EXPIRED')
  }
 
  if (!response.ok) {
    throw new Error(`Spring API error: ${response.status}`)
  }
 
  return response.json()
}

// app/api/auth/refresh/route.ts
import { NextResponse } from 'next/server'
import { getRefreshToken, setTokenCookies } from '@/lib/session'
 
export async function POST() {
  const refreshToken = await getRefreshToken()
 
  if (!refreshToken) {
    // 리프레시 토큰도 없으면 완전 로그아웃 상태
    return NextResponse.json({ error: '세션이 만료됐어요' }, { status: 401 })
  }
 
  try {
    // Spring의 토큰 갱신 API 호출
    const response = await fetch(`${process.env.SPRING_API_URL}/auth/refresh`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${refreshToken}`,
      },
    })
 
    if (!response.ok) {
      // 리프레시 토큰도 만료됨 → 강제 로그아웃
      return NextResponse.json({ error: '다시 로그인해주세요' }, { status: 401 })
    }
 
    const { accessToken, refreshToken: newRefreshToken, expiresIn } = await response.json()
 
    // 새 토큰으로 쿠키 갱신
    await setTokenCookies(accessToken, newRefreshToken, expiresIn)
 
    return NextResponse.json({
      success: true,
      accessToken,    // 클라이언트가 즉시 사용할 수 있도록 응답에도 포함
    })
  } catch {
    return NextResponse.json({ error: '토큰 갱신에 실패했어요' }, { status: 500 })
  }
}

// lib/springClient.ts — 클라이언트 컴포넌트용 Spring API 통신 래퍼
'use client'
 
function getAccessTokenFromCookie(): string | null {
  // httpOnly=false인 access_token만 읽을 수 있음
  const match = document.cookie.match(/access_token=([^;]+)/)
  return match ? match[1] : null
}
 
async function refreshAccessToken(): Promise<string | null> {
  const response = await fetch('/api/auth/refresh', { method: 'POST' })
  if (!response.ok) {
    // 갱신 실패 → 로그인 페이지로
    window.location.href = '/login'
    return null
  }
  const { accessToken } = await response.json()
  return accessToken
}
 
// 자동 갱신 인터셉터가 포함된 Spring API 호출 함수
export async function springApiClient(path: string, options: RequestInit = {}) {
  const SPRING_API_URL = process.env.NEXT_PUBLIC_SPRING_API_URL!
 
  let accessToken = getAccessTokenFromCookie()
 
  const makeRequest = async (token: string) =>
    fetch(`${SPRING_API_URL}${path}`, {
      ...options,
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token}`,
        ...(options.headers as Record<string, string>),
      },
    })
 
  if (!accessToken) {
    // 쿠키에 액세스 토큰 없음 → 갱신 시도
    accessToken = await refreshAccessToken()
    if (!accessToken) return null
  }
 
  let response = await makeRequest(accessToken)
 
  if (response.status === 401) {
    // 401 → 액세스 토큰 만료 → 갱신 후 재시도
    const newToken = await refreshAccessToken()
    if (!newToken) return null
    response = await makeRequest(newToken)
  }
 
  if (!response.ok) throw new Error(`API Error: ${response.status}`)
  return response.json()
}

// lib/dal.ts — 서버 컴포넌트용 세션 검증 + Spring API 통합
import 'server-only'
import { getAccessToken } from './session'
import { springFetch } from './springClient'
 
interface UserProfile {
  id: string
  name: string
  email: string
  avatar: string
}
 
// 현재 로그인한 사용자 정보 조회 (SSR용)
export async function getCurrentUser(): Promise<UserProfile | null> {
  const accessToken = await getAccessToken()
  if (!accessToken) return null
 
  try {
    return await springFetch('/api/me', {
      next: { revalidate: 60 },  // 1분 캐싱 (자주 바뀌지 않는 프로필)
    })
  } catch (error: unknown) {
    if ((error as Error).message === 'TOKEN_EXPIRED') {
      // SSR 중 토큰 만료 → null 반환 (클라이언트가 갱신 처리)
      return null
    }
    throw error
  }
}

// app/dashboard/page.tsx — 서버 컴포넌트에서 인증된 초기 렌더
import { getCurrentUser } from '@/lib/dal'
import { redirect } from 'next/navigation'
import { DashboardClient } from '@/components/features/DashboardClient'
 
export default async function DashboardPage() {
  // 서버에서 Spring API 호출 → 인증된 사용자 정보
  const user = await getCurrentUser()
 
  if (!user) {
    redirect('/login')  // 미인증 → 로그인 페이지
  }
 
  // 서버에서 가져온 초기 데이터를 클라이언트에 props로 전달
  return (
    <div>
      <h1>안녕하세요, {user.name}님!</h1>
      {/* DashboardClient는 이후 CSR에서 springApiClient를 사용 */}
      <DashboardClient initialUser={user} />
    </div>
  )
}

// app/api/proxy/[...path]/route.ts — 범용 API 프록시
import { NextRequest, NextResponse } from 'next/server'
import { getAccessToken } from '@/lib/session'
 
// GET /api/proxy/users/1 → Spring /api/users/1 로 중계
export async function GET(
  request: NextRequest,
  { params }: { params: Promise<{ path: string[] }> }
) {
  const { path } = await params
  return proxyToSpring(request, path.join('/'), 'GET')
}
 
export async function POST(
  request: NextRequest,
  { params }: { params: Promise<{ path: string[] }> }
) {
  const { path } = await params
  return proxyToSpring(request, path.join('/'), 'POST', await request.json())
}
 
async function proxyToSpring(
  request: NextRequest,
  path: string,
  method: string,
  body?: unknown
) {
  const accessToken = await getAccessToken()
 
  if (!accessToken) {
    return NextResponse.json({ error: '인증이 필요해요' }, { status: 401 })
  }
 
  const response = await fetch(`${process.env.SPRING_API_URL}/api/${path}`, {
    method,
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${accessToken}`,  // 서버에서 토큰 주입
    },
    body: body ? JSON.stringify(body) : undefined,
  })
 
  const data = await response.json()
  return NextResponse.json(data, { status: response.status })
}

// 클라이언트 컴포넌트에서 사용 (토큰 없이 Next.js 프록시로 호출)
async function fetchUserPosts(userId: string) {
  // 브라우저가 /api/proxy/를 호출 → Next.js가 Spring으로 중계
  const response = await fetch(`/api/proxy/users/${userId}/posts`)
  return response.json()
}

// 커스텀 헤더 기반 CSRF 방어 (Origin 검증)
// app/api/auth/refresh/route.ts
export async function POST(request: NextRequest) {
  const origin = request.headers.get('origin')
  const allowedOrigins = [
    process.env.NEXT_PUBLIC_APP_URL,
    'http://localhost:3000',
  ]
 
  if (!allowedOrigins.includes(origin ?? '')) {
    return NextResponse.json({ error: 'CSRF 방어: 허용되지 않은 출처' }, { status: 403 })
  }
  // ...
}

cookieStore.set('refresh_token', token, {
  httpOnly: true,           // ✅ JS 접근 차단
  secure: true,             // ✅ HTTPS 전용 (프로덕션)
  sameSite: 'lax',          // ✅ CSRF 기본 방어
  path: '/api/auth',        // ✅ 리프레시 엔드포인트로만 전송 제한
  expires: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
})

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
            .allowedOrigins(
                "http://localhost:3000",
                "https://youngsu.community"
            )
            .allowedMethods("GET", "POST", "PUT", "DELETE")
            .allowCredentials(true)   // 쿠키 포함 요청 허용
            .allowedHeaders("*");
    }
}

// 갱신 시도 횟수 제한
let refreshAttempts = 0
 
async function refreshWithLimit() {
  if (refreshAttempts >= 1) {
    refreshAttempts = 0
    window.location.href = '/login'
    return null
  }
  refreshAttempts++
  const result = await refreshAccessToken()
  refreshAttempts = 0
  return result
}

// ❌ 문제 있는 코드
try {
  await setTokenCookies(...)
  redirect('/dashboard')  // try 블록 안에 있으면 catch로 빠질 수 있음
} catch (e) {
  console.error(e)
}
 
// ✅ 올바른 코드
try {
  await setTokenCookies(...)
} catch (e) {
  return { error: '로그인 실패' }
}
redirect('/dashboard')  // try 블록 밖에서 호출