1. 로그인 로직
저희 서비스는 기본 폼 로그인과 소셜 로그인이 있습니다.
소셜 로그인 시, 서버에서 리다이랙트 주소를 전달해주어 구글 회원가입폼 페이지로 이동하게 됩니다.
회원가입폼에서는 사용자의 기본 정보들을 입력 받습니다. 이중, 주소 정보는 kakao의 우편번호 주소 서비스를 활용하였습니다.
로그인 성공시, 서버에서 쿠키에 refreshToken을 담아줍니다.
이에 accessToken을 어떻게 관리해야하는가에 대해 고민하게 되었습니다.
2. 토큰 관리
2.1 토큰을 전역 변수로 관리
현재 토큰과 관련된 API는 쿠키에 담긴 refreshToken을 기반으로 accessToken 발급을 요청하는 POST API가 있습니다.
이를 통해 accessToken을 받아와 다른 API 요청 헤더에 담아 주어야했습니다.
이 accessToken을 localhost에 넣으면, XSS 문제가 발생하여 보안상으로 부적절하다고 판단하였습니다. 또한, 전역적으로 accessToken을 접근하고자 전역 변수로 관리하기로 결정하였습니다.
2.2 전역 변수로 담아둔 후 문제 발생
전역 변수로 담기 위해 zustand를 활용하였는데, 이렇게 하게 되니 새로고침을 하거나 페이지를 이탈했다가 돌아오면 전역 변수가 초기화가 되어 계속 로그인이 풀리는 상황이 발생하였습니다.
로그인이 풀려, 다른 API 요청시, 헤더에 accessToken의 초깃값인 null이 들어가고 오류가 발생하였습니다. 이를 방지하고자 zustand의 persist에 토큰을 둘 것을 고려하였지만, zustand persist는 localStorage 같은 브라우저 저장소를 사용하는 방식으로, XSS 위험이 있었습니다.
2.3 axios를 수정
결국, accessToken은 기존 방식대로 Zustand로 관리하되, API 요청을 보내기전, 현재 accessToken이 null인지 확인하고 null이면 서버에 accessToken발급 요청을 보내도록 axios를 수정하였습니다.