2년 전 · 익명 님의 새로운 댓글
Next.js(13.4.0) 모든 페이지에서 토큰 유/무 판단하기
현재 signup, signin, home, save, mypage 총 5개의 페이지가 있습니다. home, save, mypage에서 refresh-token의 존재 유/무에 따라서 signin 경로로 redirect 시키려고 합니다. 로그인을 하면 localStorage에 access-token 저장, browser cookie에 refresh-token이 저장됩니다. 로그인 후에 임의로 refresh-token 값을 지웠을 때, signin 경로로 redirect 시켜주기 위해 각 페이지에서 getServerSideProps를 사용하여 refresh-token의 존재 유/무를 판단하여 redirect를 시켜주고 있습니다. 현 상황처럼 각 페이지에서 인증을 처리하는 것이 아닌 모든 페이지에서 공통으로 인증을 처리하는 방법이 있는지 궁금하여 질문드립니다.
개발자
#next.js
#typescript
#인증
답변 1
댓글 1
조회 520
일 년 전 · 상현 님의 답변 업데이트
Next.js server component(app router)의 auth 관련 질문 입니다.
안녕하세요. 이번에 Next.js(13)에서 최신 기술인 app router를 기반으로 자그마한 홈페이지를 구축 중에 있습니다. JWT 기반으로 SSR을 구축하고 있습니다. middlware로 어떻게 든 토큰 재발행이 가능한 로그인 구현을 완료 했습니다. 하지만 ServerComponent이다 보니, RSC에서 accesstoken 혹은 refreshtoken과 같은 인증 토큰이 만료 되었을 때, 재 발행을 하려면 어떻게 해야 할까요? cookie나 header는 접근은 가능해도 Set-Cookie를 내려 보내거나 할 수는 없는 걸로 문서에 나오고 실제로도 되지 않습니다. 어떻게 하면 ServerComponent에서 토큰을 재발행 하거나 다른 인증 방법이 있을 까요? 아니면 JWT + Session으로 가는 조합을 사용 해야 할까요??? 또, client와 server 간의 토큰 공유를 위해 access-token만 http-only를 해제하고 사용 중에 있습니다. 이게 cors나 csrf와 같은 공격에 취약한 문제가 있어서 이게 올바른 구현 방법일까요? 일단 제가 찾은 방법으로 가장 쉽게 해결되는 방법은 아직 실험 단계인 server action을 활성화 해서 클라이언트에서 토큰을 가지고 있을 필요가 없이 서버에서만 관리 하는 방법입니다. BFF을 일부 수용해서 해결 했습니다. front <-> BFF <-> api
개발자
#next.js-13
#oauth2.0
#jwt
답변 3
댓글 1
추천해요 1
조회 1,210