로그인 전략 with Cookie

이번에 프로젝트를 리팩터링하는 과정에서 로그인에 대한 부분도 수정을 하였다.

기존 방식

기존에는 로컬 스토리지에 accessToken을 저장하는 방식을 사용했었다.

하지만 로컬 스토리지에 있는 데이터는 브라우저가 닫혀도 삭제되지 않기 때문에 보안상 관리가 쉽지 않다.

수정된 방식

JWT 대신에 Cookie에 httponly 옵션을 설정하여 사용하기로 했다. 

간단하게 방식을 말하면, httponly 옵션 때문에 브라우저에서 쿠키에 접근할 수 없으니까 새로고침을 하면 쿠키가 존재하는지 확인할 방법이 없다. 그렇기에 쿠키에 다른 값을 넣어서 로그인 확인을 하기로 했다.

로그인 전략

우선 로그인을 하면위 사진처럼 쿠키가 들어오게 설정했다.

위에서 말했듯이 httponly라서 JS로 쿠키에 접근할 수가 없다. 이 부분에서 어떻게 해야 할지를 엄청 고민했었다. 그래서 프론트엔드 카톡 오픈방에 물어봤다. 스토리지나 쿠키에 추가적인 값을 넣어서 관리하는 경우도 많다고 했다. 따라서 이렇게 관리하기로 했다.

 

-쿠키에 로그인 확인 값을 저장

쿠키에 httponly가 아닌 isLogin이라는 값을 넣어 로그인 유지를 시키려고 했다. 하지만 쿠키는 사용자들이 조작할 수 있기 때문에 그냥 단순하게 값을 넣으면 안 된다고 생각했다. 그렇기에 crypto 라이브러리를 통해서 isLogin의 값을 암호화해서 넣어줬다.

 

import CryptoJS from "crypto-js";

/* Salt 비밀 키 */
const salt = process.env.REACT_SALT!;

/* 암호화 */
export const encrypt = (text: string) => {
  // 값이 없을 경우 빈 문자열 반환
  if (!text) return "";
  return CryptoJS.AES.encrypt(text, salt).toString();
};

/* 복호화 */
export const decrypt = (text: string) => {
  // 값이 없을 경우 빈 문자열 반환
  if (!text) return "";

  try {
    const bytes = CryptoJS.AES.decrypt(text, salt); // 복호화 시도
    return bytes.toString(CryptoJS.enc.Utf8);
  } catch (error) {
    console.error("Decryption error:", error); // 에러 로깅
    return ""; // 에러 발생 시 빈 문자열 반환
  }
};

이렇게 salt를 .env에 설정하고 encrypt, decrypt가 되는 함수를 설정했다.

 

        setCookie("isLogin", encrypt({원하는 값}), {
            path: "/",
            expires: oneMonthLater,
          });

그리고 로그인에 성공하면 값을 암호화해서 쿠키에 넣어줬다.

 

  useLayoutEffect(() => {
    const loginStatus: string = getCookie("isLogin");

    if (decrypt(loginStatus) === {원하는 값}) {
      dispatch(login());
    } else {
      dispatch(logout());
      if (pathname !== "/") {
        navigate("/login");
      }
    }
  }, [pathname]);

새로고침이나 페이지 경로 이동이 되면 설정한 값과 같은지 복호화해서 확인 후 로그인 유지를 해줬다.