웹사이트에서 권한이 필요한 동작을 하기 위해서는 로그인이 필요하다.
로그인을 하게되면 유지해야 되는 값 (ex: token) 들을 저장해서 가지고 있어야 하고 어떤 방식을 선택해야 할지 고민하게 되었다. 이번에 업무중 고민하면서 선택한 방법을 작성한다.
상황
먼저, 업무중 생긴 상황이 있었는데 로그인 상태 유지 여부를 체크하는 체크박스를 로그인할 때 추가해서 로그인 유지 여부를 선택할 수 있는 기능 추가가 필요한 상황이었다.
체크박스 체크 => refreshToken 만료 전까지 로그인 유지
체크박스 해제 => 1시간 로그인 유지
현재 aws cognito 를 연동해서 사용하고 있고 아쉽게도 공식 라이브러리는 그리 친절하기 않았다.
로그인을 하면 자동으로 refreshToken, accessToken, idToken 이 localStorage에 저장되는 악랄한 녀석이다...
물론 더 작은 단위를 지원하는 라이브러리가 있는 것으로 알고 있는데 라이브러리에 엮인게 좀 있어서 라이브러리는 그대로 유지하는 것으로 했다.
해결 과정
원래는 idToken을 cookie에 세션으로 옮겨와서 jwt 만료 기간이 지나기전에 다시 토큰을 리프레쉬 해서 로그인을 유지하고 있었다.
이런식으로는 refreshToken 만료전까지 로그인 유지가 가능하고, 1시간 유지는 불가능했다. 더군다나 세션이라 브라우저 종료시 토큰이 없어졌다.
Session cookies => Expries, Max-Age 미설정
- 브라우저가 켜져있는 동안 유효하고 끄고 다시 켜면 없어짐
Permanent cookie => Expries, Max-Age 설정
- 브라우저를 껐다 켜도 유지됨
cookie 기간 설정은 Expries와 Max-Age가 있음
그래서 jwt 만료 기간이랑은 별개로 max-age를 cookie에 부여해서 로그인을 유지하려고 한다.
setCookie('id_token', idToken, {
path: '/',
maxAge: isMaintainLogin ? 2592000 : 3599,
}); 로그인 유지 체크 여부를 확인해서 max-age 를 다르게해서 토큰을 넣어주고
3600초마다 id_token을 리프레시 하는 방법으로 하게되었다.
체크를 한 경우 2592000초( 30일 )의 만료 시간을 줘서 2592000초가 지나기 전에, 즉 refreshToken이 만료되기 전까지는 갱신 되어 다시 토큰 기간이 연장되고,
체크를 안한 경우 3599초가 지나면서 토큰이 사라져 로그아웃 된다.
해결중 발생한 이슈
처음에는 어차피 localStorage에 토큰값이 전부 저장되어 있어서 localStorage와 cookie를 같이 사용해서 localStorage로 로그인을 유지하려고 했는데 nextJs ssr에 문제가 발생했다.
getServerSideProps에서 api를 호출하려면 서버에 token이 있어야하는데 cookie로만 사용할 수 있어서 localStorage를 사용할 수 없다고 판단하고 cookie로 변경하게 되었다.
글 작성을 마치며 프로젝트를 시작할 때 로그인 유지 작업을 철저하게 했으면 좋았겠다고 생각이 매우매우 들었다.
