TIL 2021-09-23 Token Auth NextJS SSR

쿠키 기반  Refresh Token 인증 구현이

 

계속 헷갈렸는데 드디어 어느정도 이해가 되는거 같다.

 

 

 

SSR을 고려해야하는 경우

 

getServerSideProps을 통해서 데이터를 받아와야하는데, 그때 accessToken이 필요한 경우

 

일반적인 경우에는 axios intercepter를 사용한 silent refresh를 통해서 accessToken 업데이트 (localStorage기반과 동일)

 

그렇다면 로그인 유지는 어떻게??

 

 

생각한 방법으로는

 

1. userData가 없고 refreshToken이 남아있을때, _app.tsx에서 이를 감지하여 로드함

 

2. localStoarge에 저장

 

 

정도가 있는데,

 

아무래도 1이 구현에 시간이 조금더 걸리겠지만 깔끔하지 않을까 싶기도 하다.

 

왜냐하면 localStorage에서 initialize하는 것과 refreshToken 쿠키의 만료를 감지하는 것과는 약간의 시간차가 존재할 수도 있는데,

 

이게 변화하는 동안 깜빡이는건 유저경험 측면에서 좋지 않을거라 생각하기 때문이다.

 

 

그리고 이제 로그인했을때만 접속할 수 있는 페이지를 만들어야겠다.

 

 

계속 삽질하며 공부하는 생각은 괜히 NextAuth나 Okta 같은 인증 라이브러리를 도입하는게 아닌가 싶다...

 

보안 쪽 지식과 직접 구현해야하는 이유가 확실한 경우에 하는 것이 실무(한번도 안해봤지만)에서는 낫지 않을까?

 

그러나 공부의 측면에서는 굉장히 알차서 좋은거 같다.

 

Nextjs API... Cookie 등