JWT 인증 완벽 가이드: 2025년 보안 모범 사례

// ❌ 위험: Middleware만으로 인증 (2025년 이전 방식)
// middleware.ts
export function middleware(request: NextRequest) {
  const token = request.cookies.get('auth-token')?.value;

  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  return NextResponse.next();
}

// lib/dal.ts (Data Access Layer)
import 'server-only'; // 서버에서만 실행되도록 보장
import { cookies } from 'next/headers';
import { jwtVerify } from 'jose';
import { cache } from 'react';

// ✅ React cache로 중복 요청 방지
export const verifySession = cache(async () => {
  const cookieStore = cookies();
  const token = cookieStore.get('auth-token')?.value;

  if (!token) {
    return { isAuth: false };
  }

  try {
    const secret = new TextEncoder().encode(process.env.JWT_SECRET!);
    const { payload } = await jwtVerify(token, secret);

    return {
      isAuth: true,
      userId: payload.sub as string,
      role: payload.role as string,
    };
  } catch {
    return { isAuth: false };
  }
});

// ✅ 사용자 데이터 가져오기 (인증 필수)
export async function getUser() {
  const session = await verifySession();

  if (!session.isAuth) {
    throw new Error('Unauthorized');
  }

  const user = await db.user.findUnique({
    where: { id: session.userId },
  });

  return user;
}

// app/dashboard/page.tsx
import { redirect } from 'next/navigation';
import { verifySession } from '@/lib/dal';

export default async function DashboardPage() {
  // ✅ 페이지 레벨에서 인증 확인
  const session = await verifySession();

  if (!session.isAuth) {
    redirect('/login');
  }

  // ✅ DAL을 통해 데이터 가져오기
  const user = await getUser();

  return (
    <div>
      <h1>Dashboard</h1>
      <p>Welcome, {user.email}</p>
    </div>
  );
}

// app/actions/update-profile.ts
'use server';

import { verifySession } from '@/lib/dal';
import { revalidatePath } from 'next/cache';

export async function updateProfile(formData: FormData) {
  // ✅ Server Action에서도 반드시 인증 확인
  const session = await verifySession();

  if (!session.isAuth) {
    throw new Error('Unauthorized');
  }

  const name = formData.get('name') as string;

  await db.user.update({
    where: { id: session.userId },
    data: { name },
  });

  revalidatePath('/profile');

  return { success: true };
}

// app/api/profile/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { verifySession } from '@/lib/dal';

export async function GET(request: NextRequest) {
  // ✅ API Route에서도 인증 확인
  const session = await verifySession();

  if (!session.isAuth) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  const user = await db.user.findUnique({
    where: { id: session.userId },
  });

  return NextResponse.json({ user });
}

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('auth-token')?.value;
  const { pathname } = request.nextUrl;

  // ✅ Middleware는 첫 번째 방어선으로만 사용
  // 실제 인증은 각 페이지/API에서 수행
  if (!token && pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};

// contexts/AuthContext.tsx
import { createContext, useContext, useState, useEffect, ReactNode } from 'react';

interface User {
  id: string;
  email: string;
  role: string;
}

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

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

export function AuthProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  // ✅ 페이지 로드 시 토큰 확인
  useEffect(() => {
    const checkAuth = async () => {
      const accessToken = localStorage.getItem('accessToken');

      if (!accessToken) {
        setIsLoading(false);
        return;
      }

      try {
        // Access Token으로 사용자 정보 조회
        const response = await fetch('/api/me', {
          headers: {
            Authorization: `Bearer ${accessToken}`,
          },
        });

        if (response.ok) {
          const data = await response.json();
          setUser(data.user);
        } else if (response.status === 401) {
          // Access Token 만료 → Refresh 시도
          await refreshToken();
        } else {
          localStorage.removeItem('accessToken');
        }
      } catch (error) {
        console.error('Auth check failed:', error);
        localStorage.removeItem('accessToken');
      } finally {
        setIsLoading(false);
      }
    };

    checkAuth();
  }, []);

  const login = async (email: string, password: string) => {
    const response = await fetch('/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      credentials: 'include', // 쿠키 포함
      body: JSON.stringify({ email, password }),
    });

    if (!response.ok) {
      const error = await response.json();
      throw new Error(error.message || 'Login failed');
    }

    const data = await response.json();

    // Access Token은 localStorage에 저장
    localStorage.setItem('accessToken', data.accessToken);
    // Refresh Token은 HttpOnly 쿠키로 자동 저장됨
    setUser(data.user);
  };

  const refreshToken = async () => {
    try {
      const response = await fetch('/api/refresh', {
        method: 'POST',
        credentials: 'include', // Refresh Token 쿠키 포함
      });

      if (response.ok) {
        const data = await response.json();
        localStorage.setItem('accessToken', data.accessToken);

        // 사용자 정보 다시 조회
        const userResponse = await fetch('/api/me', {
          headers: {
            Authorization: `Bearer ${data.accessToken}`,
          },
        });

        if (userResponse.ok) {
          const userData = await userResponse.json();
          setUser(userData.user);
        }
      } else {
        // Refresh Token도 만료됨
        localStorage.removeItem('accessToken');
        setUser(null);
      }
    } catch (error) {
      localStorage.removeItem('accessToken');
      setUser(null);
    }
  };

  const logout = async () => {
    await fetch('/api/logout', {
      method: 'POST',
      credentials: 'include',
    });

    localStorage.removeItem('accessToken');
    setUser(null);
  };

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

export function useAuth() {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within AuthProvider');
  }
  return context;
}

// components/ProtectedRoute.tsx
import { Navigate, useLocation, Outlet } from 'react-router-dom';
import { useAuth } from '@/contexts/AuthContext';

interface ProtectedRouteProps {
  requiredRole?: string;
}

export function ProtectedRoute({ requiredRole }: ProtectedRouteProps) {
  const { user, isLoading } = useAuth();
  const location = useLocation();

  if (isLoading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div>Loading...</div>
      </div>
    );
  }

  if (!user) {
    // 로그인 후 원래 페이지로 돌아가기 위해 state 전달
    return <Navigate to="/login" state= replace />;
  }

  if (requiredRole && user.role !== requiredRole) {
    return <Navigate to="/unauthorized" replace />;
  }

  // ✅ Outlet으로 하위 라우트 렌더링
  return <Outlet />;
}

// App.tsx
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { AuthProvider } from './contexts/AuthContext';
import { ProtectedRoute } from './components/ProtectedRoute';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
  },
  {
    path: '/login',
    element: <Login />,
  },
  {
    // ✅ Protected Route로 감싸기
    element: <ProtectedRoute />,
    children: [
      {
        path: '/dashboard',
        element: <Dashboard />,
      },
      {
        path: '/profile',
        element: <Profile />,
      },
    ],
  },
  {
    // ✅ Admin 전용 라우트
    element: <ProtectedRoute requiredRole="admin" />,
    children: [
      {
        path: '/admin',
        element: <AdminPanel />,
      },
    ],
  },
]);

function App() {
  return (
    <AuthProvider>
      <RouterProvider router={router} />
    </AuthProvider>
  );
}

// utils/api.ts
import { jwtDecode } from 'jwt-decode';

// ✅ Access Token 만료 확인
function isTokenExpired(token: string): boolean {
  try {
    const decoded = jwtDecode(token);
    const now = Date.now() / 1000;

    // 만료 1분 전이면 갱신
    return decoded.exp ? decoded.exp < now + 60 : true;
  } catch {
    return true;
  }
}

// ✅ 자동 토큰 갱신
async function refreshAccessToken(): Promise<string | null> {
  try {
    const response = await fetch('/api/refresh', {
      method: 'POST',
      credentials: 'include',
    });

    if (response.ok) {
      const data = await response.json();
      localStorage.setItem('accessToken', data.accessToken);
      return data.accessToken;
    }

    return null;
  } catch {
    return null;
  }
}

// ✅ API 요청 헬퍼
export async function apiRequest(url: string, options: RequestInit = {}) {
  let accessToken = localStorage.getItem('accessToken');

  // 토큰이 만료되었으면 갱신
  if (accessToken && isTokenExpired(accessToken)) {
    accessToken = await refreshAccessToken();

    if (!accessToken) {
      // Refresh도 실패 → 로그인 페이지로
      window.location.href = '/login';
      throw new Error('Authentication required');
    }
  }

  const headers = {
    'Content-Type': 'application/json',
    ...options.headers,
  };

  if (accessToken) {
    headers['Authorization'] = `Bearer ${accessToken}`;
  }

  const response = await fetch(url, {
    ...options,
    headers,
  });

  if (response.status === 401) {
    // 401 에러 → 토큰 갱신 시도
    const newToken = await refreshAccessToken();

    if (newToken) {
      // 갱신 성공 → 원래 요청 재시도
      headers['Authorization'] = `Bearer ${newToken}`;
      return fetch(url, { ...options, headers });
    }

    // 갱신 실패 → 로그인 페이지로
    window.location.href = '/login';
    throw new Error('Authentication required');
  }

  return response;
}