로그인, 회원가입 Refresh Token 구현하기! + local storage, access EP.6

오늘은 아침에 일어나 하루 종일 Refresh Token에 매달렸다ㅎㅎㅎㅎ

아침에 일어나서 어제 봤던 JWT와 Token 자료들을 훑어보고 점심 지나 시작하려했지만 진짜 어떻게 시작을 해야할지 몰라서 리더님께 도움좀 청하고 큰 틀과 'setTimeout은 일단 두고 토큰 두개가 받아오는지부터 확인하시죠' , 코드는 블로그에서 이 부분을 사용하시면 금방 하실걸요? 와 함께 시작했는데 또 조언 몇번 받으니까 매끄럽게 풀리는 느낌이었다.

 

서버오류 500과 함께 백엔드에 서버문의를 드리고 요청과 응답 부분을 합의하면서 나도 오류 몇개 고쳐보고 진행하니 오래 걸리지않고 토큰을 받아오게 되었다! 그리고 타이머를 걸어 토큰만료 1분 전에 새로운 토큰을 받아오게 세팅했다.

 

아 그전에 아침부터 읽었던 JWT와 토큰, 그리고 refresh에 대한 정의를 담은 블로그를 첨부해놓았다!!

관심있는 링크 클릭하시길 다들 정리를 넘나 잘하셨음.

https://mothercargasoline.tistory.com/111

JWT, Access, Refresh Token

 

첫 시작은 블로그( 아래링크 )에서 사용할 코드를 가져오는것부터 시작했다. 아직 백지에서부터 쓰지는 못한다..

그렇게 가져온 코드는

밑줄친 부분들이다ㅎㅎ 코드는 이렇다

기존 instance에 access token과 url이 들어있기 때문에 중복된 부분은 지웠고 setTimeout은 한시간에서 일 분을 뺀 59분으로 설정하였다. 혹시나 만료가 되고나서 재발급 받으면 타이밍 안좋게 페이지가 안뜰 수 있어 1분을 여유시간으로 빼놨다.

 

그리고 기존 다른 블로그는 조금 더 보안에 신경쓰고자 쿠키에서 httpOnly에다가 refresh token을 넣는데 우리는 일단 로컬스토리지에 2개 토큰 다 넣고 사용 중이다. 추후에 samesite와 더불어 쿠키로 방식을 변경할것 같기는 하다.

그렇게 되면 따로 요청을 안해줘도 http에 refresh가 같이 들어간다면 지금과 크게 달라질게 없지만 혹시 모를 로컬공격에는 대비할 수 있겠다.

그리고 타이머가 로그인 된 이후에 시작을 해야하기 때문에 요청 부분에 같이 넣었다.

 

---

 

계속 코드를 작성하면서 refresh 토큰을 하면서 헷갈리는 부분이 있었다.

API 명세서에서 헤더에 ”Authorization” : ” refreshToken” 을 달라고 했는데 현재는 헤더에 액세스만 담아도 잘 작동이 된다.

그래서 refresh를 헤더에 담으려고 axios 파일을 하나더 만들고 되게 비효율적이게 진행을 해보았다

axios refresh 요청용 파일

이렇게 instance 대신 refresh를 사용해서 헤더 값을 바꿔 진행했다. 그러면서 궁금한 부분은 이렇다.

 

1. 토큰은 만료되면 삭제되나 ?? = 한 번 생성된 토큰은 제거되지 않는다.

이것도 모르고 처음에 시도했던게 이거다 . 당연히 토큰이 만료되면 알아서 제거되지 않을까?? 왜냐면 컴퓨터는 똑똑하니깡

그래서 위에 axios refresh 파일로 실험해본것들이다 위에 처럼 refresh를 사용해서 헤더에 토큰을 보내면

삭제시에 access token을 삭제해도 재발행이 잘된다. 그렇다는것은 refresh token이 제 할일을 하고 있다는 뜻으로 봤다.

그래서 당연히 액세스토큰을 제거하고 재발행 되는 상황을 만들어야한다 생각해 계속 이리저리 백엔드분과 머리를 썼다.

 

처음에는 이렇게 아래 서렁에서 리프레시를 담아가  onLoginSuccess에 놨지만 헤더에 담기는게 아니니 효과는 없었다.

그렇다고 각각 axios에 헤더와 url 길다란 주소를 써주니 코드가 복잡해져서 보기 시르다ㅠㅠㅠ

 

근데 결과적으로 일단 생성된 토큰은 제거되지 않기 때문에 우리가 굳이 토큰을 제거하면서 테스틀 할 필요가 없었다. 하지만 다음에 제거와 재발행에 대한 트러블이 생긴다면 다시 위에 새로운 axios 파일을 만드는걸로 실행시켜 보겠다.

 

 

 

 

두가지 실험 결과

헤더에 엑세스를 담으면 리프레시를 지우고 재발행이 되지만 액세스를 지우고는 안된다.

헤더에 리프레시를 담으면 액세스를 지우고 재발행이 되지만 리프레시를 지우고는 안된다.

= 이게 맞다. 이론상이면 리프레시 토큰이 남아있어야하고 계속 이용하며 액세스를 발행 받을때만 같이 교체 시켜주는게 좋다.

 

 

근데 아직 좀 찝찝하긴 하다 이렇게 refresh를 헤더에 담아 보낸 방식이 맞다면
파일을 하나 더 만들필요가 있을까?? 좀 더 효율적으로 작성하려면??
그리고 후에 도메인이 나오면 samesite와  refresh token의 httponly 쿠키화를
해야된다고 생각하니 또 두근둑은 하기도 하고 또 막힐걸 생각하니 짠하다. 아자아자!!

추가로 리더님이 제 코드를 보고 몇가지 피드백 주신 사항을 간단하게 반성, 정리해보았다.

https://mothercargasoline.tistory.com/113

redux 코드 사용 관련 팁들. 내가 잘못한 것들에 대한 피드백

 

 

 

https://velog.io/@yaytomato/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%90%EC%84%9C-%EC%95%88%EC%A0%84%ED%95%98%EA%B2%8C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0

🍪 프론트에서 안전하게 로그인 처리하기 (ft. React)