access token과 refresh token의 작동 방식

이경택·2023년 6월 6일

JavaScript React nodejs 리액트 백엔드

프론트엔드

목록 보기

1/1

accessToken 및 refreshToken 로직

첫 번째 방법 (쿠키 저장 방식)

프론트

회원가입
회원가입 한 아이디, 패스워드로 로그인
서버에서 자동으로 cookie에 액세스 토큰, 리프레시 토큰 저장.
인증 필요할 때만 end point로 인증 요청
1. 쿠키에 액세스, 리프레시 토큰 다 들어 있기 때문에 따로 요청 안해도 됨.

백

로그인 시 쿠키에 액세스, 리프레시 토큰 저장. (db에 리프레시 토큰 저장)
프론트에서 인증 end point로 인증 요청 보내면 쿠키의 액세스 토큰 확인.
1. 만료 되었다면 쿠키의 리프레시 토큰을 유저 db의 리프레시 토큰과 비교
  1. 같다면 새로운 액세스 토큰 쿠키에 저장 및 인증 통과
  2. 쿠키의 리프레시 토큰도 만료되어 없다면 로그아웃(db의 리프레시 토큰 삭제)
2. 만료되지 않았다면 인증 허가

쿠키에 저장 시 사용할 수 있는 옵션

httpOnly: boolean 자바스크립트에서 브라우저의 쿠키값에 접근하지 못하게 막는 옵션
secure 설정 시 https에서만 쿠키를 전달
domain: 도메인(localhost) 설정한 도메인을 대상으로한 요청에만 쿠키 전송
sameSite: none / strict / lax
none: 크로스 사이트 요청의 경우에도 항상 전송
strict: 크로스 사이트 요청에는 항상 전송 불가, 즉 퍼스트 파티 쿠키만 전송
lax: 대체적으로 서드 파티 쿠키는 전송되지 않지만, 예외적인 요청에는 전송

퍼스트 파티 쿠키 / 서브 파티 쿠키란?

사용자가 kt.dev 에 접속 해 있는 상태에서 kt.dev에서 example.com에서 제공하는 example.com/image.jpg를 사용하고 있다고 가정했을 때 사용자는 kt.dev 에 접속 해 있지만 브라우저에서는 example.com/image.jpg 에 요청을 보냄.
이 때 사용자가 example.com 에 대한 쿠키를 가지고 있다면, 해당 쿠키가 example.com서버로 같이 전송. 이 때 전송되는 쿠키를 서드 파티 쿠키라고 함.
즉, 사용자가 접속한 페이지와 다른 도메인으로 전송하는 쿠키를 말함.
반대로 퍼스트 파티 쿠키는 사용자가 접속한 페이지와 같은 도메인으로 전송되는 쿠키를 말함.

두 번째 방법 (액세스, 리프레시 프론트에 전달 방식)

프론트

회원가입
로그인 시 액세스, 리프레시 토큰 발급
로컬 스토리지 혹은 쿠키에 발급 받은 액세스, 리프레시 토큰 저장
인증 요청 시 저장 해 놓은 액세스 토큰 header에 포함하여 요청
1. 액세스 토큰 만료 시 서버에서 인증 불가 응답
  1. 백엔드와 인증 불가 시 응답 코드 맞춰서 인증 불가 코드 왔을 때 리프레시 토큰으로 새로운 요청
  2. 리프레시 토큰 유효하다면 서버에서 액세스 토큰 재발급
  3. 리프레시 토큰 유효하지 않다면 로그아웃 및 재 로그인
2. 액세스 토큰 유효 시 서버에서 인증 허가 처리

백

로그인 시 액세스, 리프레시 토큰 발급
인증 요청 시 header의 액세스 토큰 확인
1. 만료 되었다면 프론트와 맞춘 인증 불가 응답 코드 리턴
  1. 리프레시 토큰 포함 재 요청시 헤더의 리프레시 토큰 db의 리프레시 토큰과 비교
    1. 리프레시 토큰 유효하다면 액세스 토큰 재 발급
    2. 리프레시 토큰 만료 되었다면 로그아웃 처리 및 db의 리프레시 토큰 삭제
2. 만료되지 않았다면 인증 허가 처리