[#649] SSR을 위해 JWT 토큰을 쿠키에 저장하도록 수정

[gxxrxn]

구현 내용

• localStorage에서 관리하던 accessToken을 세션 쿠키를 통해 관리하도록 수정했어요.
  • next server action을 통해 세션 쿠키를 관리하는 함수들을 추가했어요. /server/session.ts
  • DID_PUI 쿠키를 통해 클라이언트 컴포넌트에서는 auth 여부를 확인해요.
• jwt 토큰 유효성 검사를 위해 jose 라이브러리를 추가했어요.
  • jwt 사이트에서 소개하고 있는 js로 작성된 라이브러리예요. 참고
• 재사용되는 cookie, search paramter, secret key 값들은 constants 폴더에 상수화했어요.
  • auth 관련 세션 쿠키 키는 약간의 난독화(?)를 위해 DID라는 prefix를 붙이고, 상수의 의미를 3글자로 줄여 표현해봤어요!
• /profile/redirect route handler를 추가했어요.
  • 추가 프로필 정보가 설정되어 있는지 여부를 담고 있는 cookie(DID_PAF)를 확인하고, 조건에 따라 리다이렉션을 수행해요.
  • 프로필이 추가되었을 때 최종적으로 리다이렉팅할 pathname을 search parameter로 전달받아요.
• middleware, cookie를 사용하여 프로필이 등록되지 않았을 때 추가 프로필 등록 페이지로 리다이렉션되는 기능을 구현했어요.
• 백엔드 API 호출을 위한 proxy 설정을 middleware에서 수행하도록 수정했어요.
  • cookie에서 accessToken을 꺼내서 http Authorization header에 추가해요.

공유할 내용

📣 env를 업데이트해주세요!

DADOK_AUTH_SESSION_KEY=
JWT_SECRET_KEY=

Help

• auth 여부를 localStorage에 의존하고 있었다보니, 클라이언트 컴포넌트에서 auth 인증 여부를 확인할 수 있는 방법이 필요했어요.
  • 그래서 우선은 서버에서 httpOnly가 적용되지 않은 user id 쿠키를 설정하고(DID_PUI), 클라이언트 컴포넌트가 document를 통해 접근할 수 있도록 구현했어요.
  • 서버에서 생성한 쿠키를 클라이언트와 공유한다는 것이 바람직하진 않은 것 같아요. 😭 이 부분은 클라이언트 컴포넌트를 서버 컴포넌트로 수정해가면서 제거해야할 것 같습니다..
• 완전한 CSR에서 SSR을 도입하기 위해 초석을 다지는 과정 중에.. 불안정한 부분들이 많아요..😢 더 공부해서 안정적인 구조로 수정해보겠습니다! 🙇🏻‍♀️

관련 이슈

• Close SSR을 위해 JWT 토큰을 쿠키에 저장하도록 수정 #649
• Close 회원가입 후 프로필 등록 페이지로 이동이 안되는 이슈 #637
• Close 추가정보가 없는 사용자는 프로필 동록 페이지로 이동 #534

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dadok	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 10, 2024 2:52pm

[github-actions]

🚀 Storybook: https://64aba10cd478ad51307a8997-pdumacavbx.chromatic.com/

[github-actions]

⚡️ Lighthouse Average Scores Across Reports:

Category	Score
🔴 performance	65
🟢 accessibility	91
🟢 best practices	98
🟢 seo	100
🟢 pwa	100

⚡️ Average Details Across All Reports:

Category	Score
🟢 first contentful paint	0.8s
🔴 largest contentful paint	12.8s
🔴 interactive	7.8s
🟢 total blocking time	287.6ms
🟢 cumulative layout shift	0.0

[hanyugeon]

1주일동안 정말 쉽지 않은 테스크였음에도 불구하고
잘 구현해 주신것 같아요!! 정말 고생하셨습니다!!!! 💯
(코드도 가독성 있게 잘 작성해주셨고 주석도 도움이 많이 되었어요 👍 )

몇가지 코멘트 남겨놓았으니 편하게 확인해주시면 될것같아요 🙌

그리고 지금 당장 수정하고 구현해야할 사항은 아니지만
저희가 잊고 넘어갈 수 있을 것 같아 바로 밑에 몇 가지 생각나는 부분을 적어볼게요!

• 존재하지 않은 /profile/[id] 접근시 에러 페이지 처리
• KAKAO_LOGIN_URL의 redirectURI 수정
• 추가 프로필 등록이 필요할 것 같은 페이지 고민해보기

[hanyugeon]

짱 고생하셨습니다!!!! 💯