Recoil과 Cookie를 이용한 Next.js의 SSR 환경에서 전역 인증 관리하기 (JWT 토큰, 새로 고침 유지)

// import 생략
const cookies = new Cookies()

function setToken(key: 'ACCESS_TOKEN' | 'REFRESH_TOKEN', token: string) {
  const expires = new Date()
  expires.setDate(expires.getDate() + 14)

  cookies.set(key, token, {
    path: '/',
    expires: key === 'REFRESH_TOKEN' ? expires : undefined,
  })
}

function removeToken(key: 'ACCESS_TOKEN' | 'REFRESH_TOKEN') {
  cookies.remove(key, { path: '/' })
}

function removeTokenAll() {
  removeToken(ACCESS_TOKEN)
  removeToken(REFRESH_TOKEN)
}

function getAccessToken() {
  return cookies.get(ACCESS_TOKEN)
}

function getRefreshToken() {
  return cookies.get(REFRESH_TOKEN)
}

async function authorizeFetch({
  accessToken,
  refreshToken,
  apiURL,
}: {
  accessToken: string
  refreshToken: string
  apiURL: string
}) {
  const headers = {
    ...(accessToken ? { accessToken: accessToken } : {}),
  }

  try {
    const { data } = await axios.get(apiURL, {
      headers,
    })
    // 유효한 토큰인 경우
    return { isAuth: true, data: data.data }
  } catch (e) {
    if (e instanceof AxiosError) {
      // 인증되지 않은 경우
      if (e.response && e.response.status === 401) {
        const { userId } = parseJwt(accessToken as string)

        try {
          const { data: newTokenData } = await userAPI.reissueToken({
            userId: parseInt(userId),
            accessToken,
            refreshToken,
          })

          const newAccessToken = newTokenData.data.accessToken
          setToken('ACCESS_TOKEN', newAccessToken)

          const { data: newAuthData } = await axios.get(apiURL, {
            headers: {
              accessToken: newAccessToken,
            },
          })

          return { isAuth: true, data: newAuthData.data }
        } catch (e) {
          const { data } = await axios.get(apiURL)
          return { isAuth: false, data: data.data }
        }
      }
    }
    const { data } = await axios.get(apiURL)
    return { isAuth: false, data: data.data }
  }
}

import { atom } from 'recoil';
import { SIGNOUT_USER_STATE } from '../constants';
import { authorizeFetch, removeTokenAll, getAccessToken, getRefreshToken } from 'utils';
import { ACCESS_TOKEN, REFRESH_TOKEN } from '../constants';

const cookieEffect =
  (accessTokenKey: 'ACCESS_TOKEN', refreshTokenKey: 'REFRESH_TOKEN') =>
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  ({ setSelf, onSet }: any) => {
    onSet(async () => {
      try {
        const accessToken = getAccessToken();
        const refreshToken = getRefreshToken();

        if (!accessToken || !refreshToken) {
          removeTokenAll();
          return SIGNOUT_USER_STATE;
        }

        const { data } = await authorizeFetch({
          accessToken,
          refreshToken,
          apiURL: // 자기 자신의 정보를 불러오는 api,
        });

        const { userId, email, nickname, profileImage } = data;
        return { userId, email, nickname, profileImage, isLoggedIn: true };
      } catch (error: unknown) {
        removeTokenAll();
        console.error(error);
        return SIGNOUT_USER_STATE;
      }
    });
  };

const userAtom = atom({
  key: `user/${new Date().getUTCMilliseconds() * Math.random()}`,
  effects: [cookieEffect(ACCESS_TOKEN, REFRESH_TOKEN)],
  default: SIGNOUT_USER_STATE,
});

export default userAtom;

// import 생략

function ArtZip({ Component, pageProps, userData }: AppProps | any) {
  // 일부 내용 생략되어 있음.

  // Recoil의 initialState 초기화
  const initialState = ({ set }: MutableSnapshot) => {
    const { userId, email, nickname, profileImage } = userData;
    const isLoggedIn = userId !== null;
    set(userAtom, { userId, email, nickname, profileImage, isLoggedIn });
  };

  return (
    <RecoilRoot initializeState={initialState}>
    <!-- 안의 내용은 일부 생략 -->
       <Layout>
          <Component {...pageProps} />
        </Layout>
    </RecoilRoot>
  );
}

ArtZip.getInitialProps = async (appContext: AppContext) => {
  // 서버 사이드 쿠키 받아오기
  const appProps = await App.getInitialProps(appContext);
  const { ctx } = appContext;
  const allCookies = cookies(ctx);

  const accessToken = allCookies[ACCESS_TOKEN];
  const refreshToken = allCookies[REFRESH_TOKEN];

  const removeAllCookies = () => {
  // 서버 사이드 쿠키 삭제
    ctx.res &&
      ctx.res.setHeader('Set-Cookie', [
        `ACCESS_TOKEN=deleted; Max-Age=0`,
        `REFRESH_TOKEN=deleted; Max-Age=0`,
      ]);
  // 클라이언트 사이드 쿠키 삭제
    removeTokenAll();
  };

  let userState = SIGNOUT_USER_STATE;
  // 서버 사이드 쿠키가 남아있을 경우, 해당 쿠키로 인증 시도
  if (refreshToken && accessToken) {
    try {
      const { isAuth, data } = await authorizeFetch({
        accessToken,
        refreshToken,
        apiURL: // 내 정보 불러오는 api URL,
      });

      userState = isAuth ? { ...data, isLoggedIn: true } : SIGNOUT_USER_STATE;

      if (!isAuth) {
        removeAllCookies();
      }
    } catch (e) {
      removeAllCookies();
      userState = SIGNOUT_USER_STATE;
    }
  }

  if (userState.userId === null) {
    removeAllCookies();
  }

  return { ...appProps, userData: userState };
};

export default ArtZip;