[Taskify] Zustand 상태관리 트러블 슈팅

Zustand와 쿠키를 활용한 안전한 로그인 상태 관리

☄️ 문제점: 새로 고침 시 로그인 상태 유지 안됨

현재 로그인 후 받은 사용자 정보를 Zustand의 userStore에 저장하여 상태를 관리하고 있습니다.

하지만 새로 고침 시 상태가 초기화되어 로그인 상태가 유지되지 않는 문제가 발생했습니다.

토큰이나 사용자 정보를 로컬 스토리지나 세션 스토리지에 저장하는 것이 필요할지 고민이 되었습니다.

 

🚀 고민

• 로그인 상태 유지를 위해 어떤 저장 방식이 가장 적합할까?
• zustand를 사용할 때 로컬 스토리지나 세션 스토리지를 추가로 활용해야 할까, 아니면 다른 방법을 고려해야 할까?
• 쿠키를 사용한다면 어떻게 안전하게 토큰을 저장하고 사용할 수 있을까?

 

상태 관리의 기본 문제

☝🏻 여기서 잠깐
zustand는 메모리 상태 관리 라이브러리로, 페이지가 새로고침되면 메모리에 저장된 모든 상태가 초기화됩니다.
새로고침을 하면 브라우저는 애플리케이션을 처음부터 다시 로드하기 때문에, 메모리에 있던 상태는 사라지고 새로 초기화됩니다.

즉, 아무런 추가 설정을 하지 않은 상태의 zustand는 페이지가 새로고침되면 유저 정보가 초기화되는 것이다.

새로고침에도 초기화되지 않으려면 지속적인 저장소에 저장해야하는데 Zustand의 persist를 사용하면 된다.

 

🚀 해결법 1 - zustand의 persist 미들웨어를 활용

Zustand의 persist 미들웨어를 사용하면 상태를 localStorage나 sessionStorage에 저장하여 새로 고침 후에도 유지할 수 있습니다.

하지만 localStorage 또는 sessionStorage에 저장된 정보는 브라우저에서 JavaScript를 통해 접근 가능하기 때문에, XSS(교차 사이트 스크립팅) 공격에 노출될 위험이 있고, accessToken 같은 민감한 인증 정보를 클라이언트 측에 담는 것은 보안상 좋지 않다고 판단했다.

• 보안 취약점: localStorage와 sessionStorage는 브라우저에서 JavaScript로 접근 가능하므로, XSS(교차 사이트 스크립팅) 공격에 취약합니다.
• 민감한 정보 관리: accessToken과 같은 민감한 인증 정보를 클라이언트 측에 저장하는 것은 보안상 적절하지 않습니다.

 

🚀 내가 선택한 해결책 - 쿠키를 활용한 상태 관리

---

1. Access Token을 클라이언트 쿠키에 저장

백엔드에서 httpOnly 쿠키를 지원하지 않기 때문에, 클라이언트에서 js-cookie 라이브러리를 사용하여 Access Token을 쿠키에 저장하는 방식으로 보안을 관리했습니다.

js-cookie를 사용해 쿠키에 accessToken을 저장하면서 secure와 SameSite 설정을 사용하면, localStorage나 sessionStorage에 비해 XSS 및 CSRF 공격의 위험을 상당히 줄일 수 있습니다. 물론, httpOnly 쿠키만큼 강력한 보안을 제공하진 않지만, 백엔드에서 이를 제공하지 않는 상황에서는 적합한 대안이라고 판단했습니다.

• httpOnly 쿠키는 클라이언트 스크립트에서 접근할 수 없어서 보안에 매우 유리하지만, 백엔드에서 이를 제공하지 않는 상황에서 클라이언트에서는 js-cookie를 사용하여 토큰을 쿠키에 저장하게 되었습니다.
• 쿠키에는 보안을 강화하기 위해 Secure와 SameSite 옵션을 설정했습니다.

코드 예시

import Cookies from "js-cookie"; 

// Access Token 저장 함수
export const setAccessToken = (token) => {
  Cookies.set("accessToken", token, {
    expires: 1, // 유효 기간: 1일
    secure: true, // HTTPS에서만 전송
    sameSite: "Strict", // CSRF 공격 방지
  });
};

// Access Token 가져오기
export const getAccessToken = () => {
  return Cookies.get("accessToken") || null;
};

// Access Token 삭제
export const removeAccessToken = () => {
  Cookies.remove("accessToken");
};

 

2. Authorization 헤더로 Access Token 전달

클라이언트에서 API 요청 시 Access Token을 Authorization 헤더로 전달합니다. 이는 서버에서 사용자 인증을 처리하는 데 사용됩니다.

Axios 설정

import Axios from "axios";
import Cookies from "js-cookie";

// Axios 인스턴스 생성
const axiosInstance = Axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000",
  timeout: 5000,
  withCredentials: false, // 서버에 쿠키를 자동으로 포함하지 않음
  headers: {
    "Content-Type": "application/json",
    Accept: "application/json",
  },
});

// 요청 인터셉터를 통해 Authorization 헤더 추가
axiosInstance.interceptors.request.use(
  (config) => {
    const token = Cookies.get("accessToken");
    if (token) {
      config.headers["Authorization"] = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

export default axiosInstance;

 

3. Zustand를 사용한 사용자 상태 관리

사용자 정보를 상태로 관리하여 클라이언트의 로그인 상태를 유지합니다. 그러나 쿠키에 Access Token을 저장하고 zustand는 사용자 정보만 저장하도록 하여 민감한 정보를 분리합니다.

Zustand Store

import create from "zustand";

export const useUserStore = create((set) => ({
  user: null,
  isAuthenticated: false,

  login: async (loginData) => {
    try {
      const response = await getLogin(loginData);
      const { user, accessToken } = response;
      setAccessToken(accessToken); // Access Token 쿠키 저장
      set({ user, isAuthenticated: true });
    } catch (error) {
      set({ user: null, isAuthenticated: false });
      throw error;
    }
  },

  logout: () => {
    removeAccessToken(); // Access Token 삭제
    set({ user: null, isAuthenticated: false });
  },
}));

 

나아진 점

• 쿠키를 사용하여 Access Token을 관리함으로써 클라이언트 저장소의 보안 문제를 방지했습니다.
• 사용자 정보는 Zustand로 관리하여 새로 고침 후에도 로그인 상태를 유지할 수 있도록 했습니다.
• 민감한 인증 정보는 클라이언트 스크립트로 접근할 수 없게 분리하여 보안성을 강화했습니다.

 

결론

js-cookie를 사용한 방식으로 로그인 상태 관리와 보안 문제를 해결할 수 있었습니다.

백엔드에서 httpOnly 쿠키를 제공하지 않는 환경에서도 클라이언트 측에서 토큰을 안전하게 저장하고, zustand로 상태를 관리하여 새로 고침 시 로그인 상태를 유지할 수 있었습니다.

• 쿠키를 활용해 Access Token을 저장하고, js-cookie로 클라이언트에서 직접 관리.
• Secure, SameSite 옵션으로 보안성을 강화.
• zustand로 사용자 상태 관리하여 로그인 상태 유지.

결과적으로, 사용자의 편리함을 제공하면서 보안을 크게 강화할 수 있게되었다 :)