• ref
• Table Of Contents

조사한 내용

<aside> ✨ Topic (논의해야 할 것)

• 소셜 로그인 flow 그리기
• 토큰은 어디에다가 저장해야 할 지?
• 인증 flow를 어떻게 해결해야 할 지?
• cors 를 어떻게 해결해야 할 지?

</aside>

• 토큰 저장 장소 : LocalStorage || Cookie
  • LocalStorage 의 JWT는 JS를 활용한 Client-Side Fetch 시 HTTP 헤더에 추가하여 사용한다. 쿠키는 모든 요청에 자동 포함되므로 SSR 에서 활용할 수 있다. (두 저장 방식 동시에 사용 가능)
  • LocalStorage와 Cookie에 둘 다 넣고 상황에 따라 맞게 꺼내쓰는 방법도 많이 이용하는 듯

• CORS 이슈가 있는 듯 하다.

  **Note:**For SSR on authenticated pages, it is vital that that the domain of the auth API (and hence the domain of the refresh_tokencookie) is the same as the domain of the SSR server. Otherwise, our cookies won't be sent to the SSR server!

• 확실한 건, SSR 로직에서는 쿠키를 사용해야 한다는 것. 브라우저의 LocalStorage와 동시에 저장을 한다면?

  • 재인증 방식은 어떻게 구현할 것인가? ⇒ axios.interceptor 이용

Mock Data를 이용한 테스트 (feat.MSW)

확인해야 할 것

• [ ] 서버 측에서 프론트엔드로 쿠키 전달하면 어떤 모양으로 전달되는지
• [ ] 프론트엔드 측에서 서버로 쿠키를 전달하면 잘 보이는지
• [ ] Next의 SSR 에서 쿠키 받아보기
• [ ] 쿠키 받아서 로컬 스토리지에 저장하기

로직 구현 시 체크 사항