[Next] Session 인증 방식을 사용한 로그인 & SSR 관련 Issue

최근 NextJS로 SSR을 적용한 회사 프로젝트를 진행하며, Session 인증 방식을 사용하여 로그인을 할 때, 클라이언트에 쿠키 정보가 저장되지 않아 getServerSideProps 함수를 사용하여 SSR를 할때 문제가 생기는 Issue가 있었다.

 

[문제 발생]

1. API 호출시 사용자 로그인 여부 확인 불가 (클라이언트에 쿠기값이 없음) 
2. getServerSideProps 사용자 정보가 필요한 API 호출시 사용자 정보 없음 -> 오류  ->  특정 정보 안내려옴 / 클라이언트쪽에서만 호출 가능  

 [문제 원인 파악]

 

문제 1. 클라이언트에서 api 호출시 브라우저에 저장된 쿠키 정보를 자동으로 가져와서 넣어준다. (withCredentials)
-> getServerSideProps는 서버측에서 실행되므로 못가져온다.

문제 2. 서비스 제공하는 도메인에 쿠키 정보 저장 안됨. 그러나 api 도메인에는 저장이 된다(?) -> 쿠키를 가져올 수 있는 방법을 찾아도 저장된 쿠키가 없음

 

 

[문제 해결 방안 모색]

문제 1. getServerSideProps에서 제공하는 context.request에서 쿠키 값을 찾을 수 있어 해결할 수 있었다.
문제 2. url이 일치해야 쿠키 정보가 저장되었다. -> proxy 설정을 해준다 -> 현재 도메인(서비스)에도 쿠키가 설정되었다.

 

[문제 해결]

1. next config 파일에 proxy 설정함 -> 로그인시 현재 도메인에도 유저 값이 저장됨 / response set cookie
2. getServerSidePropsContext.req.cookies에서 유저키를 가져옴
3.  axios 인스턴스 헤더 쿠키에 해당 유저 키값 전달
4. getServerSideProps에서 api 호출 -> 유저 키값 전달됨 확인

위와 같은 과정을 통해 정상적으로 Session 인증 방식 로그인에서 SSR을 적용할 수 있었다.