[React] JWT를 이용한 로그인 흐름

사용자가 로그인을 하면, 서버에서 해당 계정 정보를 확인해 유효시간이 있는 JWT 토큰을 발급한다. 해당 사용자는 유효시간이 끝날 때까지, 인증이 필요한 요청마다 해당 JWT 토큰을 http 헤더에 넣어 서버에 요청을 한다. 서버에서는 해당 JWT 토큰이 유효한지 확인하고 정보를 전달한다.

 

1. 사용자가 username, password로 로그인을 한다.
2. 서버는 해당 계정 정보를 읽어 사용자가 있는지 확인을 하고, JWT 토큰을 발급한다. 이때, JWT 토큰에 사용자의 고유한 ID값을 부여한 후, 기타 정보와 함께 Payload에 넣고 토큰의 유효 기간을 설정한다.
3. 서버는 secret_key를 이용해 Access Token을 발급하고, 해당 JWT 토큰을 브라우저에게 전달한다.
4. 사용자는 Access Token을 받아 저장한 후, 인증이 필요한 요청마다 Authorization 헤더에 토큰을 실어 보낸다.
5. 서버는 secret_key를 이용해 해당 토큰의 Verify Signature를 복호화한 후, 조작 여부와 유효기간을 확인한다.
6. 검증이 완료되면 Payload를 디코딩하여 사용자 데이터를 전달한다.

 

✅ 세션 인증 vs JWT 토큰 인증

JWT 토큰 인증은 자주 사용되는 세션/쿠키 인증 방식과 차이가 있다. 세션/쿠키는 세션 저장소에 유저의 정보를 넣는 반면, JWT는 토큰 안에 유저의 정보들을 넣는다. 클라이언트 입장에서는 HTTP 헤더에 세션 id, 혹은 토큰을 실어서 보내준다는 점에서는 동일하게 동작하나, 서버 측에서는 인증을 위해 암호화를 하냐(JWT), 별도의 저장소를 이용하냐(Session)는 차이가 발생한다.

 

✅ JWT 토큰 인증의 장단점

장점

- 구현하기 간편하다. 세션/쿠키처럼 별도의 세션 저장소가 필요하지도 않고, 그냥 암호화된 토큰만 발급하면 된다.

- 또한, 별도의 저장소가 없기 때문에 서버 유지 보수 및 확장에 용이하다.

- 확장성이 좋다. 토큰 기반으로 하는 다른 인증 시스템에 접근이 가능하기 때문이다. 구글, 페이스북 같은 oauth 인증 로그인도 토큰 기반 인증이다.

 

단점

- JWT 토큰이 악의적으로 사용된다면 막을 방법이 없다. 세션/쿠키의 경우 악용되는 세션을 지워버리면 되지만, JWT 토큰은 유효기간이 끝날때까지 누구든지 사용이 가능하다. 

- 토큰에 저장할 수 있는 정보가 제한적이다. Payload는 누구나 디코딩 할 수 있기 때문에 중요정보는 넣을 수 없다. 

- 세션/쿠키 방식에 비해 JWT의 길이는 매우 길다. 따라서 인증이 필요한 요청이 많아질수록 서버의 자원낭비가 발생한다.

 

 

👇 JSON에 대해 더 알고 싶다면 

[React] 리액트 JWT (JSON Web Token)