1. 들어가며

로컬 환경에서 로그인이 왜 필요할까?

기존에 dev환경과 prod환경으로 나눠서 환경분리는 하였으나 localhost는 별도로 환경설정을 해주지 않았다. 프런트개발을 할때 로컬에서도 로그인을 하며 테스트해야할 필요성을 느끼게 되었고 로그인 기능을 추가하기로 마음먹었다.

2. 문제 상황 정리

현재 내 프로젝트는 쿠키 기반 로그인을 사용하고 있다. prod와 dev환경에서는 백엔드가 동일한 서브도메인을 사용함으로 문제가 되지않는다. 하지만 localhost 환경에서는 **Next.js 프론트 서버(localhost:3000)**와 **Express 백엔드 서버(localhost:2999)**의 포트가 다르기 때문에 서로 다른 origin으로 간주된다. 따라서 SSameSite 정책에 따라 쿠키가 전달되지 않는 문제이다.

3. 원인 분석

기존에는 아래와 같이 sameSite: "none",을 사용하고 있었다.

        res.cookie("token", token, {
          httpOnly: true,
          secure: true,
          sameSite: "none", 
          ...

하지만 SameSite: "none"을 사용할 경우, 반드시 secure : true도 함께 설정해야 하며 이는 HTTPS 환경에서만 동작한다. 따라서 localhost에서는 로그인이 되지 않는 것이다.

참고 : SameSite 설정값에 따른 설명

설정값	설명	크로스 사이트 허용 여부	특징
strict	오직 같은 origin만 허용	❌	거의 모든 cross-site 요청에서 쿠키 차단
lax	일부 안전한 요청(GET 등) 허용	🔸 제한적 허용	POST에서는 대부분 차단됨
none	모든 요청 허용	✅ 완전 허용	secure: true 필수

4. 해결 방법

1) Google OAuth Redirect URI 등록

localhost의 백엔드서버를 구글콘솔에서 redirect url로 등록해줘야한다.

나는 localhost:2999에 백엔드 서버가 있음으로 redirect url을 추가해주었다.

2) .env 설정

이후 .env파일에도

NODE_ENV=localhost

를 추가해줘서 localhost일때만 해당 코드가 동작할 수 있도록 한다.

3). 조건분기

sameSite="lax" 로 설정해주고 res.redirect를 로컬 프런트페이지로 설정해준다.

        if (process.env.NODE_ENV === "localhost") {
          res.cookie("token", token, {
            httpOnly: true,
            secure: true,
            sameSite: "lax", 
            path: "/",
            maxAge: 15 * 1000 * 60 * 60 * 24,
          });
          // 로컬 프런트페이지
          return res.redirect(`http://localhost:3000`);
        }

위의 설정 이후 성공적으로 local에서도 로그인된것을 확인할 수 있었다.

5. 마무리하며

SameSite: "lax" 설정은 일반적으로 POST 요청에서는 쿠키가 전송되지 않는 것으로 알려져 있지만, 내 경우에는 정상적으로 동작했다. 이는 Chrome 브라우저의 Lax+POST 완화 정책 때문일 수 있다고 추정되며, 일부 상황에서는 2분 이내의 navigational POST 요청에 대해 허용되기도 한다고 한다.

정확한 동작은 브라우저 버전과 구현 방식에 따라 달라질 수 있다고 하니, 이후 더 깊이 있는 조사가 필요할 것으로 보인다. 현재는 로컬 환경에서 테스트만 필요하기 때문에 우선 이 정도 설정 및 검색만으로 충분히 개발을 진행할 수 있을 것 같다.