서론
이전에는 <내가 편한 개발>에 포커싱이 맞춰져있었다.
그에따라 로그인해서 받아오는 토큰값같은것은 SessionStroage 나 LocalStrorage에 저장을 해왔었는데,
"모든 코드에는 이유가 있어야 한다"
최근들어서 깨닫게된 성장에 근간이 되는 원칙 인 것 같습니다.. 이에 따라 매번 해오던 이 로그인 방식에서 탈피하고자 react-cookie라는 것을 Auth에 이용해보려고 합니다.
이번에 사용할 방식은 react-cookie를 통해서 쿠키로 관리해주는 방식입니다.
세션 스토리지에서 쿠키로의 전환 필요성
세션 스토리지는 사용하기 쉽고 브라우저 탭이 닫힐 때까지 데이터를 유지하지만, 서버와의 상호작용이 필요한 경우 적합하지 않을 수 있습니다. 반면, 쿠키는 HTTP 요청에 자동으로 포함되어 서버와 클라이언트 간의 인증 정보를 안전하게 관리할 수 있습니다.
react-cookie 설치 및 기본 설정
먼저, react-cookie 를 설치해줬습니다.
디테일한 내용은 react-cookie 소개 에서 확인할 수 있습니다 !
npm install react-cookie그리고 쿠키를 관리하기 위한 기본적인 함수를 설정해줬습니다.
저는 api 폴더에 cookie.js를 생성한 뒤 다음과 같이 설정을 해줬습니다.
//cookie.js
import { Cookies } from "react-cookie";
const cookies = new Cookies();
export const setCookie = (name, value, options) => {
return cookies.set(name, value, { ...options });
};
export const getCookie = (name) => {
return cookies.get(name);
};react-cookie의 CookiesProvider 적용
react-cookie 라이브러리를 통해 쿠키를 관리할 때는 애플리케이션의 최상위 컴포넌트를 CookiesProvider로 감싸줘야합니다.
Context나 여타 상태관리 라이브러리들 처럼요!
예시 App.jsx
import { Outlet } from "react-router-dom";
import { CookiesProvider } from "react-cookie";
function App() {
return (
<CookiesProvider>
<Outlet />
</CookiesProvider>
);
}
export default App;세션 스토리지에서 쿠키로 로직 변경하기
이제 로그인 로직에서 세션 스토리지 대신 쿠키를 사용하도록 변경해보겠습니다.
변경 전 코드 (세션 스토리지 사용):
sessionStorage.setItem("access_token", response.data.access_token);
sessionStorage.setItem("refresh_token", response.data.refresh_token);변경 후 코드 (react-cookie 사용):
setCookie('access_token', response.data.access_token, { path: '/', secure: true, sameSite: 'lax' });
setCookie('refresh_token', response.data.refresh_token, { path: '/', secure: true, sameSite: 'lax' });뒤에 따라오는 옵션 ,
{ path: '/', secure: true, sameSite: 'lax' }에 대하여..쿠키 옵션 이해하기:
path,secure,sameSite속성
-
path속성
쿠키가 사용될 수 있는 경로를 지정
일반적으로path: '/'이 설정은 쿠키가 웹사이트의 모든 페이지에서 사용될 수 있음을 의미합니다. 특정 페이지나 경로에만 쿠키를 제한하려면, 해당 경로를path값으로 설정할 수 있습니다. -
secure속성
쿠키가 HTTPS 프로토콜을 통해서만 전송되어야 한다는 것을 나타냅니다.secure: true로 설정하면, 쿠키는 암호화된 연결을 통해서만 전송됩니다. 중요한 정보를 담았을 때 사용 -
sameSite속성
sameSite속성은 쿠키가 크로스 사이트 요청과 함께 전송되는 방식을 제어합니다. 이 속성에는 주로Lax,Strict,None의 세 가지 값이 사용됩니다.
sameSite: 'Lax': 사용자가 직접 행동을 취한 경우에만 쿠키를 전송합니다.(내가 getCookie로 받아오기 위함) - CSRF 공격에 대한 보호를 강화하는 설정sameSite: 'Strict': 쿠키는 오직 같은 도메인의 요청에서만 전송sameSite: 'None': 모든 크로스 사이트 요청에서 쿠키를 전송합니다.secure: true와 함께 사용
쿠키 받아오기 getCookie
Axios 인터셉터에서도 세션 스토리지 대신 쿠키를 사용하는 방법으로 변경합니다.
변경 전 코드 (세션 스토리지 사용)
const token = sessionStorage.getItem("access_token");변경 후 코드 (react-cookie 사용):
const token = getCookie('access_token');
