Next.js에서 로그인 상태가 자꾸 풀리는 이유 : 인증 상태 분산 문제와 AuthContext 중앙화

// Header.tsx
const [isLogin, setIsLogin] = useState(false); // 항상 false로 시작!

useEffect(() => {
  // 클라이언트 hydration 이후에야 localStorage를 읽음
  const loginStatus = localStorage.getItem('isLogin');
  setIsLogin(loginStatus === 'true');
}, []);

// 🙅🏻‍♀️ instance.ts (기존)
if (error.response?.status === 401 || error.response?.status === 403) {
  localStorage.removeItem('isLogin');
  alert('로그인이 필요합니다.'); // 여러 API 동시 실패 시 중복 실행!
  window.location.href = '/login';
}

// 🙅🏻‍♀️ 기존 로그인 처리
document.cookie = 'isLogin=true; path=/'; // max-age 없음 = 세션 쿠키

브라우저 탭 닫고 다시 열기
  → Cookie: isLogin 없음 (세션 쿠키 만료)
  → localStorage: isLogin=true (남아있음)
  → 미들웨어: isLogin 쿠키 없음 → 보호 경로 접근 시 /login 리다이렉트
  → Header: localStorage 읽고 로그인 상태로 표시
  → 사용자: "분명히 로그인했는데 왜 튕겨?"

// 🙆🏻‍♀️ src/app/_lib/auth/AuthContext.tsx
'use client';

export function AuthProvider({ children, initialIsLogin, initialUserRole }: AuthProviderProps) {
  const [isLogin, setIsLogin] = useState(initialIsLogin); // 서버에서 받은 초기값
  const [userRole, setUserRole] = useState<UserRole | null>(initialUserRole);

  const setAuth = (role: UserRole, maxAgeSeconds: number) => {
    localStorage.setItem('isLogin', 'true');
    localStorage.setItem('userRole', role);
    localStorage.setItem('rtExpiry', String(maxAgeSeconds)); // refresh token 수명 보관
    document.cookie = `isLogin=true; path=/; max-age=${maxAgeSeconds}`;
    document.cookie = `userRole=${role}; path=/; max-age=${maxAgeSeconds}`;
    setIsLogin(true);
    setUserRole(role);
    window.dispatchEvent(new Event('authChange'));
  };

  const clearAuth = () => {
    localStorage.removeItem('isLogin');
    localStorage.removeItem('userRole');
    localStorage.removeItem('rtExpiry');
    document.cookie = 'isLogin=; path=/; max-age=0';
    document.cookie = 'userRole=; path=/; max-age=0';
    setIsLogin(false);
    setUserRole(null);
    window.dispatchEvent(new Event('authChange'));
  };

  // 쿠키가 만료됐지만 localStorage에 로그인 정보가 남아있는 경우 → refresh로 세션 복구
  useEffect(() => {
    const localIsLogin = localStorage.getItem('isLogin') === 'true';
    const localRole = localStorage.getItem('userRole') as UserRole | null;
    const rtExpiry = localStorage.getItem('rtExpiry');

    if (!initialIsLogin && localIsLogin && localRole && rtExpiry) {
      (async () => {
        try {
          const csrfRes = await axios.get(`${API_BASE_URL}/api/v1/auth/csrf`, { withCredentials: true });
          const token = csrfRes.data?.token;
          const headerName = csrfRes.data?.headerName ?? csrfRes.data?.header_name;
          await axios.post(`${API_BASE_URL}/api/v1/auth/refresh`, {}, {
            headers: { ...API_HEADERS, [headerName]: token },
            withCredentials: true,
          });
          // 복구 성공 → 쿠키·상태 재설정
          document.cookie = `isLogin=true; path=/; max-age=${rtExpiry}`;
          document.cookie = `userRole=${localRole}; path=/; max-age=${rtExpiry}`;
          setIsLogin(true);
          setUserRole(localRole);
        } catch {
          // refresh token도 만료 → localStorage 정리
          localStorage.removeItem('isLogin');
          localStorage.removeItem('userRole');
          localStorage.removeItem('rtExpiry');
        }
      })();
    }
  }, []);

  useEffect(() => {
    // instance.ts 바깥에서 storage를 직접 지울 때 동기화
    const handleAuthChange = () => {
      setIsLogin(localStorage.getItem('isLogin') === 'true');
      setUserRole(localStorage.getItem('userRole') as UserRole | null);
    };
    // instance.ts에서 refresh 성공 후 발송하는 이벤트
    const handleAuthRefreshed = () => {
      setIsLogin(true);
      setUserRole(localStorage.getItem('userRole') as UserRole | null);
    };
    // 다른 탭에서의 변경도 동기화
    const handleStorageChange = (e: StorageEvent) => {
      if (e.key === 'isLogin') setIsLogin(e.newValue === 'true');
      if (e.key === 'userRole') setUserRole(e.newValue as UserRole | null);
    };
    window.addEventListener('authChange', handleAuthChange);
    window.addEventListener('authRefreshed', handleAuthRefreshed);
    window.addEventListener('storage', handleStorageChange);
    return () => {
      window.removeEventListener('authChange', handleAuthChange);
      window.removeEventListener('authRefreshed', handleAuthRefreshed);
      window.removeEventListener('storage', handleStorageChange);
    };
  }, []);

  return (
    <AuthContext.Provider value={{ isLogin, userRole, setAuth, clearAuth }}>
      {children}
    </AuthContext.Provider>
  );
}

const [isLogin, setIsLogin] = useState(initialIsLogin); 
const [userRole, setUserRole] = useState<UserRole | null>(initialUserRole);

// 🙆🏻‍♀️ src/app/layout.tsx
export default async function RootLayout({ children }) {
  const cookieStore = await cookies(); // next/headers
  const initialIsLogin = cookieStore.get('isLogin')?.value === 'true';
  const initialUserRole = (cookieStore.get('userRole')?.value as UserRole | null) ?? null;

  return (
    <html>
      <body>
        <AuthProvider initialIsLogin={initialIsLogin} initialUserRole={initialUserRole}>
          <Providers>
            <Header />
            <main>{children}</main>
          </Providers>
        </AuthProvider>
      </body>
    </html>
  );
}

const cookieStore = await cookies();
const initialIsLogin = cookieStore.get('isLogin')?.value === 'true';

// 🙆🏻‍♀️ 로그인 성공 처리
// refreshTokenExpiresIn을 사용해 isLogin 쿠키가 refresh token과 동일한 수명을 갖도록 설정
setAuth(response.data.role, response.data.refreshTokenExpiresIn);

// 🙆🏻‍♀️ src/app/_lib/instance.ts
let isRefreshing = false;
let failedQueue: QueueEntry[] = [];

// 401: access token 만료 → refresh 시도
if (error.response?.status === 401 && !originalRequest._retry) {
  if (isRefreshing) {
    // 이미 refresh 중이면 큐에 대기
    return new Promise((resolve, reject) => {
      failedQueue.push({ resolve, reject });
    });
  }

  originalRequest._retry = true;
  isRefreshing = true;

  try {
    await axios.post(`${API_BASE_URL}/api/v1/auth/refresh`, ...);
    csrfToken = null;
    // isLogin 쿠키 만료 시간을 refresh token 기준으로 연장
    const role = localStorage.getItem('userRole');
    const rtExpiry = localStorage.getItem('rtExpiry');
    if (role && rtExpiry) {
      document.cookie = `isLogin=true; path=/; max-age=${rtExpiry}`;
      document.cookie = `userRole=${role}; path=/; max-age=${rtExpiry}`;
      window.dispatchEvent(new Event('authRefreshed')); // AuthContext에 상태 동기화
    }
    processQueue(null);
    return apiInstance(originalRequest); // 원래 요청 재시도
  } catch {
    processQueue(refreshError);
    clearAuthStorage();
    window.location.href = '/login';
  } finally {
    isRefreshing = false;
  }
}

// 403: 권한 없음 — 강제 로그아웃 하지 않음
if (error.response?.status === 403) {
  return Promise.reject(error);
}

에러 메시지 = `[INVALID_TOKEN_EXCEPTION] 유효하지 않은 토큰입니다`.

일반 탭 (구 쿠키 잔존):
  /api/v1/auth/csrf 호출 → 구 세션 기준 CSRF 토큰 발급
  로그인 POST → 백엔드: 세션 불일치 → INVALID_TOKEN_EXCEPTION

시크릿 모드 (쿠키 없음):
  /api/v1/auth/csrf 호출 → 새 세션 기준 CSRF 토큰 발급
  로그인 POST → 정상 처리

} catch (refreshError) {
  // 서버측 HTTP-only 쿠키 먼저 정리해 다음 로그인 시 CSRF 세션 불일치 방지
  try {
    const csrf = await fetchCsrfToken();
    await axios.post(`${API_BASE_URL}/api/v1/auth/logout`, {}, {
      headers: { ...API_HEADERS, [csrf.headerName]: csrf.token },
      withCredentials: true,
    });
  } catch { /* logout 실패는 무시 */ }

  clearAuthStorage();
  window.location.href = '/login';
}