[Next.js] Spring boot 서버로부터 Session 토큰 받은 후 자동 저장하기

개요

---

경매 플랫폼 유유상종 프로젝트에서 JWT 방식이 아닌 세션 방식으로 로그인 기능을 구현했었다.

 

세션 방식은 로그인이 성공할 경우 클라이언트에 JSESSIONID라는 토큰을 전송한다.

 

클라이언트는 토큰을 쿠키에 저장하고 요청을 보낼 때 withCredentials : true 옵션으로 요청에 쿠키를 자동 전송한다.

 

서버는 요청과 함께 온 세션 토큰을 검증하는 방식으로 인증을 진행한다.

 

위 방식을 사용하기 위해선 서버와 클라이언트 둘 다 https를 사용해야 한다.

 

본 글에서는 Next.js 프로젝트를 개발 환경에서 https로 동작하게 하는 법과 저장된 쿠키를 확인하는 법에 대해 다룬다.

---

Next.js 프로젝트를 https로 실행하기

---

next.js 13.5.0버전부터 로컬 환경에서 https로 프로젝트를 수행하기 쉬워졌다.

 

다음 스크립트를 수행하면 프로젝트가 https로 컴파일된다.

"dev": "next dev --turbopack --experimental-https",

package.json의 dev 스크립트를 위 코드로 변경하면 된다.

 

--experimental-https 옵션은 mkcert 라이브러리를 사용하여 자동으로 개인키와 공개키를 생성 후 프로젝트를 컴파일한다.

 

프로젝트 루트에는 개인키와 공개키가 담긴 certificates 폴더가 생성된다.

생성된 공개키와 개인키

해당 키는 git에 올라가선 안되므로 반드시 .gitignore에 certificates를 넣어야 한다.

---

서버로부터 JSESSIONID 토큰이 전송되었는지 확인하기

---

로그인을 수행할 때 개발자 도구(f12)를 연 후 Network 탭에 들어간다.

 

다음으로 로그인 수행 후 Network 탭에서 요청 헤더에 Set-Cookie를 확인한다.

서버로부터 전송된 쿠키

위와 같이 전송되었다면 올바르게 세션 쿠키가 전송된 것이다.

 

만약 Secure;이 없다면 브라우저는 쿠키를 자동으로 저장하지 않는다.

 

또한 서버와 클라이언트가 모두 https가 아니라면 마찬가지로 쿠키를 저장하지 않는다.

 

때문에 위 제약사항에 맞춰서 환경을 세팅하고 코드를 작성해야 한다.

 

세션 쿠키는 따로 설정해주지 않았다면 기본적으로 30분 후에 만료된다.

---

쿠키가 session storage에 저장되었는지 확인하기

---

위와 같이 쿠키가 정상적으로 전송되었다면 쿠키가 session storage에 저장되었는지 확인한다.

 

개발자 도구 => Application => 왼쪽 메뉴의 Cookies => 로컬 주소 에 JSESSIONID라는 이름의 쿠키가 저장되었는지 확인한다.

session storage에 저장된 쿠키

자동으로 쿠키가 저장되었다면 원활하게 동작한 것이다.

 

이후 서버에 요청을 보낼때 withCredentials : true 옵션을 반드시 넣어야 한다.

const api = axios.create({
  baseURL: BASE_URL,
  headers: {
    "Content-Type": "application/json;charset=utf-8",
  },
  withCredentials: true,
});

 

위 옵션은 요청을 보낼 때 브라우저의 쿠키를 함께 보내기 때문에 withCredentials : true 옵션이 없다면 인증&인가가 필요한 요청이 정상적으로 작동하지 않을 수 있다.

---

마무리

---

서버에 https 인증을 받는 과정이 너무 까다로웠다.

 

사람들이 왜 프로젝트를 할 때 JWT를 쓰는지 알 것 같았다.

 

백엔드 면접에서는 프로젝트에서 JWT를 왜 썼는지 물어본다는데 이번 경험을 토대로 나라면 "세션 방식에 비해 압도적으로 편하기 때문이다." 라고 말할 수 있을 것 같다.

 

물론 JWT처럼 토큰을 따로 관리하지 않아도 되기 때문에 고생은 좀 했지만 유지보수는 편할 것 같아서 서로 장단점이 있는 방식인 것 같다.