[React Native] Access Token 과 Refresh Token

 

 

 

로그인 구현하는 김에 토큰의 종류도 함께 알아보자!

 

단순히 "로그인을 하면 발급받는 토큰을 저장해두고,

해당 토큰을 사용하여 사용자의 로그인 상태를 관리한다" 정도로만 알고 있기에

이번 기회에 더 정확히 알고 사용하자는 다짐 .. ✍

 

 

 

---

 

 

JWT

JSON Web Token

 

모바일이나 웹의 사용자 인증을 위해 사용하는 암호화된 토큰을 의미한다.

자세히 말하면, JSON 포맷을 이용해 사용자에 대한 속성을 저장하는 Claim 기반의 웹 토큰이다.

이는 토큰 자체를 정보로 사용하는 self-contained 방식으로 정보를 안전하게 전달한다.

 

JWT 정보를 request 에 담아 사용자 정보 열람, 수정 등 개인적인 작업을 수행할 수 있도록 한다.

 

💫 JWT 구조

• Header : Signature 서명 값을 만드는 데 사용될 알고리즘 지정
• Payload : 토큰이 가지는 데이터
• Signature : Header 에 정의된 알고리즘을 통해 암호화된 비밀 값 (서버만 알고 있음)

 

이러한 토큰이 로그인 시에 accessToken, refreshToken 두개가 부여된다.

 

 

 

---

 

AccessToken / RefreshToken

ㆍ AccessToken : 사용자를 인증하고 API 호출 권한을 부여하는 JWT

보안을 위해 유효기간이 매우 짧다.

 

ㆍ RefreshToken : AccessToken 을 갱신하는 데 사용하는 JWT

일정 기간 동안 인증을 거치지 않고 갱신하게 해주므로 보다 긴 유효기간을 가진다.

 

💫 JWT 시나리오

(1)

로그인을 하면 Access Token 과 Refresh Token 을 모두 발급한다.

=> Refresh 만 서버측 DB 에 저장하며, RefreshㆍAccess 를 쿠키에 저장한다.

 

(2)

사용자가 인증이 필요한 API 에 접근하고자 하면, 가장 먼저 토큰을 검사하는 미들웨어를 검사한다.

=> 토큰을 검사함과 동시에 각 경우에 대해 토큰의 유효기간을 확인해 재발급 여부를 결정한다.

• case1 : Access 와 Refresh 모두 만료된 경우 / 에러 발생
• case2 : Access 는 만료됐지만 Refresh 는 유효한 경우 / Access 재발급
• case3 : Access 는 유효하지만 Refresh 는 만료된 경우 / Refresh 재발급
• case4 : Access 와 Refresh 모두 유효한 경우 / 다음 미들웨어로!

(3)

로그아웃 시, Access 와 Refresh Token 모두 만료시킨다.

 

 

 

 

이러한 토큰들을 React Native 에서는 AsyncStorage 와 같은 저장소에 넣어두고 사용한다.

AsyncStorage 는 Redux 와 달리 디바이스에 데이터를 저장하기 때문에, 더 유용하게 사용 가능하다.

간단하게 아래와 같은 프로세스로 진행된다고 생각하면 된다!

 

 

 

 

 

 

© 참고

https://mangkyu.tistory.com/56 (Server / JWT에 대하여)

https://velog.io/@syoung125/JWT-%ED%86%A0%ED%81%B0%EC%9D%B4%EB%9E%80 (세션을 대체할 JWT)

https://cotak.tistory.com/102 (Access Token & Refresh Token 인증 구현)

[Node.js] JWT: Access Token & Refresh Token 인증 구현