React - Cookie 쉬운 사용법

Prologue

회원가입, 로그인, 로그인 유지와 관련한 인증(Auth) 기능을 구현하기 위해서 백엔드로부터 응답받은 refreshToken, accessToken과 같은 JWT Token을 쿠키 또는 localStorage에 저장하는 과정이 일어 납니다. 보안 관련 이슈 때문에, JWT Token 중 refreshToken을 localStorage보다는 cookie에 저장하고, accessToken을 private 변수로 설정 후 해당 accessToken이 만료될 때마다, Cookie에 담겨 있는 refreshToken을 백엔드에 다시 요청을 보낼 때 header에 담아 보내어, 다시 refreshToken과 accessToken을 받아오는 일련의 과정으로 인증 관련 유지를 합니다.
React를 사용하면서, cookie를 저장할 때 쉽게 저장하고 꺼내오는 방법으로 react-cookie를 활용하는데요. 어떻게 사용하는 지 알아보겠습니다.

패키지 다운

npm install react-cookie

yarn add react-cookie

쿠키와 관련된 함수 만들기

일반적으로 컴포넌트에 cookie를 설정하고, cookie를 쉽게 가져오기 위해서 유틸함수로 따로 관리하고, import하는 방법으로 사용됩니다.

import {Cookies} from 'react-cookie';

const cookies = new Cookies();

export const setCookie = (name: string, value: string, options?: any) => {
 	return cookies.set(name, value, {...options}); 
}

export const getCookie = (name: string) => {
 return cookies.get(name); 
}

CookiesProvider

redux를 사용해 보셨다면, store에 저장된 전역 상태를 모든 컴포넌트에서 사용하기 위해서 App.tsx 또는 Index.tsx 등에서 하위 컴포넌트를 Provider로 감싼 형태로 코드를 구성하듯이, Cookies에도 provider가 존재하여, redux를 사용할 때와 마찬가지로 하위 컴포넌트를 감싸주는 형식으로 작성해주면 됩니다.

import {CookiesProvider} from 'react-cookie';

ReactDOM.render(
	<CookiesProvider>
  		<App/>
  	</CookiesProvider>
  document.getElementById('root')
)

Cookies Util 사용하기

1. 백엔드에 로그인 요청 후, 사용자에 대한 정보와 refreshToken을 쿠키로 받을 때

// redux toolkit과 rtk query을 활용한다고 가정합니다.

const handleSubmit = async () => {
  const response = await signIn({email: email, password: password}).unwrap();
  
  const {email, nickname, refreshToken} = response;
  if(refreshToken){
    setCookie('refreshToken', refreshToken, {
      	path: '/',
      	secure: '/',
      	expires: new Data().getMinutes() + 1;
    });
  }
  
}

path : 쿠키의 값을 저장하는 서버 경로로, '/'일 경우 모든 페이지에서 쿠키에 접근할 수 있도록 설정할 수 있다.
secure : true인 경우에는 https로 통신할때만 쿠키가 저장된다.
httponly : document.cookie와 같은 자바스크립트 코드로 접근할 수 없도록 일종의 private 처리를 해준다.

2. 백엔드에 회원정보 획득 요청을 보낼 때 header에 refreshToken을 담아 보내는 경우

일반적으로 보안상의 이유로 set-cookie header에 담아 보내곤 합니다.

// rtk query 사용을 가정합니다.

requestUserInfo: builder.mutation<RefetchUserResponse, string>({
      query: (refreshToken: string) => ({
        url: 'members/profiles/info',
        method: 'POST',
        headers: {
          RefreshToken: `Bearer ${getCookie(refreshToken)}`,
        },
      }),
    }),

Conclusion

인증과 관련되어 JWT Token을 어떻게 저장하고, 가져다 쓸 수 있는 지 정리해보았습니다. 전반적인 인증과정을 다루진 않고, cookie에 대한 부분만 다뤘지만, cookie와 rtk, rtk-query를 활용할 때 도움이 되시면 좋을 것 같습니다.