출처: 러닝 리액트: 최적의 리액트 코드를 작성하기 위한 모범 사례와 패턴

쿠키에 refreshToken만 저장하고 새로운 accessToken을 받아와 인증에 이용하는 구조에서는 CSRF 취약점 공격을 방어할 수 있다. refreshToken으로 accessToken을 받아도 accessToken을 스크립트에 삽입할 수 없다면 accessToken을 사용해 유저 정보를 가져올 수 없기 때문이다.
httpOnly 쿠키 역시 refreshToken만 저장하고 accessToken을 받아와 인증에 이용하는 구조로 CSRF 공격 방어가 가능하다.
출처: 프론트에서 안전하게 로그인 처리하기

1. 리액트 폼 유효성 검사

2. axios를 사용한 리액트 로그인 인증

3. Role 기반 리액트 라우트 보호

4. JWT(Access/Refresh Token) 방식을 이용한 인증 절차

   • Access Token: Sent as JSON

     • Client stores in memery
     • Do NOT store in local storage or cookie
     • Issued at Authorization
     • Client uses for API Access until expires
     • Verified with Middleware
     • New token issued at Refresh request

   • Refresh Token: Sent as httpOnly cookie

     • Not accessible via JavaScript
     • Must have expiry at some point
     • Issued at Authorization
     • Client uses to request new Access Token
     • verified with endpoint & database
     • Must be allowed to expire or logout

5. 지속 가능한 JWT Tokens 인증

6. 로그인 폼에 커스텀 훅 적용