.gif&blockId=668cc2fd-0ce8-430e-affa-009caec551f8)
화면
.gif&blockId=7af75a9c-22bc-4c8f-bd81-bf6193371b7b)
배경
사용자 정보를 보안 공격(CSRF, XSS, Hijacking 등)에 대해 안전하도록 보관 및 유지하기 위해 JWT 토큰 인증을 설계.
구현한 기능
•
BE
앞서 사용자 정보를 가져오는 OAuth 2.0 기능과 연동해 해당 사용자 정보를 통한 JWT 토큰을 발급하는 방식으로 구현하였습니다.
JWT 인증 필터를 이용하여 JWT를 사용하지 않는 몇몇 인증 과정을 제외하고 모든 인증 과정에 있어 자동적으로 토큰의 유효성 검사를 하도록 설정하였습니다.
JWT Access Token을 생성할 시 Refresh Token을 같이 생성해 서버 측에 저장하고, API를 호출하기 전에 토큰이 만료되었는지 검사 후 만료되었으면 서버에 저장된 Refresh Token을 재차 검사해 유효할 시 Access Token을 재발급하는 로직을 구현하여 보안성을 강화하면서도 인증을 다시 하지 않아도 되도록 편의성을 갖추도록 구하였습니다.
•
FE
JWT는 개인 정보이므로 보안을 위해 recoil atom에 access token을 저장 및 관리했습니다.
store는 페이지가 새로고침되면 휘발되는 정보이므로 recoil Effects를 사용해 전역관리가 필요한 사용자의 데이터를 스토리지에 저장해 관리했습니다. 이를 통해 사용자 경험에 영향을 주지 않고 토큰 만료 및 재발급 과정을 처리할 수 있습니다.
axios interceptors를 이용해 모든 API 요청으로부터 토큰의 만료시간의 경과 여부를 검사하고, 만료시간이 지난 토큰으로 API 요청이 들어간다면, 요청을 중 새로운 토큰을 발급받아 요청하고 저장합니다.
405 error(리프레시 토큰 만료)가 떨어지는 경우 로그아웃 처리합니다.