#쿠키

nextjs middleware 에서 protected route 처리 하는 방법이 궁금합니다

middleware 에서 토큰 인증에 따른 redirect 를 구현 할려고 합니다 제가 생각한 로직은 인증이 필요한 페이지는 accesstoken을 쿠키에서 받아오고 토큰이 없거나, 인증이 실패하면 login 페이지로 이동, 토큰이 만료된 경우에는 refresh 요청이후 accesstoken,refreshtoken 재발급 이후 원래 이동할려는 페이지로 이동 이렇게 생각중인데 다만 하나 걸리는게 middleware에서 refresh api 요청을 하는게 과연 올바를까? 궁금합니다 그럼에도 굳이 middleware 에서 할려는 이유는 page단 에서 처리할경우에는 결국에는 한번 그 페이지로 이동했다가 처리되는거라 깜빡이는 이슈가 생겨서 그렇습니다 보통 어떤식으로 처리하는지 궁금해요

Nextjs14 서버 컴퍼넌트 JWT 갱신 방법 문의

안녕하세요 NextJS14 에서 JWT 로그인 방식으로 프로젝트 진행중에 있습니다. 현재 AccessToken 만료시 재 갱신하는 로직을 하면서 해결하지 못하는 내용이 있어서 문의 드리립니다. 서버 컴포넌트와 클라이언트 컴포넌트에서 갱신된 AccessToken 을 공유 하는 법에 대해서 어떻게 처리 하셨나요? - app router 사용 - accessToken, refreshToken 쿠키 사용 - fetch 를 이용하여 API 호출 아래 테스트 내용으로 서버 컴포넌트에서 AccessToken 만료되어 갱신되는 경우 클라이언트로 쿠키를 갱신해줄 방법을 모르겠습니다. 너무 CSR 구조로 생각하는거 같기도해서, 이런 경우 어떻게 토큰을 현행화 해서 사용하는지 문의 드립니다. 별도 가이드 문서를 더 찾아보면 서버 컴포넌트에서는 쿠키를 사용하지 말라는 글도 보여서, 방향성을 잘못잡고 있는 느낌도 들고 있습니다. 많은 조언 부탁드립니다!! 테스트 케이스) 1. 서버 <-> 클라이언트 (에러) - 서버 컴포넌트에서 백엔드 API 호출 -> 토큰 만료 -> AccessToken 재 갱신 API 호출 -> 쿠키 set -> 클라이언트에서 백엔드 API 호출(당연히 클라이언트에서는 쿠키가 갱신안되서 에러) 2. 서버 <-> 서버(성공) - 서버 컴포넌트에서 백엔드 API 호출 -> 토큰 만료 -> AccessToken 재 갱신 API 호출-> 쿠키 set -> 서버 백엔드 API 호출 3. 클라이언트 <-> 클라이언트 (성공) - 클라이언트 컴포넌트에서 백엔드 API 호출 -> 토큰 만료 -> AccessToken 재 갱신 API 호출-> 쿠키 set -> 클라이언트 백엔드 API 호출

next14의 next/headers의 cookies를 이용한 쿠키설정

안녕하세요 현재 데이터시각화 사이트 프로젝트를 진행중입니다. next14와 spring boot(리소스와 인증.인가)를 사용하고 있고, 카카오 소셜로그인을 하면 스프링서버에서 jwt(access 토큰)를 발급해주고 refresh 토큰은 redis를 통해 관리되고 있습니다. 받아온 토큰은 cookie를 통해 관리하고 있습니다. seo를 위해 ssr을 사용하고 있는데, ssr과정에서 데이터를 fetch를 할 때 토큰을 같이 보내고, 만약 액세스 토큰이 만료되고 리프레시 토큰이 살아있다면 응답 헤더에 새로운 액세스토큰을 보내주고 있습니다. 그런데 이때 next/headers의 cookies를 사용하여 쿠키를 세팅하는것이 안됩니다. 데이터 페치중, 혹은 ssr과정중에는 Cookies can only be modified in a Server Action or Route Handler. 라는 오류가 뜨며 cookie를 set 하거나 delete하는게 안됩니다. 이럴 경우는 어떻게 해야할까요?

토큰 관리, 로그인 유지를 현업에서는 어떻게 진행하는지 궁금합니다

안녕하세요 토이프로젝트로 인증/ 인가 파트를 맡게되었습니다 이전의 프로젝트에서는 로컬스토리지과 전역 상태 관리 라이브러리의 persist를 활용하여 토큰과 로그인상태를 로컬스토리지에 저장하여 진행하였습니다 하지만 이번에 새롭게 진행하는 프로젝트를 위해 다양한 웹사이트를 개발자도구로 참고하였지만 토큰이나 isLogined와 같이 로그인 여부 상태를 로컬, 세션 스토리지에서 관리하는 사이트를 확인할 수 없었고, 검색을 통해 보안을 위해 Http Only 쿠키를 통해 액세스 토큰과 리프레시 토큰을 관리하는 방법이 일반적이란것을 알 수 있었습니다 이러한 방법에서 몇 가지 궁금증이 생겨 질문을 드리고 싶습니다 1. 현업에서는 어떠한 방식으로 토큰을 관리하고 로그인 상태를 유지하나요? 2. 만약 http only 쿠키를 사용하게 된다면, 쿠키에 저장된 토큰을 클라이언트에서 조작할 수 없으니, 매번 페이지를 렌더링 할 때마다 토큰이 유효한지 api 호출을 통해서 로그인 상태를 유지해야하는걸까요? (api를 통해 토큰이 유효하다면 로그인 유지, 아니라면 로그인 페이지 리다이렉션) 3. http only 쿠키 외에 인증 / 인가를 위해서 클라이언트 단에서 보안적으로 신경써야하는 부분은 어떠한것이 있을까요? 가장 기본적이지만 가장 어려운 인증/인가 부분 현업 선배님들께서는 어떻게 진행하시는지 답변해주시면 감사하겠습니다

webview_flutter 안드로이드 cookie 질문이요...

회사에서 부득이하게 앱개발자 없이 앱개발을 해야하는 상황이라 웹으로 만들고 flutter 웹뷰를 만들었습니다. iOS에서는 쿠키에 jwt가 저장되서 자동로그인 기능이 잘 작동되고 있는데요, 안드로이드에서는 cookie를 따로 관리를 해줘야 한다고 하더라구요... 그래서 webview_cookie_manager 와 flutter_secure_storage를 이용해서 onPageFinished가 될 때 main page이면 cookieManager.getCookies로 jwt를 가져오고 storage.write로 쿠키를 저장해 주고 있습니다. 그리고 initState()할때 Future<void> _loadStoredCookies() async { final jwt = await storage.read(key: 'jwt'); print('jwt : $jwt'); if (jwt != null) { final cookieManager = WebviewCookieManager(); await cookieManager.setCookies([ Cookie('jwt', jwt) ..domain = "메인페이지" ..path = "/" ..secure = true ..httpOnly = true ]); bool hasCookies = await cookieManager.hasCookies(); print('쿠키가 존재하는가? $hasCookies'); } } 이렇게 쿠키를 확인하고 쿠키를 set해주는데 백그라운드에서 앱을 완전히 종료시키고 다시 실행하면 쿠키가 사라지더라고요... 왜 그런건가요...??

요즘 소프트웨어들이 불편한 것 같아요. 왜 그럴까요?

사용하다보면 쿠키, 광고 등등으로 행동을 가로막아 사용자 경험을 떨어트리는 것 같아요. 다크 패턴이 점점 지겹고 그냥 아예 사이트를 나가거나 앱을 삭제해버립니다. 비용 절감을 위한 설계로 귀찮음과 시간 소모가 소비자에게 전가되니 하기가 싫어집니다. 예전에는 신경 안쓰였는데 요즘 더 그런 것 같아요. 이유가 있을까요?

API 서버에 데이터 요청 처리 질문입니다!

안녕하세요. API 서버를 별도로 구축하고, 인증은 토큰방식으로 체택했습니다! 이제 웹페이지를 제작하고있는데요, 문득 드는 의문이 API서버에 대한 데이터 요청은 클라이언트 사이드단에서 처리를 해야 맞는건가요? 아니면, 서버 사이드단에서 처리를 해야 맞는건가요? 인가에 대한 토큰은 쿠키에 있다고 한다면, 1. 클라이언트 사이드단 처리 클라이언트에서 브라우저의 쿠키 접근 -> 인가 토큰 획득 -> 헤더에 포함하여, API서버에 요청. -> 데이터 요청 완료. 2. 서버사이드 처리 클라이언트에서 브라우저의 쿠키를 헤더에 포함하여 서버사이드로 데이터 요청 -> 서버사이드에서 인가토큰을 획득하여, API서버에 요청 -> 클라이언트에게 해당 데이터를 응답 -> 데이터 요청 완료. 1번 방법은 API서버가 외부에 노출되어있어서 보안에 취약하지만, 트래픽이 많아질경우, API서버에 대한 처리만 잘 하면 될것같고, 2번 방법은 API서버는 웹서버와만 통신을 하니, 보안에 강하지만, 트래픽이 많아질경우, 웹서버에 대한 처리, API 서버에 대한 처리 둘다 고민해야할것같은데.. 보통 어느방법을 선택하나요??

JWT invaild signature 오류

쿠키에 accessToken이 발급이 되고 있고 데이터 베이스에 refreshToken이 발급 되고 있습니다 근데 사용자 조회를 하려고 api코드를 작성하니 계속 invalid signature 오류가 나오네요 시크릿 키도 확인 해봤지만 그건 문제가 아니였어요... 혹시 몰라 깃허브 코드 남겨둡니다... 문제를 해결해 주실 능력자 찾아요.... https://github.com/LeeWinJun/nikeShop

로그인 구현 시 토큰 및 정보 저장 방식에 대한 궁금증

안녕하세요. 진행 중인 프로젝트에서 로그인 기능을 구현하려고 하는데, 직장에서 근무하시는 선배님들은 어떤 방식으로 토큰 등 로그인 정보를 저장하시나요? HTTPonly 쿠키, 로컬 스토리지 등등 많은 방법이 있는 걸로 아는데 어떤 것이 맞다, 틀리다는 없는 것 같아서요. 선배님들이 다니시는 혹은 다니셨던 회사에서는 어떤 방식으로 로그인 정보를 저장하는지 궁금합니다! 또한 왜 해당 방식을 사용하는지도 궁금합니다!

Streamli app Azure에 배포시.

Python Streamlit으로 앱을 하나 작성 했고 Docker image로 빌드해서 azure container repository에 푸쉬 했습니다. 그리고 이미지를 기반으로 app service를 띄웠는데요. 로컬에서는 아무 문제 없이 작동이 되는데 리모트로 올라가니 streamlit cookie manager 및 feedback component를 로딩하질 못 합니다. (사실 쿠키 매니저는 설치한 적이 없어서 왜 문제가 되는지 더더욱 잘 모르겠네요) 에러 문구에는 네트워크 레이턴시나 프록시 이슈로 컴퍼넌트를 로딩 못 하는 걸수 있다 라고 하는데 혹시 관련해서 비슷한 이슈 해결하신분 계실까요?

React JWT 재갱신 방법이 또 있을까요?

안녕하세요 회사에서 기존 인증시스템을 개편하면서 프론트에서 JWT를 관리하게되었는데 현재 axios intercepter response를 통해서 재갱신을 하고 있는데 기존로직과 충돌되는 부분이 많아 재갱신이 안될때가 있었습니다. 현재 access token은 store에 저장되고 있고, refresh token은 쿠키에 저장되고 있어서 새로고침시에 refresh token을 통해 갱신하고있습니다. 그런데 현재 재갱신 방법을 바꾸고싶은데 혹시 axios intercepter말고 다른 방법은 없을까요? 현재 고려중인 방법은 커스텀훅, HOC 구조로 개편하는 방법을 생각중인데 다른 방법이 있는지 궁금합니다.

JWT에서 refresh_token을 넘겨줄때 어떡해 넘겨주면 좋을까요?

로그인을 했을 때 access_token, refresh_token을 받아서 클라리언트에서 쿠키로 저장을 했습니다. access_token이 만료됬을 때 refresh_token을 넘겨줘야 하는데 이 부분에서 궁금한게 있습니다. 만약에 글쓰는 부분같이 access_token이 필요한 부분에서 access_token이 만료된 경우에 refresh_token을 넘겨주고 access_token을 다시 받아오는데 이미 여기서 글쓰기는 access_token이 없어서 실패하는 거잖아요. 그러면 다시 글쓰기를 시도해야 하는건가요? 아니면 access_token이 없어지고 refresh_token을 줘서 받아오는게 아니라 access_token이 만료 기간이 다가오면 넉넉하게 잡아서 refresh_token을 줘서 받아오는건가요??

NextJS 14에서 JWT를 쿠키를 통해 관리하려고 하는데 서버에서 set-cookie 해주는 방식말고 route 핸들러에서 주입할수는 없나요?

안녕하세요. 최근 NextJs를 공부하며 이전 리액트 기반의 사이드 프로젝트를 NextJs로 구현해보고 있습니다. 카카오 로그인만 지원을 하고 있고, 프론트 쪽에서 카카오 인가 코드를 백엔드로 넘기면 백에서 jwt를 발급해서 응답으로 access token과 refresh token을 프론트로 넘겨주고 있습니다. 이전 프로젝트에서는 두 토큰 모두 localStorage에 저장하는 방식으로 했었는데요, 이번에는 쿠키를 이용해보려고 하고 있습니다. 다만 백엔드에서 set-cookie를 해놓지 않아서 응답으로 받은 토큰을 따로 쿠키에 저장해야하는 상황입니다. 하지만 Server Component에서는 set cookie가 안되는 것으로 알고 있습니다. <목표 구현 방식> route handler를 통해서 백엔드 api를 호출하고 그 값을 쿠키에 저장하도록 코드를 짰습니다. (/app/api/token/route.ts) return 값은 확인을 위해서 임의로 넣었습니다. 그리고 쿠키에 저장된 토큰을 통해서 서버 컴포넌트에서 이를 이용해 백엔드 api 통신을 하고 싶습니다. 하지만 서버 컴포넌트에서 쿠키를 확인하니 비어있는 쿠키인 것을 알 수 있었습니다. 얕은 지식으로 생각을 했을때, (route handler - 브라우저 혹은 서버 컴포넌트)에서 생성한 쿠키는 (백엔드 도메인 - 브라우저 혹은 서버 컴포넌트) 통신에 사용되는 쿠키와 다르기 때문이라고 생각이 들었는데 해답을 찾지 못했습니다. <질문 사항> - 백엔드 서버에서 set-cookie를 하지 않고 직접 구현할 순 없을까요? 쿠키는 forwarding이 안되나요? - 제가 생각한 구조 말고 추천하시는 토큰 관리 방식에 대해서 알려주셔도 감사하겠습니다. 아직 초보 개발자에 글도 잘 쓰지 못해 이해하시기 힘들 것 같지만, 넓으신 아량으로 지식을 나눠주신다면 정말 큰 도움이 될 것 같습니다. 긴글 읽어주셔서 감사합니다 (_ _)

Nextjs app router middleware + token 여부에 따른 리다이렉트

안녕하세요, next.js로 팀 프로젝트 진행 중 궁금한 것이 생겨 질문드립니다. next.js의 middleware.ts를 이용하여 모든 라우터에 접근할 때마다 유저 인증 토큰을 확인 후, 토큰이 없으면 /login 페이지로, 토큰이 있다면 원하는 페이지로 이동할 수 있도록 처리하길 원합니다. 유저 토큰은 로그인 시, access token을 body로 내려 받아 전역 utils 파일에 클래스 형태로 저장하고 있고, refresh token은 쿠키로 내려 받아 필요할 때마다 토큰 재발급 요청을 보낼 수 있도록 설계하고 있어요. 그런데 middleware.ts에서 전역으로 관리하는 토큰에 접근이 불가능한 것 같더라구요.. accessToken을 쿠키로 관리하지 않으면 미들웨어에서 토큰에 접근하는 방법이 아예 없는 것일까요? 아니면 제가 뭔가 단단히 착각하고 있는 것이라면 도움을 요청하고 싶습니다! 감사합니다🙇‍♂️

쿠키가 저장은 되는데 값을 못가져와요

서버에서 로그인을 하고 받은 호출하고 받은 데이터에서 자동으로 쿠키가 저장은 되는데 개발자 도구 -> 애플리케이션 -> 쿠키에는 저장이 되는것을 확인했는데 document.cookie로 쿠키를 받아올라하는데 쿠키가 빈값으로 나오는데 어떻게 해야하나요??

Next JS 14 쿠키 관련 질문입니다.

현재 NextJS 14 버전을 사용 중에 있으며 App Router로 폴더 구성을 하고 로그인 작업을 진행 중에 있으며, 로그인 프로세스는 다음과 같습니다. 1. 프론트엔드 : 사용자가 로그인 버튼 클릭 2. 디스코드 서비스에서 인증 (디스코드 페이지로 이동) 3. 백엔드 서버로 인증코드 전송 4. 백엔드 서버에서 프론트엔드로 리다이렉트 (이 때 쿠키로 엑세스 토큰과 같은 정보를 보내줌) 쿠키 설정도 https에 백엔드랑 같은 도메인으로 맞춰 줬습니다. 여기서 1~4번까지 에러 없이 잘 동작하고, 쿠키도 브라우저에 잘 저장되고 있습니다. 근데 여기서 한 가지 문제가 발생했는데, Nexjs가 서버 사이드 컴포넌트(layout) 에서는 쿠키를 잘 불러오고 있지만 클라이언트 사이드 컴포넌트(page) 에서는 쿠키를 불러올 수 없었습니다. (undefined) 현재 클라이언트 사이드 컴포넌트에는 최 상위에 'use client' 를 붙혀 잘 사용하고 있고, cookies-next 라는 라이브러리로 불러오고 있습니다. 어떤 것이 문제일까요? 문제의 원인과 해결 방법을 알고 싶습니다.

nextJS 에서 안전하게 token 처리하기

nextjs에서 nextAuth 쓰지않고 안전하게 token 처리하는 완벽한 예시가 있는지 알고싶습니다. 사이드 프로젝트중에 여러 시도를 해봤는데 정답을 못찾겠습니다. 일단 axios 인터셉트로 ssr이나 csr이나 모두 토큰을 헤더에 담아서 보내는 것을 목표로 하고 있습니다. 1. 상태관리 라이브러리를 사용한다. 당연히 ssr 환경에서는 불가하니 탈락 2. 그냥 쿠키를 사용한다 보안 문제가 있으니 탈락. 3. http only 쿠키를 사용한다. csr 환경에서 접근할 수 없으니 탈락. 대안으로 생각해본 방법들은 1. 모든 api를 server action을 랩핑해서 미들웨어처럼 사용하고 http only 쿠키 이용하기 2. 쿠키와 상태관리 모두 값을 넣어두고 두가지 다 관리하면서 서버와 클라이언트 컴포넌트에서 각각 제어하기 하지만 두가지 방법은 너무 번거롭고 버그 양산일 것 같습니다. 많은 분들께 여쭤봤을 때는 그냥 쿠키를 사용하고 보안은 어느정도 포기한다는데 다른 방법이 있을까요?

프론트에서 세션으로 로그인 유지 하려는 과정 중 문제가 생겼습니다.

안녕하세요 현재 제가 백엔드(스프링)를 진행하고 있고, 지인이 프론트를 진행하고 있습니다. JWT를 진행하기 전 세션을 통해서 로그인을 해보려고 합니다. 결론부터 말씀 드리자면 쿠키값에 세션id가 저장이 안되어 로그인 유지가 안되는 상황입니다. 사용하고 있는 로그인 방식은 Spring Security FormLogin 방식입니다. 복잡하게지만 백엔드 쪽에서의 문제인지 코드를 한 번 올려드리겠습니다. 생각 1. 인텔리제이 내에서 html을 등록하여 진행하면 같은 도메인, 포트이기 때문에 시큐리티가 자동으로 세션을 만들고 그 세션을 통해 자동으로 유지된다고 생각합니다. 생각2. 하지만, 프론트, 백엔드 서버 포트가 다르기에 successHandler을 통해서 쿠키에 세션ID를 담아서 보내야 된다고 생각했습니다. 하지만, 세션ID는 유지가 되지 않고, 그것에 대해 계속 알아보던 중 해결책을 못찾아 질문을 드립니다. 프론트단에서 따로 처리를 해야되는 걸까요? 아니면 제가 제대로 설정을 못하고 있는 것일까요

Next.js app router의 쿠키값을 어떻게 세팅해야 할까요?

Next.js app router에서 쿠키로 JWT로그인을 사용 하고 있습니다. 서버는 백엔드 api 서버가 별도로 존재하는 상황입니다. 현재 인증 기반 api를 호출을 할 때, 만약 해당 accessToken이 만료가 됐다면 재발급을 해주는 백엔드 api를 통해 새로운 accessToken을 브라우저에 업데이트하는 로직을 구현하려고 했습니다. 클라이언트 컴포넌트에서는 전혀 문제가 없었습니다. 어차피 set-cookie를 백엔드에서 해주면 알아서 브라우저에 반영이 되니까요. 근데 문제는 서버 컴포넌트에서 동일한 요청을 하는 경우입니다. 동일하게 재발급 요청을 보낸 다음 set-cookie를 백엔드에서 해줘도 어차피 서버 컴포넌트에서 api를 쐈던것이기 때문에 그 반환값이 서버 컴포넌트로 오게 되고, 이는 브라우저에 반영이 안 되는데요ㅠ 혹시 이럴 경우에는 어떻게 처리를 하는게 좋을까요? 미들웨어나 라우트 핸들러를 사용하려 해도 그 방법을 도저히 모르겠네요

Next14 SSR 과정에서 Authorization에 쿠키를 사용해 토큰값을 전달하면 에러가 발생합니다..

안녕하세요. 혼자서 해결해 보려고 했지만, 오랜 시간 해결하지 못해 지푸라기라도 잡는 심정으로 질문 올려봅니다.. 기존에 localstorage를 사용해 fetch로 데이터를 요청했으나 SSR 과정에서 window 사용이 불가능하기 때문에 쿠키를 사용을 계획했습니다. 로그인 -> 쿠키에 토큰값 저장 -> 데이터 요청 시 쿠키에서 토큰 값을 꺼내고 헤더 Authorization에 담아 SSR에서도 사용하려고 했습니다. next에 내장되어있는 'next/headers'가 아닌 'cookies-next'를 사용하고 있습니다. <문제 상황> 처음에는 토큰 유효 기간이 지났다(토큰 값이 들어오지 않았다)는 에러가 발생하고 곧이어 데이터를 정상적으로 받아옵니다 (제 추측으로는 SSR 과정에서 토큰 값을 인식하지 못하고 에러가 발생하고 클라이언트 단에서는 쿠키 값을 정상적으로 반영해 데이터 페칭이 진행된 것 같습니다.) <질문> 1. Suspense를 적용하지 않을 경우 에러 없이 동작하지만 next streaming이 적용되지 않습니다.. 그리고 getCookie를 통해 가져온 값이 SSR 시 적용되지 않는 이유가 궁금합니다! 2. 현재 쿠키를 사용해 SSR 시 토큰 값을 전달하려는 방법이 최선의 방법이 맞는지 궁금합니다.

[node.js] 세션을 이용한 로그인 구현 중 브라우저 쿠키의 maxAge 초기화 안 되는 문제 발생

Node.js(v18.17.0) + TypeScript로 개발을 진행하고 있습니다. express 로 서버를 구축했고, express-session , session-file-store 라이브러리를 사용해서 로그인 기능을 구현했습니다. 제가 원하는 것은 세션 만료 시간을 연장하는 기능을 만드는 것인데... 서버에서는 세션 쿠키 만료 시간이 재설정(초기화)가 되는데 브라우저에 저장된 쿠키 만료 시간은 그대로인 상태라 연장이 되지 않습니다. 처음 제 코드는 이렇습니다. ```ts export const extendSession = async (req: Request, res: Response) => { req.session.resetMaxAge(); res.json({ success: true, message: '세션 연장 성공', expiredTime: req.session.cookie.expires.getTime(), }); }; ``` 이런 식으로 resetMaxAge() 함수를 통해서 만료 시간을 연장할 수 있을거라 생각했습니다. (트라이캐치문은 생략하였습니다.) 콘솔에 값을 확인해봤을 때에도 연장이 잘 된 것으로 보이는데 브라우저에 저장된 쿠키의 만료 시간을 확인해보면 최초의 쿠키 값 그대로였습니다. 이를 해결하기 위해서 만료 시간을 따로 정해서 줘보기도 했습니다. `req.session.cookie.maxAge = 3600000;` 하지만 마찬가지로 세션 쿠키의 만료 시간은 바뀌지만 브라우저에 저장된 쿠키의 expires가 변하지 않았습니다. 따로 헤더를 줘보아도 새로운 쿠키가 생성될 뿐 해결책이 되지 않았습니다. `res.setHeader('Set-Cookie', 'Max-Age=3600000')` express-session 미들웨어가 자동으로 set-cookie 헤더를 설정해주어서 제가 여기에 어떻게 접근할 수 있을지 모르겠습니다. 브라우저의 쿠키가 초기화 적용을 받지 못하는 것이 문제인 것 같은데... 원인은 대충 알 것 같으면서 해결책을 모르겠습니다. session 설정은 이렇습니다! ```ts app.use( session({ secret: process.env.SESSION_SECRET_KEY, resave: false, saveUninitialized: false, cookie: { sameSite: 'lax', secure: false, httpOnly: true, maxAge: 1000 * 60 * 5, }, store: new FileStore({ reapInterval: 3000, }), }), ); ```

access token을 쿠키에 저장하는 작업은 프론트/백 어디서 해야 하나요?

안녕하세요. 사이드 프로젝트 리팩토링을 하는 중에 궁금한점이 생겨 질문 올립니다. 지금은 로그인 시 rt를 쿠키에 저장(백엔드에서), at를 로컬스토리지에 저장(프론트에서)하고 있습니다. 프론트측에선 api를 호출할 때마다 로컬스토리지에 있는 at를 꺼내서 fetch옵션에 전달해주는 작업을 하고 있어요. 그런데 서버 컴포넌트에서 api를 호출하려고 하니 로컬스토리지에 접근하지 못하는 문제가 있더라구요. 결국 at를 로컬스토리지가 아닌 쿠키에 저장하는 방식으로 변경하기로 했는데 이럴경우 at를 쿠키에 저장하는 작업을 백엔드와 프론트엔드 중 어느쪽에서 수행해야 하나요? 아니면 혹시 쿠키에 저장하는 방법 말고도 더 좋은 방법이 있을까요..?

Spring WebSocket 통신 중 HttpOnly 쿠키에 저장된 JWT 토큰 접근 문제

안녕하세요, Spring과 React를 활용하여 실시간 채팅 기능을 구현 중인 학생입니다. 현재 저희 시스템은 사용자가 로그인을 성공하면, JWT 토큰을 생성하여 이를 HttpOnly 쿠키에 저장하고 있습니다. 이후 해당 토큰을 이용해서 사용자의 인증 및 인가를 처리합니다. 그리고 웹소켓을 화룡해 채팅 기능을 구현하고 있는데, 사용자가 채팅 메시지를 웹소켓을 통해 서버로 전송할 때마다, 해당 사용자의 JWT 토큰을 검사하여 유효한 사용자인지 확인하려고 합니다. 그러나 현재 쿠키가 HttpOnly로 설정되어 있어서, React에서 쿠키에 접근할 수 없습니다. 따라서 웹소켓 메시지를 보낼 때마다 JWT 토큰을 메시지에 포함시키지 못하고 있습니다. 구글링해서 찾아보니 다른 개발자들의 경우 클라이언트에서 헤더에 토큰을 포함하여 서버로 전송하고, 서버에서는 StompHeaderAccessor의 getFirstNativeHeader 메서드를 사용하여 토큰을 받아 사용자 검증을 하는 방식을 주로 사용하는 것 같습니다. 그러나 저희 시스템에서는 이 방식을 사용할 수 없어, 다른 해결 방안을 찾고 있습니다. 현재 제가 생각한 방식은 웹소켓 연결 시 웹소켓 세션에 해당 사용자의 토큰값을 저장하여 채팅 메시지가 서버로 전송될 때마다, 웹소켓 세션에 저장된 토큰값을 검증하는 방식입니다. 만약, 이 방식을 사용한다면 사용자 토큰값의 유효 기간이 끝나면 리프래시 토큰을 사용한 사용자 토큰 재발급 방식은 사용자 웹 브라우저 쿠키에 접근하지 못하니 불가능한가요? HttpOnly 쿠키에 저장된 JWT 토큰을 웹소켓 통신에서 어떻게 활용할 수 있을지 조언해주시면 감사하겠습니다.

클라이언트에서 사용자가 로그인 상태인지 판별하는 방법

일반적으로 웹/앱 클라이언트에서 사용자가 로그인 상태인지 어떻게 확인하는지 궁금합니다. 1. 서비스에 접속하고 페이지를 이동할 때마다 매번 유저 정보를 가져오는 api를 호출해서 에러가 나면 로그아웃 상태로 판단한다. 2. 서비스에 접속할 때 한번 유저 정보 api를 호출하고 에러가 나면 로그인 api를 호출해서 성공할 때까지 로그아웃 상태로 판단한다. 3. 쿠키나 로컬 스토리지 같은 곳에 세션 id가 있는지 여부로 판단한다. 지금 생각해본건 이렇게 세가지 인데 일반적으로 어떻게 로그인 상태인지 매번 판별하는지 궁금합니다! 그리고 환경을 nextjs로 가정했을때 이 유저 api 호출을 ssr과 csr중 어디서 호출하는게 좋을지도 알고 싶습니다.

별도의 인증서버가 있는 환경에서 jwt를 통한 인증 질문

jwt는 제대로 다뤄본 적이 없어 요즘 로컬환경에서 이런저런 공부를 하고 있습니다. 구성은 이렇습니다 웹서버(jquery + 스프링부트 with thymeleaf) 인증서버(스프링부트로 만든 Rest API) 로그인과 토큰 발급에 대한 일련의 과정이 헷갈려서 제가 제대로 이해하고 있는게 맞는지 궁금합니다.. 브라우저에서 로그인 요청 -> 웹서버에서 인증서버로 로그인 요청 -> 인증서버가 DB조회후 액세스토큰, 리프레쉬토큰 발급후 웹서버에 전달 -> 웹서버의 세션에 토큰정보 저장(?) -> 클라이언트단에 쿠키로 토큰정보 저장 -> 다음 요청부터 헤더에 토큰 첨부해서 요청 -> 웹서버는 세션에 있는 토큰과 클라이언트의 토큰을 비교하여 인증여부 확인 (how?) 1. 웹서버의 세션에 토큰정보를 저장하는것이 맞는지 2. 만약 스프링 시큐리티를 연동하려면 웹서버단에서 설정해야하는게 맞는지 대부분의 예시가 별도의 api나 인증서버를 두지 않고 한 프로젝트에서 처리하는것같아서 봐도 헷갈리네요.. 맞는지 알려주시면 감사하겠습니다..!

로그아웃 구현 관련하여 질문이 있습니다.

로그아웃 기능을 구현하기 위해 검색하던 중, 헷갈리는 점이 있어 질문드립니다. 백엔드에서 DB에 저장되어있는 Refresh Token을 제거하고 프론트에서는 AccessToken이 저장되어있는 쿠키를 제거하면 되는 걸로 이해를 하고 있었는데, 어떤 글에서는 프론트에서 쿠키를 제거하면 보안에 취약하기 때문에 백엔드에서 처리를 해야한다는 글이 보이네요. 어떤 방법을 써야할까요?

스프링부트에서 쿠키를 활용하여 조회수 확인

스프링부트 프로젝트에서 게시글 및 페이지 방문자 카운팅시쿠키를 사용하려고 합니다 질문1: 처음에는 세션을 사용했지만, JWT로 로그인한 경우 세션이 초기화되어 방문한 게시글의 ID를 제대로 불러오지 못하는 문제가 발생하여 쿠키로 전환했습니다. -> 왜 로그인한 경우에 세션을 제대로 못 불러오는지 궁금합니다. 질문2: 방문한 게시글은 3시간 후에 다시 증가할수 있도록 하려고 합니다. 각 게시글의 수만큼 쿠키를 생성하여 maxAge로 확인하는 방법은 비효율적으로 느껴집니다. 그래서 한 쿠키에 여러 게시글의 ID를 배열로 넣어 확인하려고 합니다. 이때는 각 게시글의 시간 확인에 어떤 방법을 사용할 수 있을까요? 감사합니다!

결제 완료 페이지에서 뒤로가기 버튼으로 다시 결제 페이지로 이동하는 경우

네이버 쇼핑몰 등의 사이트에서 결제 수단 선택 후 결제하기 버튼을 누르면 결제가 완료되었다는 페이지로 이동합니다. 이 때, 뒤로가기 버튼을 누르면 이전 페이지로 이동했다가 '이미 결제가 완료됐다.'는 알림과 함께 다른 페이지로 이동하게 되는데요, 이러한 기능은 보통 쿠키를 심어서 구현하나요? 아니면 아래처럼 popstate이벤트를 이용해서 구현하나요?

refresh Token은 왜 사용하는건가요??

액세스 토큰이 탈취될 가능성이 있어서, 탈취된 경우 피해를 최소화하기 위해 리프레쉬 토큰을 사용한다고 이해했습니다. 액세스 토큰만을 사용하고, 액세스 토큰을 브라우저의 쿠키에 저장한다고 했을때 쿠키에 httponly, secure 설정 / 서버에 csrf토큰 및 https를 적용하면 Csrf 및 Xss 공격을 예방하고 쿠키에 저장된 액세스 토큰이 암호화 되어 있어 이를 가로챈다고 해도 원래 값을 알아낼 수 없으니 액세스 토큰 자체가 탈취될 가능성을 배제할 수 있을 것 같은데 어떤 이유에서 리프레쉬 토큰을 쓰는건가요??? 정말 너무 너무 궁금한데 지식이 부족해 구글링으로 속시원한 답을 찾아낼 수 없어 질문 올려봅니다..!

socket.io 와 토큰 인증.

안녕하세요. 현재 프론트는 next13, 서버는 nest를 사용해서 간단한 채팅서비스를 구현하고있습니다. 현재 로그인을 하게 되면 토큰을 서버에서 클라이언트의 쿠키에 설정해주고있습니다. 클라이언트에서 이제 소켓에 연결할 때 토큰을 보내서 인증된 사용자인지 확인하려고 하는데, 이럴 경우 토큰을 어떻게 보낼수 있을까요,,? 현재 생각하는 방법은 사용자의 상세 정보를 불러오는 api를 만들어서 사용자의 상세 정보를 받아온 후, 그 사용자의 id를 토큰 대신 소켓 연결할때 보내려고 생각하고있습니다. 혹시 더 좋은 방법이 있을까요,,?