인프런 커뮤니티 질문&답변
작성한 질문수
안녕하세요 nextjs를 사용한 프로젝트를 진행하다가 궁금증이 생겨 질문합니다!
해결된 질문
작성
·
1K
0
안녕하세요, 강사님 강의 덕분에 nextjs와 next-auth, msw를 프로젝트에 잘 적용할 수 있게 되었습니다.
그런데 현재 프로젝트에서 문제가 있었고 궁금한 점이 생겨 이렇게 질문을 남기게 되었습니다.
프로젝트에서 로그인 인증을 jwt 대신 쿠키를 사용하게 되었고 oauth를 통해 로그인하면 백엔드에서 set-cookie를 통해 쿠키를 set, 보내주는 상황이 되었습니다.
이 때, nextjs에서 클라이언트 api 요청을 보낼 때 쿠키에 직접적으로 접근하지 않아도 자동으로 브라우저에서 요청할 때마다 쿠키를 같이 보내준다고 이해했는데 혹시 제가 이해한게 틀렸을까요?
프로젝트를 진행하면서 쿠키가 백엔드에게 보내는 요청에 담기지 않아 결국 서버액션을 사용해서 쿠키를 헤더에 담아서 보내는 방식으로 변경되었습니다.
클라이언트 요청에서 쿠키를 직접 (상수 값으로) 헤더에 담아서 요청을 보내도 서버에서 아무 값을 받지 못한다고 하는데 백엔드쪽을 잘 모르니 프론트 쪽에서 수정하는 방향으로 틀어서 프로젝트는 완료한 상황입니다.
next-auth도 결국 걷어낸 상황이 되었는데, next-auth와 함께 쿠키를 사용하려면 백엔드에서 set 해 준 쿠키를 직접 한번 더 브라우저에 set-cookie를 해줘야 하는것인지도 궁금합니다.
질문의 요지는 이렇습니다!
1. 클라이언트 요청의 헤더에 쿠키를 직접 담아서 보내더라도 백엔드에서 받을 수 없는 상황이 있는지?
-> 있다면 그 이유는? / 없다면 백엔드 문제인지?
2. next-auth를 사용하는 경우 서버와 서버간의 요청이기 때문에 브라우저에 set-cookie를 해줄 수 없는게 맞는지?
답변 2
1
클라이언트가 브라우저인지 프론트서버인지 정확하게 표현해주세요. 브라우저->백엔드서버나 브라우저->프론트서버는 쿠키가 저절로 담기지만, 프론트서버->백엔드서버는 쿠키가 담기지 않습니다. 쿠키가 담긴다하더라도 쿠키 속성(도메인, Path, Secure, Same-Site)에 따라 전송되지 않을 수도 있습니다. 프론트 서버랑 백엔드 서버의 도메인이 달라서 전송 안 되는 케이스를 많이 보았습니다. 서브도메인이 다르다면 쿠키의 도메인 앞에 .example.com처럼 .을 붙여야 합니다.
next-auth는 프론트서버<->백엔드서버의 문제라서 백엔드 서버의 쿠키를 브라우저에 한 번 더 심는 과정이 필요합니다. 브라우저->프론트서버->백엔드서버로 할 때도 브라우저->프론트서버로 전송된 쿠키를 다시 백엔드서버쪽으로 수동으로 넣어서 보내야 합니다.
네 로컬호스트에서 배포된 백엔드 서버로는 쿠키가 가지 않습니다. 프론트도 배포를 해서 도메인을 얻으시거나 아니면 백엔드도 로컬호스트에서 띄워서 테스트하시면 됩니다.
0
안녕하세요, 인프런 AI 인턴입니다.
질문자님의 경우는 실제로 많은 개발자들이 직면하는 공통적인 문제 중 하나로 보입니다. 쿠키의 사용과 관련해서, 클라이언트가 백엔드 서버에 요청을 보낼 때 쿠키 정보를 함께 전송하는 방식과 관련된 질문이며, next-auth와의 연동 시 쿠키 처리 방식에 대한 질문이네요.
여러 경우의 수와 해결 방안이 있겠지만, 기존 답변 중 해당 질문과 밀접하게 관련된 내용을 찾아본 결과, 몇 가지 유사 케이스와 답변을 찾을 수 있었습니다. 이를 통해 질문에 대한 일부 해결책을 제시할 수 있을 것 같습니다.
- 클라이언트 요청 헤더에 쿠키를 직접 담아서 보내는 것과 관련된 주제:
- 질문: API 요청 시, cookie 보내는 것에 대한 질문
- 이 질문에서는 클라이언트 쪽에서 API 요청을 할 때
credentials: 'include'옵션을 사용해야 쿠키 정보를 함께 전송할 수 있다는 내용이 포함되어 있습니다. 또한, 질문에는next-auth의 사용과 별개로 fetch 요청 시 쿠키를 보내는 방법에 대한 해결책이 담겨 있습니다.
- 이 질문에서는 클라이언트 쪽에서 API 요청을 할 때
- next-auth 사용 시 서버간의 요청과 쿠키 처리 방법:
- 해당 주제에 관해서는 직접적으로 답변된 기록을 찾을 수 없었습니다. 그러나, 일반적으로
next-auth를 사용할 때, SSR(Server-Side Rendering) 상황에서 쿠키를 관리하는 방식에 대한 고민이 많이 있습니다. 서버 사이드에서 직접 클라이언트의 쿠키를 처리하려면 다른 접근 방식이 필요할 수 있으며, 이를 위해서는 백엔드와 프론트엔드 모두의 설정이 중요합니다.
위 내용을 통해 질문자님의 상황에 해당하는 명확한 해결책을 얻을 수 있기를 바랍니다. 다만, 백엔드에서 쿠키를 받지 못하는 상황에 대해서는, 쿠키의 도메인, 경로 설정, HttpOnly 및 Secure 속성, 그리고 쿠키가 전송되어야 하는 요청이 반드시 동일 출처 또는 적절한 CORS 정책 하에 이뤄져야 하는지 등을 검토해 보셔야 할 것입니다.
next-auth 사용 시 브라우저에 set-cookie를 직접 해주어야 하는지에 대해서는, 일반적으로 next-auth는 서버 사이드에서 인증 절차를 처리하고 적절한 HTTP 응답을 통해 클라이언트에 쿠키를 설정해줍니다. 이 과정에서 프론트엔드에서 별도로 쿠키를 설정하는 작업은 필요하지 않습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
빠른 답변 정말 감사합니다!!!
제가 클라이언트 요청에 대해 정확하게 말씀드리지 않았네요!
클라이언트 -> 브라우저 입니다.
2번 답변은 잘 이해됐습니다!
1번에서 답변해주신 부분을 보고 구글링을 해보니 localhost처럼 다른 도메인에서 읽으려면 쿠키 설정에 same-site=none 을 해야되는데 none을 하면 secure 설정이 필수라서 https 요청에서만 쿠키를 읽을 수 있다고 이해했습니다.
그렇다면 백엔드 서버는 배포가 된 상황이고 프론트는 localhost에서 개발, 테스트 중이라면 브라우저에 쿠키가 담겨있더라도 백엔드 서버에서 읽히지 않는 것이 맞을까요?
그렇게 이해하고 또 구글링 해보니 localhost를 https로 만드는 등의 방법이 있는 것 같은데 그렇게 하는게 맞는지, 다른 방법이 있는지도 궁금합니다!