#cookie

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하는게 안됩니다. 이럴 경우는 어떻게 해야할까요?

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해주는데 백그라운드에서 앱을 완전히 종료시키고 다시 실행하면 쿠키가 사라지더라고요... 왜 그런건가요...??

로그인 구현 관련 질문 subdomain.com

안녕하세요 슬랙처럼 로그인을 하면 워크스페이스 리스트가 나오고 해당 워크스페이스를 클릭하면 해당 워크 스페이스로 로그인이 되는 페이지를 구현하려 하는데요. Next.js를 사용중이고 iron-session 라이브러리 통해서 세션을 저장하고 있습니다. ex) app.oursite.com <- 통합 로그인 페이지 워크스페이스 클릭하면 해당 워크스페이스 로그인을 하고 세션을 저장해서 워크 스페이스 사이트로 redirect 시키려 하는데, const session = await getIronSession<Session>(cookies(), { cookieName: 'cookie', password: IRON_SESSION_SECRET_KEY, cookieOptions: { secure: false, // 로컬 테스트에서는 false, 실제 배포에서는 true로 설정 sameSite: 'Lax', // sameSite 옵션을 Lax로 설정 domain: 'localhost', // 로컬 테스트 시 domain 설정을 제거하거나 localhost로 설정 path: '/', }, }); {workspace1}.ourstie.com {workspace2}.ourstie.com 세션 저장이랑 redirect 처리했을때 세션 저장하고 해당 페이지 확인은 하였는데 해당 페이지에서 로그인 인증은 제대로 되지 않고 있습니다. 로그인 페이지로 이동되더라고요 로그인이 안되는 원인으로 짐작가는게 있으면 알려주시면 감사하겠습니다

Streamli app Azure에 배포시.

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

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이 안되나요? - 제가 생각한 구조 말고 추천하시는 토큰 관리 방식에 대해서 알려주셔도 감사하겠습니다. 아직 초보 개발자에 글도 잘 쓰지 못해 이해하시기 힘들 것 같지만, 넓으신 아량으로 지식을 나눠주신다면 정말 큰 도움이 될 것 같습니다. 긴글 읽어주셔서 감사합니다 (_ _)

JWT 토큰 중 accessToken은 어디에 보관하는 것이 좋을까요?

안녕하세요 jwt 토큰 보관에 대해 질문 있습니다. 원래는 accessToken은 로컬스토리지에, refreshToken은 httponly cookie로 보관하려 했습니다. 하지만 accessToken을 로컬스토리지로 보관하면 XSS 공격에 취약하다라는 단점 때문에 로컬 변수를 사용하라는 글도 종종 보이더라구요. 어떤 방식을 사용하는게 좋은 방법일까요? 퍼널 형식의 웹페이지며, 이메일 인증을 통해 토큰을 발급합니다. acceToken의 만료 시간은 30분정도로 생각중입니다.

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

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

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

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

Next.js에서 클라이언트 컴포넌트와 서버 컴포넌트의 axios interceptor 동기화

안녕하세요 Next.js 13버전 page router방식으로 개발중입니다. 클라이언트 컴포넌트와 서버 컴포넌트에서의 통신을 위해 각각 axios interceptor를 구현했습니다. 각각 store와 cookie에서 accesstoken값을 헤더에 넣어주는 역할을 하고 있는데 문제가 되는 부분은 토큰 만료 이후 갱신하는 부분입니다. interceptor가 두개이다보니 처음에는 서로 동일한 토큰응 가지고 있지만, 만약 클라이언트 컴포넌트에서 요청시 토큰이 만료되면 갱신하는 요청을 보내고, 서버 컴포넌트에서 요청시 만료되면 갱신하기 때문에 서로 일치하지 않는, 유효한 토큰이 두개가 되는 상황입니다. 현재 서버에서는 유효한 토큰이 하나만 존재하도록 설계를 해놓진 않아서 작동하는데 문제는 없지만 많이 찝찝하네요. 혹시 좋은 방안이 있을까요? 혹은 비슷하게 구현하신 분들의 상황을 공유 받을 수 있을까요?

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, }), }), ); ```

Backend에서 endpoint를 무슨 기준으로 정하는지 궁금합니다

저가 front 부분만 공부하다가 지금 처음으로 서버 쪽 endpoint를 작성해보고 있습니다. 이 고민을 하게 된 이유는 처음에는 cookie로 정보를 보낼까 했다가 아는 backend 지인이 cookie로 보통 보내지 않고 필요한 정보는 dynamic routing을 이용해서 params로 전달하는 것이 좋다고 해서 변경하다가 endpoint가 복잡해져서 잠깐 멈추고 여기에 질문을 올립니다. endpoint를 정하는 기준이 있을까요?

Spring 과 node.js 두 기술을 동시에

안녕하세요 25살 백엔드가 꿈인 학생입니다:) 처음에는 javascript로 입문하여 node.js 까지 해서 crud는 물론이고 jwt token cookie validation까지 해보았습니다. 알고리즘 문제 중에 세그먼트 트리 까지 javascript로 코드를 작성하고 그 만큼 알아가는 시간도 좀 되어서 그래도 초급은 뗀 정도가 되지않았을까 합니다. 이제는 시장을 고려하여 java를 배워야 하지 않을까 하는 생각에 java를 배우고 알고리즘도 dp 부터 다시 java로 하고 있습니다. 근데 생각보다 재밌어서 다행이었어요. 근데 이제 java spring을 배워야 하는데 뭔가 node를 버리기가 아깝더라고여, 나중에 시장이 어떻게 될지 모르니까요. 근데 또 같이 병행하면 집중이 힘들 거 같고, 또 방치하자니 까먹을 거 같구여… 한국에서 백엔드로서 취업을 하려면 java spring 과 spring boot를 배우는 게 당연한 거겠죠? (가고싶은 기업이 어느쪽인지 정해지지 않았습니다. 근데 스타트업 보다는 중소 이상을 원합니다) 사실 마음은 spring 쪽으로 기울어서 node 의 시장을 볼 때 돌아가지는 않을 거 같긴한데.. 남의 떡이 더 커 보인다고 node가 아쉽네요. 아무리 Java 베이스 node 서브로 하더라도 나중에도 기억해낼 자신이 없어서요..ㅠㅠ Node는 거의 놔주는 게 맞을까요..?

[next-auth] 서버사이드에서 session 생성 및 수정 하는 방법

(next.js 13버전 app route 기준) 안녕하세요. 이번 프로젝트에서 next-auth를 사용하여 인증 구현을 진행 하고 있는데요. 일반적인 사용법들은 구현을 하였습니다. - 클라이언트에서 signIn, signOut, update 등 session 제어 - 서버사이드에서 getServerSession를 사용하여 session 정보 확인 하지만, 아래의 두 가지를 구현하는 것에 있어 어려움을 겪고 있습니다. 1. 서버사이드에서 사이트 첫 접속 시(새로고침 시) session이 없다면 세션 자동 생성 2. 서버사이드 전용 axios 유틸 파일에서 session의 토큰이 만료되었다면, refresh token(쿠키)으로 새로운 access token을 가져와서 기존 session에 업데이트 후 재요청 next-auth를 많이 사용하는 것 같고, 서버와 클라이언트에서 적절히 사용하실 것 같은데 아무리 찾아봐도 위에 대한 해결책은 없는 것 같습니다. 1번 사항과 같이 서버 사이드에서 session을 즉시 만드는 경우는 저희 프로젝트에 좀 특수한 경우인 것 같고, 2번의 경우는 일반적인 토큰 갱신 방식인 것 같은데 토큰 갱신은 서버사이드에서 어떻게 할 수 있을까요? 해결 방안이 있거나, 이러한 상황에서는 어쩔 수 없이 access token을 쿠키로만 관리해야 하는 것인지 의견 부탁 드립니다. 서버와 클라이언트에서 access token의 만료 갱신 처리를 위해 access token을 보통 어디에 관리하시나요? cookie만이 방법일까요?

React 검색 결과 새 탭 열기로 기능 추가할 수 있을까요?

안녕하세요. 사내 프로젝트를 진행 중인데 고객 요청 사항 중 한 가지의 구현 방법에 관해 질문드립니다. react-router v6를 사용 중이며, 검색 기능이 많은 앱입니다. 앱 특성상 검색 필터를 통해 입력할 값이 많고, 검색 결과가 나오는데 오래 걸리는 편인데요. 고객이 요청한 사항은 1. 다른 페이지를 다녀와도 기존의 결과가 유지되도록(계속 볼 수 있도록) 2. 탭 UI로 변경해달라 위의 사항을 충족하려면 기존의 UI를 갈아엎거나 기획을 해서 새로 만드는 게 나은 수준이라고 판단했습니다. 임시 방편으로 검색 결과를 브라우저의 새 탭 열기를 통해 보여주려고 하는데, 가능할까요? 로그인 정보(username, token)는 브라우저에 cookie로 저장하고 있고, 검색에 필요한 query string은 URL과 header를 통해 서버에 요청하고 있습니다. 따라서 새 탭에 params들을 모두 전달해줘야 할 것 같은데요. 적절한 방법이 도저히 떠오르지 않네요. 구글링할 수 있는 키워드라도 알려주시면 감사하겠습니다.

Next.js(13.4.0) 모든 페이지에서 토큰 유/무 판단하기

현재 signup, signin, home, save, mypage 총 5개의 페이지가 있습니다. home, save, mypage에서 refresh-token의 존재 유/무에 따라서 signin 경로로 redirect 시키려고 합니다. 로그인을 하면 localStorage에 access-token 저장, browser cookie에 refresh-token이 저장됩니다. 로그인 후에 임의로 refresh-token 값을 지웠을 때, signin 경로로 redirect 시켜주기 위해 각 페이지에서 getServerSideProps를 사용하여 refresh-token의 존재 유/무를 판단하여 redirect를 시켜주고 있습니다. 현 상황처럼 각 페이지에서 인증을 처리하는 것이 아닌 모든 페이지에서 공통으로 인증을 처리하는 방법이 있는지 궁금하여 질문드립니다.

JWT 인증과 로그인 상태 유지

웹 프로젝트를 진행하는 과정에서 jwt 인증과 로그인 상태 유지에 관해 질문이 있어 글 남깁니다. 현재 서버측에서 로그인 요청을 받고 로그인 완료 시에 클라이언트 측으로 access token 과 refresh token 을 응답으로 주고 client 측에서는 refresh token 은 cookie 에 access token 은 클라이언트 측 로컬 변수에 저장해 사용할 예정입니다. 로컬 변수에 access token 을 저장하면 페이지 리로드나 페이지 이동 시에 로그인 상태를 유지해야 하는데, 이를 처리하는 부분에서 고민점이 생겼습니다. 일단 인증이 필요한 요청이 아니더라도 서버 측에서 로그인 된 사용자라면 정보를 다르게 반환해줘야 하기 때문에 모든 요청에 대해서 로그인 된 사용자의 요청이라면 access token 을 헤더에 포함해 요청을 보내도록 할 것입니다. 첫번째 해결 방안은 클라이언트 측에서 페이지를 로드할 때 cookie 에 refresh token 값이 존재하면 로그인 된 상태라고 판단하고 서버측에 access token 재발급 요청을 보내는 방법입니다. 두번째 해결 방안은 서버측에서 인증이 필요한 요청을 받았을 때 access token 이 존재하지 않으면 받은 요청의 cookie 값을 확인하고 로그인 된 사용자라면 재발급 요청 신호를 클라이언트 측으로 보내고 로그인 된 사용자가 아니라면 로그인이 필요하다는 신호를 클라이언트 측으로 보내고, 서버측에서 인증이 필요하지는 않지만 로그인 된 사용자라면 정보를 다르게 반환해줘야 하기 때문에 access token 이 없이 온 요청에 대해서 cookie 값을 확인하고 로그인 된 사용자지만 access token 이 없으면 재발급 신호를 클라이언트 측에 보내고 클라이언트 측에서 재발급 요청을 보내고 access token 을 포함해 진행 중이던 요청을 다시 보내는 방법 이렇게 두가지를 생각해 봤습니다. 가장 간단한 방법은 access token 을 cookie 나 로컬 스토리지에 저장하는 방법이지만 보안을 위해 이 방법은 제외했습니다. 서버측에서 사용자의 로그인 상태를 확인하는 것은 jwt 의 장점을 무시하는 것 같기도 하고 서버측에서 지속적으로 사용자의 로그인 상태를 확인해야 해서 부담이 있을 것 같고 클라이언트 측에서 사용자의 로그인 여부를 판단하는 것은 과연 옳바른 해답인지 의문이 들어 질문 남깁니다.

Next.js server component(app router)의 auth 관련 질문 입니다.

안녕하세요. 이번에 Next.js(13)에서 최신 기술인 app router를 기반으로 자그마한 홈페이지를 구축 중에 있습니다. JWT 기반으로 SSR을 구축하고 있습니다. middlware로 어떻게 든 토큰 재발행이 가능한 로그인 구현을 완료 했습니다. 하지만 ServerComponent이다 보니, RSC에서 accesstoken 혹은 refreshtoken과 같은 인증 토큰이 만료 되었을 때, 재 발행을 하려면 어떻게 해야 할까요? cookie나 header는 접근은 가능해도 Set-Cookie를 내려 보내거나 할 수는 없는 걸로 문서에 나오고 실제로도 되지 않습니다. 어떻게 하면 ServerComponent에서 토큰을 재발행 하거나 다른 인증 방법이 있을 까요? 아니면 JWT + Session으로 가는 조합을 사용 해야 할까요??? 또, client와 server 간의 토큰 공유를 위해 access-token만 http-only를 해제하고 사용 중에 있습니다. 이게 cors나 csrf와 같은 공격에 취약한 문제가 있어서 이게 올바른 구현 방법일까요? 일단 제가 찾은 방법으로 가장 쉽게 해결되는 방법은 아직 실험 단계인 server action을 활성화 해서 클라이언트에서 토큰을 가지고 있을 필요가 없이 서버에서만 관리 하는 방법입니다. BFF을 일부 수용해서 해결 했습니다. front <-> BFF <-> api

spring, react 프로젝트에서 로컬에서 동작하던 쿠키 저장 로직이 배포환경에서 동작하지 않는 문제 어떻게 해결해야 하나요?

spring과 react로 프로젝트 진행중인데, 로그인 하면 spring에서 쿠키를 설정해주는데 로컬에서는 잘 작동했었는데 배포나 모바일(같은 와이파이)로 접속하면 쿠키저장이 잘 안되는 현상이 있는데 혹시 해답을 아시는 분이 계실까요..? cookie는 secure, httponly, sameSite=None 설정이 되어있는 상태입니다

리액트로 스프링과 웹소켓 채팅방을 구현했는데 자동 랜더링이 안됩니다..

안녕하세요! 현재 웹소켓으로 스프링과 채팅기능을 구현중에 있습니다 채팅방에서 채팅을 보내고 받는 건 가능한 상태인데 같이 채팅방에 입장해서 A가 B한테 보냈을 때 B가 페이지를 새로고침 하지 않으면 채팅이 자동 랜더링이 되지 않는 상황인데 여러 방법을 참고하고 해봤지만.. 성공하지 않았습니다 어떻게 풀어나가야 할지 잘 모르겠습니다 ㅠㅠ 코드가 길지만 ... 혹시 답변이 가능할까해서 참고해봅니다 좋은 키워드도 추천해주시면 감사하겠습니다!!... export const ChatRoomPage = () => { //메뉴 모달 const [isModalOpen, setIsModalOpen] = useState(false); const [isExitModalOpen, setIsExitModalOpen] = useState(false); const [backgroundPosition, setBackgroundPosition] = useState('static'); const location = useLocation(); const params = location.pathname; const segments = params.split('/'); const RoomUniqueId = segments[4]; const RoomId = segments[5]; const [messageData, setMessageData] = useState([]); const [messageList, setMessageList] = useState([]); const [message, setMessage] = useState(''); const accesskey = Cookies.get('Access_key'); // 채팅방 입장시 안내 문구 기능 const [showModal, setShowModal] = useState(false); const client = useRef({}); useEffect(() => { console.log('유즈이펙트 쉴행'); setShowModal(true); connect('L'); return () => disconnect(); }, []); const connect = type => { client.current = new StompJs.Client({ brokerURL: 'ws://222.102.175.141:8081/ws-stomp', connectHeaders: { Access_key: `Bearer ${accesskey}`, }, debug: function (str) { console.log('str ::', str); }, onConnect: () => { if (type === 'L') { subscribe(); publish(); } else { subscribe1(); publish1(); } }, }); client.current.webSocketFactory = function () { return new SockJS('http://222.102.175.141:8081/ws-stomp'); }; client.current.activate(); return () => disconnect(); }; const subscribe = () => { client.current.subscribe(`/sub/chat/messageList/${localStorage.memberUniqueId}`, message => { // console.log('messageData11 : ', JSON.parse(`${message.body}`)); setMessageData(JSON.parse(`${message.body}`)); const data = JSON.parse(`${message.body}`); setMessageList(data.data.chatMessageList); }); }; const publish = () => { client.current.publish({ destination: `/pub/chat/messageList/${localStorage.memberUniqueId}`, body: JSON.stringify({ chatRoomId: RoomId, chatRoomUniqueId: RoomUniqueId, page: 0, }), }); }; const closeModal = () => { setIsModalOpen(false); setBackgroundPosition('static'); }; const openModal = () => { setIsModalOpen(true); setBackgroundPosition('fixed'); }; const handleBackdropClick = e => { console.log('e ::', e); if (e.target === e.currentTarget) { closeModal(); } }; const ExitopenModal = () => { setIsExitModalOpen(true); }; const ExitcloseModal = () => { setIsExitModalOpen(false); }; const ReportButtonHandler = () => { alert('곧 업데이트 예정입니다!'); }; // 채팅 보내기 const sendMessage = message => { console.log('message :: ', message); connect(); setMessage(''); return () => disconnect(); }; const subscribe1 = () => { client.current.subscribe(`/sub/chat/message/${RoomUniqueId}`, message => { setMessageData({ ...messageList, message }); }); }; const publish1 = () => { client.current.publish({ destination: `/pub/chat/message/${RoomUniqueId}`, body: JSON.stringify({ memberId: `${localStorage.memberId}`, memberName: `${localStorage.memberName}`, memberUniqueId: `${localStorage.memberUniqueId}`, memberProfileImage: `${localStorage.profileImage}`, chatRoomId: RoomId, chatRoomUniqueId: RoomUniqueId, message: message, }), }); }; const disconnect = () => { client.current.deactivate(); }; console.log('messageList :: ', messageList); return ( <> <div style={{ width: '100%', height: '100%', position: backgroundPosition, }} > <Background> <Topbar> <Link to={`${PATH_URL.PARTY_CHAT}/${localStorage.memberUniqueId}`}> <TopBackDiv> <LeftBack /> </TopBackDiv> </Link> <TopbarName>모임이름</TopbarName> <ModalBtn onClick={() => { openModal(); }} > <RoomMenuIcon /> </ModalBtn> </Topbar> <Container> <Contents> <ParticipantDiv>ㅇㅇㅇ님이 참여했습니다.</ParticipantDiv> {messageList?.map((data, index) => { return ( <OtherDiv key={index}> <div style={{ position: 'relative', }} > <OtherImg> <OtherProfile> <img src={data.memberProfileImage} alt="profile" style={{ width: '100%', height: '100%', borderRadius: '8px', }} /> </OtherProfile> <OtherHostIcon> <PartHostIcon /> </OtherHostIcon> </OtherImg> <OthertInfo> <OtherName>{data.sender}</OtherName> <OtherContents> <OtherChatText>{data.message}</OtherChatText> <OtherChatTime>12:19 pm</OtherChatTime> </OtherContents> </OthertInfo> </div> </OtherDiv> ); })}

next js middleware redirect 질문 있습니다.

안녕하세요, next js middleware를 사용해 로그인 사용별 화면을 분기하고 있습니다. 다름이 아니라 사용하면서 문제가 있어 이리저리 검색하다가 해결방법을 찾지 못해 글 남깁니다. 문제1. 브라우저 뒤로가기시 redirect대상 페이지면 title 미변경 문제. redirect된 페이지의 title이 아닌, redirect대상의 title이 적용되었습니다. redirect가 서버에서 브라우저에 요청하는 것이고 브라우저는 이를 실행은 하나 title은 변경되지 않았습니다. 2. 로그인후 뒤로가기를 계속 진행한후 브라우저 첫 페이지(구글)도달후 앞으로 가기를 하면 무한 리디렉션 문제가 발생. 해당 문제는 로그인후 메인 화면으로 넘어간 후 다시 뒤로가기를 반복하고 첫 페이지 도달시, 다시 앞으로 가기해서(예를 들어 로그인 페이지)면 미들웨어가 화면전환 도중에 리디렉션 요청이 많다고 에러를 발생 시킵니다. 아래는 제가 사용하는 코드를 첨부하겠습니다. 요약하자면 redirect하면 title 변경이 안됨. 뒤로가기후 다시 앞으로 가기하면 리디렉션 에러가 발생함. 만약 다른 방법이 있다면, 현업에선 어떻게 처리하는지 궁금합니다. export const verifyUser = (request: NextRequest, moveUrl: string) => { // const includesPage = ['/', '/auth/login', '/dashboard/customdashboard']; const accessToken = request.cookies.get('accessToken')?.value; const url = request.nextUrl.clone(); if (accessToken && isTokenExpired(accessToken)) { // 로그인 페이지 요청시 사용자 검증이 완료된 상태면 / 페이지로 강제 리다이렉트시킴. if (moveUrl === '/auth/login' || moveUrl.startsWith('/signup')) { url.pathname = '/'; return NextResponse.redirect(url); } return NextResponse.next(); } else { // 일반 페이지 요청시 사용자 검증이 미완료된 상태라면 로그인 페이지로 강제 리다이렉트시킴. if (moveUrl === '/auth/login' || moveUrl.startsWith('/signup')) { return NextResponse.next(); } removeLoginCookie(); url.pathname = '/auth/login'; return NextResponse.redirect(url); } };

Next.js SSR에서 token refresh를 어떻게 처리하나요?

access token, refresh token을 cookie에 저장, 사용하는 방식으로 로그인 로직을 작성중입니다. 1. SSR에서 access token으로 로그인 유무를 확인한다. 2. access token이 만료됐다면, refresh 요청을 한다. 3. 새로운 token cookies를 받아온다. 4. 서버에서 새로운 token cookies를 받아왔으니 클라이언트에 token cookies 쿠키를 똑같이 전달해야하는데, 어려움이 있습니다. 해결책이나 혹시 더 좋은 방법이 있으시면 답변 부탁드립니다!

React-native에서 webview로 cookie 넘겨줄 때, Ios cookie 에러

안드로이드에서는 cookie를 webview로 잘 받아서 넣어주는데 Ios에서는 cookie 전달이 잘 안 되는 문제가 발생합니다. Link앞에 .를 붙였더니 됐다 안 됐다 하긴 하는데 명확한 해결책이 궁금합니다! 도움이 절실합니다..🥹

로컬 환경에서 외부 사이트 로그인 인증 질문입니다 !

nodejs - axios - express - cors 안녕하세요 올해 컴공으로 전과하게되어 웹 프론트엔드를 바라보고 공부중인 3학년 학생입니다. 다름이아니라 간단하게 학교 홈페이지에서 식단 리스트를 받아와 데이터베이스에 저장 후 한 주의 학식과 기숙사 식당의 메뉴를 보여주는 웹 사이트를 만드는 중입니다만... 학교 홈페이지에는 재학생만 접근이 가능하여 nodejs 서버에서 제 아이디와 비밀번호로 post 요청을 보냈고 response 헤더에는 status 200이 나타나는데 메뉴 페이지에 get 요청을 보내면 세션이 만료되었다는 응답과 응답 헤더에는 connection: 'close'로 나타납니다. 그래서 인증 문제인가싶어 로그인 요청 후 받은 cookie값을 변수에 저장하고 get 요청에 담아 보냈지만 결과는 같았습니다. post 요청 이후 get 요청을 하도록 비동기 처리했습니다. 지금 화장실에서 글을 쓰느라 코드를 적지 못하는점 양해 부탁드립니다 ㅠㅠ... +아 혹시 포스트맨에서 로그인 요청시에는 쿠키 값이 총 세개가 있었는데 나머지 두개가 인증에 관한 것인지 찾아보겠습니다. ++ 로그인 요청시 받은 쿠키입니다 cookie : { 세션아이디 httpOnly : true, sameSite : 'none', maxAge : 5300000, secure : true, httpOnly : true },