🔒 Handle automatic logout on token expiration

package.json

@@ -29,6 +29,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^12.33.0",
+    "jwt-decode": "^4.0.0",
     "lucide-react": "^0.562.0",
     "motion": "^12.29.2",
     "radix-ui": "^1.4.3",

src/App.tsx

@@ -2,9 +2,12 @@ import './App.css';
 
 import { GlobalErrorModal } from '@/components/GlobalErrorModal';
 import { RouterProvider } from 'react-router/dom';
+import { useAutoLogout } from './hooks/useAutoLogout';
 import { router } from './routes';
 
 export default function App() {
+  useAutoLogout();
+
   return (
     <>
       <RouterProvider router={router} />

src/api/apiClient.ts

@@ -1,4 +1,5 @@
 import axios, { AxiosError } from 'axios';
+import { jwtDecode } from 'jwt-decode';
 import useAuthStore from '../hooks/useAuthStore';
 import { useErrorStore } from '../hooks/useErrorStore';
 
@@ -8,6 +9,9 @@ interface ApiErrorResponse {
   message: string;
 }
 
+// 5분 버퍼 (밀리초)
+const BUFFER_TIME = 5 * 60 * 1000;
+
 // 공통 설정을 가진 axios 인스턴스 생성
 const apiClient = axios.create({
   baseURL: `${import.meta.env.VITE_API_BASE_URL}/api`,
@@ -17,9 +21,33 @@ const apiClient = axios.create({
 
 // 요청 인터셉터: 모든 요청 직전에 실행됨
 apiClient.interceptors.request.use((config) => {
-  const token = useAuthStore.getState().token;
+  const { token, logout } = useAuthStore.getState();
 
   if (token) {
+    try {
+      const decoded = jwtDecode(token);
+
+      if (decoded.exp) {
+        const expTimeMs = decoded.exp * 1000;
+        const now = Date.now();
+
+        // 만료시간 5분 전(혹은 이미 지남)이면 거부
+        if (expTimeMs - BUFFER_TIME - now <= 0) {
+          // 상태 관리 로그아웃 처리만 수행
+          // 에러 모달(showError)과 리다이렉트(window.location.href)는
+          // 최상단 App.tsx에 마운트된 useAutoLogout 훅에서 일괄적으로 처리하도록 위임함.
+          // 여기서 중복 호출 시 모달이 2번 뜨는 Race Condition 발생 가능성 차단
+          logout();
+          return Promise.reject(new Error('TOKEN_EXPIRED_LOCAL'));
+        }
+      }
+    } catch {
+      // 디코딩 실패 시 진행하지 않음 (서버가 거절하도록 두거나 여기서 바로 막음)
+      // 보안상 여기서 바로 막는 것이 안전
+      logout();
+      return Promise.reject(new Error('INVALID_TOKEN_FORMAT'));
+    }
+
     config.headers.Authorization = `Bearer ${token}`;
   }
 
@@ -36,14 +64,16 @@ apiClient.interceptors.response.use(
 
       // 1. 토큰 만료 등 특수한 경우 확인 버튼 액션 정의
       let onConfirm = undefined;
+      let confirmText = undefined;
       if (code === 'TOKEN_EXPIRED') {
         onConfirm = () => {
           window.location.href = '/login';
         };
+        confirmText = '다시 로그인하기';
       }
 
-      // 2. 스토어를 통해 모달 띄우기 (순서 주의: message, title, onConfirm)
-      showError(message, title || '오류 발생', onConfirm);
+      // 2. 스토어를 통해 모달 띄우기 (순서 주의: message, title, onConfirm, confirmText)
+      showError(message, title || '오류 발생', onConfirm, confirmText);
     } else {
       // 서버 응답 자체가 없는 경우 (네트워크 오류 등)
       showError(

src/components/GlobalErrorModal.tsx

@@ -10,17 +10,30 @@ import {
 import { useErrorStore } from '@/hooks/useErrorStore';
 
 export function GlobalErrorModal() {
-  const { isOpen, title, message, onConfirm, closeError } = useErrorStore();
+  const { isOpen, title, message, onConfirm, closeError, confirmText } =
+    useErrorStore();
 
   const handleConfirm = () => {
     if (onConfirm) {
       onConfirm();
     }
-    closeError();
+
+    // 페이지 이동 등 무거운 작업이 발생할 때 리액트 렌더링 사이클이 꼬이면서
+    // 빈 모달이 깜빡이는 현상(Race condition)을 막기 위해 약간의 딜레이를 두고 닫음
+    setTimeout(() => {
+      closeError();
+    }, 100);
+  };
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open) {
+      // 바깥 영역 클릭(오버레이) 등 수동으로 닫을 때만 즉시 처리
+      closeError();
+    }
   };
 
   return (
-    <AlertDialog open={isOpen} onOpenChange={closeError}>
+    <AlertDialog open={isOpen} onOpenChange={handleOpenChange}>
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle className="text-destructive">
@@ -31,7 +44,9 @@ export function GlobalErrorModal() {
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
-          <AlertDialogAction onClick={handleConfirm}>확인</AlertDialogAction>
+          <AlertDialogAction onClick={handleConfirm}>
+            {confirmText}
+          </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>

src/hooks/useAuthStore.ts

@@ -28,8 +28,18 @@ const useAuthStore = create<AuthState>()(
       isLoggedIn: false,
       guestRegistrations: {},
 
-      login: (user, token) => set({ user, token, isLoggedIn: true }),
-      logout: () => set({ user: null, token: null, isLoggedIn: false }),
+      login: (user, token) =>
+        set({
+          user,
+          token,
+          isLoggedIn: true,
+        }),
+      logout: () =>
+        set({
+          user: null,
+          token: null,
+          isLoggedIn: false,
+        }),
       updateUser: (user) => set({ user }),
       setGuestRegistration: (eventId, registrationId) =>
         set((state) => ({

src/hooks/useAutoLogout.ts

@@ -0,0 +1,86 @@
+import { jwtDecode } from 'jwt-decode';
+import { useEffect, useRef } from 'react';
+import useAuthStore from './useAuthStore';
+import { useErrorStore } from './useErrorStore';
+
+// 5분 버퍼 (밀리초) -> 만료 5분 전에 미리 로그아웃 시킴
+const BUFFER_TIME = 5 * 60 * 1000;
+
+export function useAutoLogout() {
+  const { token, logout } = useAuthStore();
+  const showError = useErrorStore((state) => state.showError);
+
+  const isLoggingOut = useRef(false);
+
+  useEffect(() => {
+    if (!token) {
+      isLoggingOut.current = false;
+      return;
+    }
+
+    const checkAndLogout = () => {
+      if (isLoggingOut.current) return;
+
+      try {
+        const decoded = jwtDecode(token);
+        if (!decoded.exp) return;
+
+        // 토큰 exp는 초 단위이므로 밀리초로 변환
+        const expTimeMs = decoded.exp * 1000;
+        const now = Date.now();
+
+        // (만료시간 - 버퍼) 시점까지 남은 시간
+        const timeLeftToLogout = expTimeMs - BUFFER_TIME - now;
+
+        if (timeLeftToLogout <= 0) {
+          // 이미 만료 시점을(혹은 버퍼 시점을) 지났다면 즉시 로그아웃
+          handleLogout();
+        } else {
+          // 아직 시간이 남았다면 타이머 설정
+          const timerId = setTimeout(() => {
+            handleLogout();
+          }, timeLeftToLogout);
+
+          return timerId;
+        }
+      } catch (error) {
+        // 토큰 디코딩 실패 시 (유효하지 않은 토큰) 강제 로그아웃
+        console.error('Invalid token format', error);
+        handleLogout();
+      }
+    };
+
+    const handleLogout = () => {
+      if (isLoggingOut.current) return;
+      isLoggingOut.current = true;
+
+      logout();
+      showError(
+        '로그인 유지 시간이 만료되어 자동으로 로그아웃되었습니다.',
+        '로그아웃 안내',
+        () => {
+          window.location.href = '/login';
+        },
+        '다시 로그인하기'
+      );
+    };
+
+    // 1. 마운트 시점에 체크 & 타이머 설정
+    let timerId = checkAndLogout();
+
+    // 2. 브라우저 탭 활성화(포커스 복귀) 시점에 다시 체크
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'visible') {
+        if (timerId) clearTimeout(timerId);
+        timerId = checkAndLogout();
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
+    return () => {
+      if (timerId) clearTimeout(timerId);
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, [token, logout, showError]);
+}

src/hooks/useErrorStore.ts

@@ -4,17 +4,30 @@ interface ErrorState {
   isOpen: boolean;
   title: string;
   message: string;
+  confirmText: string;
   onConfirm?: () => void; // 확인 버튼 클릭 시 실행할 콜백 함수
-  showError: (message: string, title?: string, onConfirm?: () => void) => void;
+  showError: (
+    message: string,
+    title?: string,
+    onConfirm?: () => void,
+    confirmText?: string
+  ) => void;
   closeError: () => void;
 }
 
 export const useErrorStore = create<ErrorState>((set) => ({
   isOpen: false,
   title: '오류 발생',
   message: '',
+  confirmText: '확인',
   onConfirm: undefined,
-  showError: (message, title = '오류 발생', onConfirm) =>
-    set({ isOpen: true, message, title, onConfirm }),
-  closeError: () => set({ isOpen: false, message: '', onConfirm: undefined }),
+  showError: (
+    message,
+    title = '오류 발생',
+    onConfirm,
+    confirmText = '확인'
+  ) => {
+    set({ isOpen: true, message, title, onConfirm, confirmText });
+  },
+  closeError: () => set({ isOpen: false }), // 리다이렉트 중 깜빡임 방지를 위해 내용 보존
 }));

src/mocks/handlers/auth.ts

@@ -26,8 +26,21 @@ export const authHandlers = [
 
       if (user) {
         await delay(500); // 실제 서버처럼 약간의 지연 시간 추가
+
+        // 테스트를 위해 만료 5분 10초(310초)짜리 진짜 JWT 구조 발급 (Base64 인코딩)
+        // Header: {"alg":"HS256","typ":"JWT"} -> eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
+        const header = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9';
+        const payloadObj = {
+          sub: user.id.toString(),
+          iat: Math.floor(Date.now() / 1000),
+          exp: Math.floor(Date.now() / 1000) + 86400, // 현재 시간 + 24시간 만료
+        };
+        const payload = btoa(JSON.stringify(payloadObj));
+        const signature = 'mock-signature';
+        const mockJwtToken = `${header}.${payload}.${signature}`;
+
         return HttpResponse.json({
-          token: user.token,
+          token: mockJwtToken,
         });
       }
 

src/mocks/handlers/user.ts

@@ -1,5 +1,5 @@
 import type { GetMeResponse } from '@/types/users';
-import { http, HttpResponse, delay } from 'msw';
+import { http, HttpResponse } from 'msw';
 import { userDB } from '../db/user.db';
 import type { MockUser } from '../types';
 
@@ -22,24 +22,35 @@ export const userHandlers = [
         );
       }
 
-      // 헤더에서 토큰값만 추출 (예: "Bearer mock-token-1" -> "mock-token-1")
+      // 헤더에서 토큰값만 추출
       const requestToken = authHeader.split(' ')[1];
 
-      // 토큰을 기반으로 DB에서 유저 찾기
-      const user = userDB.find((u: MockUser) => u.token === requestToken);
+      try {
+        // 클라이언트에서 보낸 JWT 디코딩 (base64 부분 찾아서 파싱)
+        const payloadBase64 = requestToken.split('.')[1];
+        const payloadJson = atob(payloadBase64);
+        const decoded = JSON.parse(payloadJson);
+        const userId = Number(decoded.sub);
 
-      if (!user) {
-        return new HttpResponse(
-          { message: '해당 유저를 찾을 수 없습니다.' },
-          { status: 404 }
-        );
-      }
+        // 토큰 payload의 sub(유저 ID)를 기반으로 DB에서 유저 찾기
+        const user = userDB.find((u: MockUser) => u.id === userId);
 
-      await delay(300);
+        if (!user) {
+          return new HttpResponse(
+            { message: '해당 유저를 찾을 수 없습니다.' },
+            { status: 404 }
+          );
+        }
 
-      const { password, ...userResponse } = user as MockUser;
+        const { password, ...userResponse } = user as MockUser;
 
-      return HttpResponse.json(userResponse as GetMeResponse);
+        return HttpResponse.json(userResponse as GetMeResponse);
+      } catch (_error) {
+        return new HttpResponse(
+          { message: '유효하지 않은 토큰입니다.' },
+          { status: 401 }
+        );
+      }
     }
   ),
 ];

yarn.lock

@@ -6775,6 +6775,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jwt-decode@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "jwt-decode@npm:4.0.0"
+  checksum: 10c0/de75bbf89220746c388cf6a7b71e56080437b77d2edb29bae1c2155048b02c6b8c59a3e5e8d6ccdfd54f0b8bda25226e491a4f1b55ac5f8da04cfbadec4e546c
+  languageName: node
+  linkType: hard
+
 "kleur@npm:^3.0.3":
   version: 3.0.3
   resolution: "kleur@npm:3.0.3"
@@ -7232,6 +7239,7 @@ __metadata:
     class-variance-authority: "npm:^0.7.1"
     clsx: "npm:^2.1.1"
     framer-motion: "npm:^12.33.0"
+    jwt-decode: "npm:^4.0.0"
     knip: "npm:^5.59.1"
     lucide-react: "npm:^0.562.0"
     motion: "npm:^12.29.2"