[Next.js] 커스텀 훅을 이용하여 앱 전역에서 상태 관리하기

특정 사이트를 제작 시 인증 시스템을 만들게 된다면 계속해서 인증 상태를 관리해주어야 할 필요가 있습니다.

예를 들어 JWT토큰을 사용중이라면, access_token의 상태를 체크하여 refresh_token으로 갱신을 지속적으로 해주어야 합니다.

이때 나만의 새로운 훅을 만들어 모든 페이지를 거칠 때마다 훅이 실행되도록 하는 방식으로 상태를 관리해줄 수 있습니다.

// hooks/useAuth.js

import { useEffect } from "react";

const useAuth = () => {
  useEffect(() => {
    const refreshToken = async () => {
      const refresh_token = localStorage.getItem("refresh_token");

      if (refresh_token) {
        // refresh_token을 사용하여 access_token 갱신 시도
        const response = await fetch(
          "http://localhost:8000/api/token/refresh",
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({ refresh: refresh_token }),
          }
        );

        if (response.ok) {
          const data = await response.json();
          // 갱신된 access_token을 로컬 스토리지에 저장
          localStorage.setItem("access_token", data.access);
        } else {
          localStorage.removeItem("access_token");
          localStorage.removeItem("access_expires");
        }
      }
    };

    refreshToken();
  }, []);

  // 필요한 경우 추가 로직 구현
};

export default useAuth;

 

해당 훅은 refresh_token가 존재할 경우 토큰 재생성 API를 호출하여 새로운 access_token을 불러오도록 하는 방식입니다.

주의할 점은 해당 코드에서는 토큰들을 localStorage에 저장하지만 이러한 방식은 보안의 위험이 있으므로 더 나은 방식을 사용하시길 바랍니다.

import Navbar from "./utils/Navbar";
import useAuth from "./hooks/useAuth";

export default function App({ Component, pageProps }) {
  useAuth();
  return (
    <>
      <Navbar />
      <Component {...pageProps} />
    </>
  );
}

 

해당 커스텀 훅을 _app.js파일에 위와 같이 삽입해주면 됩니다. 이렇게 하면 앱 내의 모든 페이지를 거칠 때마다 useAuth()훅이 자동으로 실행되어 토큰을 전역으로 관리할 수 있게 됩니다.

 

좀더 개선해볼만한 점은, 페이지를 이동할때마다 API요청을 보내도록 하면 요청이 과도하게 이루어질 수 있으므로, 훅에 추가적인 if 로직을 넣어볼 수 있습니다. ex) access_token의 만료 시간이 5분 남았을 경우 API 요청 실행 등