#토큰

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

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

블록체인 개발 입문 책 추천 해주세요!!

블록체인 관련된 스마트계약, 저작권 관리, 토큰 발행, 사용자 인증, 지갑 등등의 기술을 공부하고 적용해서 새로운 서비스를 만들어보고 싶은데, 어떤 책을 보고 시작해보면 좋을지 잘 모르겠습니다. 이쪽은 완전 처음이라 감이 잘 안 잡히네요.. 현재 프론트엔드 개발을 위주로 공부하고 있고 javascript를 주력 언어로 삼고있어서 프론트 백도 이 언어로 구현할 것 같습니다. 따로 책을 찾아보고는 있지만 추천 받는 것도 좋을 것 같아 올려봅니다! 참고로 만들어보고 싶은 서비스는 블록체인 기반 유튜브 또는 sns 서비스입니다. 공부 차원에서 시작하는 수준이라고 생각해주시면 될 것 같습니다...

리액트 웹소켓 사용자 인증

웹소켓을 사용해서 채팅구현 중에 있습니다. 이때 사용자 인증 처리를 핸드셰이크 시 요청 헤더에 토큰을 담아 보내려고 합니다. Web Socket API에선 요청 헤더에 토큰을 담아 보내는게 안되고, Socket.IO나 SockJS 라이브러리를 사용하라는걸 알게되었는데 혹시나 라이브러리 사용하지 않고 Web Socket API 에서 요청 헤더에 토큰을 담아보내는 방법이 있나요?

6개월 차 미래의 방향성을 못 잡고 있는 PHP개발자입니다.

안녕하세요. 비전공, 6개월 학원다녀 운좋게 취업한 PHP7.x codeigniter 3.x 버전으로 조그마한 웹 에이전시 회사다니고 있는 개발자입니다. 현재 진행한 프로젝트는 작은 프로젝트들까지 합쳐 1X개 정도를 진행하였는데 1~3개월 차에는 단순 CRUD하는 정도의 자그마한 프로젝트에서는 정말 잘하는 것 같다고 이야기를 많이 들었었는데요. 여기서가 문제였던 것 같습니다. 초반에는 10시가 되던 12시가 되던 늘 실력을 먼저 키워야지 하며 야근도 마다하지 않고 진행을 했었습니다. 하지만 최근 들어 제 자신이 나태해졌고 API를 10개 정도 연동시키는 프로젝트를 진행하였는데 정말 헐떡이면서 진행하였습니다. ( 자세히 말씀드리자면 로그인 API는 어렵다고 생각이 들어 토큰방식을 사용하지도 못하였고 단지 들려온 값이 암호화된 아이디를 저장해 해당 값이 있으면 user로 로그인 하는 식으로 진행하였습니다. 프레임워크를 사용한 게 맞나 싶을 정도로 MVC를 지키지 못하고 더티코드로 진행하였습니다. ) 특히 결제 API에 대해서는 (은행사 X 카드사입니다.) 끝끝내 마무리하지 못해 시니어 개발자 분에게 맡긴 후 돌아섰습니다. 이번 프로젝트를 진행하며 제가 너무 부족하단 걸 깨달았고 초반에 비해 정말 많이 나태해졌구나..란 걸 중요하게 깨달았고 공부를 진행해야겠다 라고 생각이 들었고, 도대체 어떤 공부를 해야되지? 라는 생각이 절실하게 느껴 질문 남겨봅니다. PHP, CI개발자로서 현재 저의 역량을 키우기 위해서는 어떤 공부를 해야되고 어떤 식으로 공부해야 될지 감이 안 잡힙니다... 두서없는 이야기가 되었지만 긴 글 읽어주셔서 감사드리고 안타까운 후배 한 명 살려주시는 마음으로 주니어 때 어떤 식으로 공부하셔서 시니어까지 되셨는지 알려주시면 열심히 노력해보겠습니다. 감사합니다.

OAuth2 + jwt 환경 부하 테스트 방법에 대한 질문..

최근 성능 테스트의 중요성에 대해 알게 되어서 목표 성능치를 두고 부하테스트를 진행해보려는 계획에 있습니다! 테스트 툴로는 nGrinder를 사용할 생각인데요, 문제는 제 서버가 이메일 로그인을 지원하지 않고 oauth2와 jwt를 활용한 인증/인가 방식을 사용하는데 부하테스트 시 가상 유저에게 어떻게 accessToken을 발급해주어야 하는지에 대한 궁금증이 생겼습니다..! 제가 생각해본 방식들은 다음과 같습니다. 1. 실제 유저에 대한 accessToken을 하나 발급해두고 이를 고정값으로 사용한다. - 이 방식은 제일 편하지만 사실상 한명의 유저에 대한 시나리오만 테스트할 수 밖에 없고, 같은 유저에 대한 각종 캐싱된 데이터들로 인해 실제 상황과는 동떨어진 작업이 될 것 같아 채택하지 않았습니다. 2. FakeAuthServer와 같은 가상의 OAuth 서버를 만들어 로그인을 시도한다. - 구현하기는 어려워보이지만 그나마 가장 실제 서비스와 동일한 형태입니다. 하지만, 제가 테스트하려는 시나리오는 여러 요청에 대한 순차적인 테스트가 아닌 하나의 API가 얼마나 많은 부하를 견딜 수 있는지 보기 위한 테스트라서 굳이 로그인 과정을 테스트에 포함시킬 필요는 없어보입니다.. - 사실 하나의 API에 대한 테스트만 진행해도 괜찮은지 몰라서 이 방법을 버리지 못하고 있습니다 3. nGrinder의 테스트 스크립트에서 @BeforeThread에 jwt를 발급받는 로직을 작성해서 테스트 전 미리 토큰을 발급받아 요청한다. - 이 방식은 로그인 과정은 포함되어 있지 않고 이미 토큰을 발급받았다는 가정하에 하나의 API만 테스트하기 가장 적합한 방법이라고 생각이 되었습니다. - 번거롭지만 jwt를 직접 생성해주기 위해 jjwt 라이브러리를 nGrinder에 포함시켜야 될 것 같습니다 - 하지만 이렇게 스크립트에서 토큰을 발급해주는게 맞는지 실무에서도 이런식으로 사용하는 경우가 있는지 궁금합니다.. 처음 부하 테스트를 적용하려고 하는데 oauth2 + jwt로만 구성된 예제가 보이지 않네요 ㅠㅠ 어느 방법이 가장 적절한지 혹은 더 나은 방법이 있는지 조언을 구하고자 질문 남깁니다!

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 호출

웹뷰 auth 처리 질문입니다

안녕하세요, React native에서 각 탭들이 서로 다른 웹뷰를 사용하고 있습니다. 한 탭에서 accesstoken을 refresh를 하고 있는 상태에서 다른 탭에 들어갈 경우 refresh token이 갱신되지 않은 상태에서 요청을 보내 동시성 이슈(race condition)가 발생할 수 있을 거 같은데 어떻게 해결해야 할까요? 그냥 단일 웹일 때에는 axios interceptor에서 큐에 넣어서 해결했는데.. 토큰을 갱신해야 할 때마다 앱단으로 보내준 다음에 거기서 큐로 처리하고 완료되면 각 웹뷰로 뿌려주는 방식으로 가야 하려나요? 현직에 계신 분들 웹뷰 auth 어떻게 처리하시나 궁금합니다.

깃랩으로 인해..제 인생이

현 대학생 입니다.. 토큰까지 하고 프로젝트를 가져왔습니다. 로컬에서 dev-▪️▪️▪️을 만든 상태입니다.. 개인으로 브랜치를 내리라 해서 그것도 했구요.. 하지만 여기서 막혔습니다.. 이제 어디서 프로젝트를 만들고 작업을 해야 하는 거죠....?제발... 제가 미래의 직업을 개발자로 여겨도 되는지 정말 저 스스로 무료해 지고 너무 속상합니다.. 깃랩은 필수라는데 깃랩을 못 써서 프로젝트 포기...ㅍ이건 제 계획에 없는데 이런 머저리같은 저를 제발 제발 도와주세요

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

환경변수 주입 및 빌드(모노레포)

모노레포 프로젝트 환경 및 요구사항 - 프로젝트는 front(React), back(Node), common 패키지로 구성되어 있으며, 모노레포로 되어있음 - Dockerfile 스크립트에서는 build → run 순서로 실행되도록 구현되어 있음 - 서버 배포 시에는 하나의 포트만 사용해야 하므로 back(Node)에서 front의 정적 파일(index.html)을 실행해야 함 - Docker 빌드 시, front(webpack 빌드)와 back 둘 다 build 스크립트를 실행하고, 이미지 실행 시에는 back만 run 스크립트를 실행하여 back에서 front의 정적 파일을 실행해야 함 - 환경변수는 이미지 실행 시 docker-compose.yml의 env_file 속성을 사용해 외부에서 주입해야 함(환경변수가 바뀌는 상황이 있다면 .env 파일을 수정한 후 다시 빌드해야 합니다.) 예외 상황 Docker 빌드할 때 .env 파일을 포함하지 않고 run 스크립트를 실행(이미지 실행) 시 주입하는데, front 패키지에는 run 스크립트가 존재하지 않습니다. (back에서 front의 정적 파일을 실행) 즉, 환경변수가 주입되지 않고 있음 해결 방법 첫번째는 back에서 front의 dist 파일 호출 시 환경변수 객체를 만들어 value 값을 key 값으로 치환해서 함께 넘기고, index.html의 head에서 window 객체를 활용해 값을 받는 방법 하지만 이 방법은 개발자 도구에서 환경변수 값이 노출되고, window 객체를 활용하기 때문에 새로운 브라우저를 생성할 때마다 사이드 이펙트가 발생할 수 있음 두번째는 모노레포 root 패키지에서 prerun 스크립트로 front의 build 스크립트를 실행하는 방법 스크립트 -> "prerun": "lerna run build --parallel --scope @projectname/front --stream", 이 방법은 빌드를 두 번 실행하므로 자원을 많이 소모하지만, 예외 상황이 없는 것으로 보임 질문 받은 내용 Q. 환경변수를 바꾸는 상황이 존재할까요? A. 회사의 인프라 환경에 따라 다르지만, 포트나 IP가 변경될 수 있는 상황이 있음 예를 들어, 외부 서버에 요청을 보낼 경우 그 서버의 정보가 바뀌면 설정을 변경해야 하며, 다른 서버에 요청할 때 인증 정보를 입력해야 하는데, 토큰이나 사용자 패스워드 값이 변경될 경우에도 수정이 필요함 고민되는 부분 다른 해결 방법이나 비슷한 상황이 있다면 함께 논의하고 싶습니다. ㅎㅎ *프로젝트 구조 root ├── packages │ ├── back │ │ ├── package.json │ │ ├── index.ts │ │ ├── .babelrc │ │ └── ... │ ├── common │ ├── front │ │ ├── public │ │ │ └── index.html │ │ ├── package.json │ │ ├── src │ │ │ └── index.js │ │ ├── src │ │ ├── webpack.config.js │ │ └── ... ├── package.json ├── lerna.json ├── docker-compose.yml ├── Dockerfile * 프로젝트의 중요 정보는 제외했습니다.

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

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

스프링 mvc jwt토큰

스프링 mvc에서 타임리프로 웹 제작중인데 jwt엑세스토큰을 해더에 담는데 리다이렉트 쓰면 헤더가 소멸되는데 어떤식으로 사용해야할까요 로그인 후 정보를 가지고 서비스 메인페이지로 가는데 쿼리나 포스트로 정보를 받아서 사용해야하는지 Jwt에서 즉 필터에서 다른 방법이 있는지 궁금합니다!

spring security에서 JWT를 사용할 때 질문이 있습니다.

SecurityConfig에서 .requestMatchers(HttpMethod.GET, "/boards/*/comments").permitAll() 이런 식으로 허용을 해주고 JwtAuthorizationFilter에서 accessToken이 유효하지 않으면 response에 토큰에 문제가 생겼다는 에러 메세지를 리턴을 하게 해뒀습니다. GET /boards/*/comments 요청을 보내면 해당 게시물의 댓글들을 조회를 해올 때 좋아요를 누른 상태인지 누르지 않은 상태인지 구분을 할때 문제가 생겼습니다. 로그인을 한 사용자는 댓글들을 조회할 때 좋아요를 눌렀나 안눌렀나 확인을 해야하고 로그인을 하지 않은 사용자는 무조건 좋아요를 안 누른 상태로 해야되는데 JwtAuthorizationFilter에서 에러 메세지를 리턴을 하되면 로그인을 해야지만 조회가 되는 문제가 생기고 JwtAuthorizationFilter에서 에러 메세지를 리턴하는 코드를 빼자니 모든 Controller쪽에서 null체크를 해줘야 하고... 감을 못잡겠습니다ㅜ_ㅜ

아임포트 결제 API 환불 요청 시 액세스 토큰 발급 문제

안녕하세요, 제가 현재 쇼핑몰 프로젝트를 개발 중입니다. 우선, 아임포트 API로 결제 서비스를 개발한 다음, 환불 기능도 추가하려고 찾아보던 도중, 환불 요청을 보내기 위해서는 액세스 토큰을 따로 발급해야 한다고 합니다. 액세스 토큰을 따로 발급을 받기 위해서는 API키와 비밀키를 통해 가져와야 하는데, 보안 상 문제로 서버 사이드에서 액세스 토큰을 발급 받아야한다는 것을 알았습니다. 그러나 react는 클라이언트 사이드 라이브러리인데 그러면 서버 사이드 환경을 만들기 위해 Express 서버를 설치해야만 이 문제를 해결할 수 있나요?

제가 프론트엔드가 맞는건지 모르겠어요.

제가 현재 프론트엔드로 다른 친구들과 백엔드 배포를 나눠서 학교에서 캡스톤을 하고 있는데요.. 근데 제가 아직 api를 연결을 제대로 하는 법도 모르고 어떻게 어디서 공부를 해야하는지 모르겠고 백엔드를 하면 백엔드도 재미있는데 이때까지 8개월동안 나는 프론트엔드로 뭐를 했는지도 모르겠고 이대로 하는게 맞나 싶어서 어떻게 해야 할까요..? 지금은 할 수 있는거는 axios로 데이터 불러오는것과 어느정도 시간만 주면 회원가입, 로그인 정도는 만들 수는 있는데 토큰을 어떻게 저장을 해야 하는지 모르겠어요...

Jwt 리프레시 토큰 관련 궁금증

안녕하세요! Jwt 인증로직을 구현하고있는데, 리프레시토큰 쪽을 구현하다가 문득 의문이 들어서 질문 남겨봅니다! 보통 엑세스토큰이 만료되었을때 1. 리프레시 토큰으로 검증에 성공하면 이후, 기존 요청은 캔슬하시고 새로운 토큰을 클라이언트에게 반환 2. 리프레시 토큰으로 검증에 성공하면 새로운 토큰정보를 기존 요청에 대한 반환과 함께 반환 1번 방법으로 한다면, 클라이언트쪽에서는 2번의 요청을 수행해야하고, 2번 방법으로 한다변 1번의 요청만으로 기존 요청에 대한 수행과 토큰 갱신을 둘다 할 수 있을것같은데 보통 실무에서는 어떻게 진행하나요??

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

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

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

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

새로고침 시 로그인 유지할 때 어떤식으로 하나요?

안녕하세요. 서버를 구축하고 JWT로 로그인 구현 연습 중인 프론트엔드 개발자 지망생입니다. 로그인을 했을때 서버에서 액세스 토큰과 유저 정보(유저 이름)를 받고 토큰은 웹 로컬스토리지에 저장하고 유저 정보는 리덕스로 상태를 관리하였습니다. 하지만 새로고침을 하면 리덕스의 상태가 없어져서 화면에 표시한 유저정보(유저 이름)가 사라지는 문제가 발생합니다. 이에 저는 2가지 방법을 생각해봤습니다. 1. 로그인을 한 후 토큰 뿐만 아니라 유저 정보(유저이름)도 같이 웹 로컬스토리지에 저장하여 app.js 첫 렌더링 시 유저 정보를 리덕스 상태에 넣기 2. 토큰만 저장하고 새로고침할 때 마다 서버에 요청해서 유저 정보를 가져오기 위 두 방법 중 어떤 방법이 옳은 방법인지 궁금합니다. 아니면 더 좋은 방법이 있는 지 궁금합니다.

넥스트js에서 사용자 인증 페이지 구분

사용자 인증은 jwt토큰으로 하고 있습니다 현재는 serversideprops 또는 클라이언트 사이드에서 토큰을 가져와서 로그인 페이지로 보내고 있는데요 어느정도 모듈화가 필요한 것 같은데 마땅한 방법이 떠오르지 않아 질문 드립니다 제가 생각한 방법은 사용자 인증이 필요한 pathname을 array로 정리해 app.js에서 구분하려 하는데 더 좋은 방법이나 현재 사용하고 계신 방법이 있다면 공유 부탁드립니다

개발자 모드 함수 실행 방지

안녕하세요. 스스로 개발자라고도 하기 민망한 신입 개발자입니다. 이번에 자바스크립트를 이용한 쿠폰 다운로드 로직을 구현하면서 예전 사람이 만들어 놓은 코드를 참고하면서 문제가 발생했습니다. 기존 방식은 프론트단에 있는 데이터를 ajax에 담아 서버 측에서 검증을 받은 후 쿠폰 다운로드 함수를 실행하여 쿠폰을 다운로드 받아왔습니다. 예시) 로그인체크 함수 (ajax로 로그인 검증 함수로 보냄) 응답이 성공일시 -> 참여이력체크 함수 (ajax로 로그인 검증 함수로 보냄 -> 반복 -> 검증 전부 성공시 쿠폰 다운로드 함수 실행 여기서 문제는 개발자 모드 콘솔창에 쿠폰 다운로드 함수를 호출하면 검증과정 없이 쿠폰이 다운로드 받아지는 것입니다. 이것을 방지하기 위해 서버단에서는 세션, 토큰을 사용하는 방법이 있다는 것은 찾았지만 클라이언트 측, 즉 자바스크립트 코드로 개발자 모드에서 함수를 무단으로 호출하는 것을 방지하는 방법이 있을까요? 밑에 원하는 해결 방안을 적어 놓겠습니다 1. 개발자 모드 실행 시 경고창, 창 이동 방법 - 이 방법은 제외입니다. 2. 클로저 사용 - 익명 함수로 다운로드 함수를 작성 시 검증 과정 마지막에 호출하지 못하더군요. 제가 클로저를 잘못 이해하고 사용한다 생각하니 클로저로 해결할 수 있는 방법이 있다면 가르쳐주시면 감사하겠습니다. 3. 그 이외에 방법 자바스크립트 코드로 해결하는 방법이 있으면 좋겠습니다.

토큰값을 받아오지 못하는 문제 (undefined)

안녕하세요 JWT 토큰을 이용해 로그인 검증하는 로직을 구현하고 있습니다. 로컬스토리지에 토큰을 저장하는 것까지 성공했으나 프론트 측에서 로그인 검증을 요청할때 실제 토큰 값을 받아오지 못하는 문제가 있어 질문 드립니다. login-required에서 토큰 값 유무 로직을 전부 지우고 콘솔로만 찍는 경우 undefined와 실제 토큰값이 나타납니다. 만약 토큰 값 유무 로직을 이용한다면 undefined값만 서버로 들어와 페이지가 무한로딩 되는 현상이 나타납니다. next()처리가 안되기 때문인 것 같습니다. (+ index.html은 test.js를 연결하고 있습니다.) 사진으로 보면 네트워크 요청헤더에서 확인한 결과 1. 처음엔 document 유형의 localhost를, (인증 헤더 x) 이후 js를 불러온다 2. 마지막에 xhr형식인 localhost를 불러옵니다 (인증 헤더 o) (여기서 undefined, 실제 토큰값이 콘솔에 동시에 나타나는 이유라고 생각이 듦) (순서를 보면 document 유형 localhost -> css, js -> xhr 유형 localhost 즉 처음에 document 유형에서 인증헤더를 못가져와서 (js가 로드되기 전이여서) 토큰 유무를 체크하지 못하는 것 같습니다) 결론적으로 제가 생각한 문제 분석 (1) ('/') 에 get 요청을 보낸다. (2) 서버는 loginRequired를 실행한다. (3) 서버로 부터 html을 받지 못한 상태에 loginRequired가 실행되어 토큰 값은 undefined가 된다. (4) next()를 거쳐 서버에서 html을 클라이언트로 부터 응답을 해준다. (5) html을 브라우저에 보여주면서 그 html에 연결된 js를 불러온다. (6) 이때 불러온 test.js에서 get요청 ('/') 로직을 불러와 다시 server.js에서 loginRequired 응답으로 토큰 값을 불러온다. 즉 js가 로드가 되어야 userToken을 로컬스토리지로 부터 받아오고 요청을 하여 토큰 값을 불러올 수 있다. 그런데 get 요청전에 토큰 검증을 하고 허가가 되어야 html을 로드해야 하지 않을까? 그렇다면 서버에서 처리를 해야하는가? 배워가는 학부생으로 많이 부족하다고 생각합니다,, 선배님들의 견해를 받고 싶어 게시물 올립니다..! 핵심 코드는 다음과 같습니다.

JWT 인증에 대해서...

jwt 인증을 어디까지 사용하는건지 궁금합니다. 토큰에 담긴 유저정보를 사용 할 수 있도록 리턴해주어야 하는지 아니면 인증이 되었다면 더이상 사용하지 않고 req.body등에 담긴 userID를 가지고 다시 유저 정보를 가져오는 건지 궁금합니다.

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분정도로 생각중입니다.

리액트 쿼리에서 사용자 인증관련 코드 질문있습니다.

아래 코드처럼 리액트쿼리로 사용자 인증 코드를 구현했습니다. ( 외국 개발자분 코드 분석해서 거의 복붙하고 조금 수정 ) 간단히, api요청을 해서 유저 정보를 받아 로컬스토리지에 저장해서 사용하는 코드입니다. 이 훅을 프라이빗 라우터 및 로그인 버튼 or 사용자 이름 표시 UI 에 사용중인데요 쿼리 캐시 때문에 계속 요청을안하고 그값만 계속 사용중인데 이 사용자의 토큰 유효기간이 지났는데도 계속 그 값만 사용중입니다. 이 분기처리를 어떻게 해줘야할지를 모르겠습니다. 처음엔 refetchOnMount: false,를 true로 바꿔주고 토큰 유효값이 지나면 에러를 뱉어주는거를 보고 흡족해했으나 네트워크탭을 살펴보니 새로고침, 페이지 인아웃 할때마다 계속 요청을하고있어서 다시 고민에빠졌습니다. 어떤식으로 해줘야 할까요?.. 가장 생각나는건 statleTime 값을 토큰 유효기간 값만큼 설정해주면 될까 인데.. 이렇게해줘도되나요?

next.js에서 interceptor 어떻게 사용하고 계신가요?

안녕하세요 page router 형식으로 프로젝트 진행 중 궁금한게 있어 게시글 남깁니다. 현재 프로젝트에서는 두가지 AJAX 요청이 존재하는데요. 한가지는 클라이언트 사이드에서의 요청(좋아요 누르기 기능 등)과 서버 사이드 렌더링을 위한 getserversideprops에서의 요청입니다. 문제는 인증 방식으로 엑세스토큰을 사용중인데 axios interceptor을 사용하려고 보니 하나의 interceptor로 두가지 요청을 커버하기가 어렵겠더라구요. 혹시 비슷한 경험이 있으신분들 어떻게 사용하셨는지 공유해주시면 감사하겠습니다.

리액트쿼리 사용법 이게맞나요?

좀 이상합니다.. 상황이, 1. 로그아웃 후 게시물작성 페이지로 접근하면 프라비잇 라우터 컴포넌트 + 사용자인증 훅 (리액트쿼리) 로 인해 '/' 로 잘 튕겨집니다. 2. 로그인 후 게시물 작성페이지로 접근하면 '/' 로 튕겨집니다. 최소 두번은 게시물 작성 페이지로 접근하던가, 새로고침후 접근해야 접근이 가능합니다. axios header 토큰 및 유저 정보 불러오는 api에서 리턴해주는 값들을 다 콘솔찍어서 확인해봤는데 이상없었습니다. 딱한군데 사용자인증 훅쪽만 이상이있었습니다. 아래 코드에 삽입된거에서 콘솔(userLoginInfo) 하면 언디파인이 나오는데요.. 신기한게 fetchUserInfo에서 콘솔 res.data하면 유저정보가 잘찍힙니다..ㅠㅠ 혹시 뭐떄문에그런걸까요?

리액트 로그인질문..

react + 파이어베이스만 써오다가 react + express 조합을 오랜만에 사용중인데 긴가민가한점이있어서 질문드립니다 ㅠㅠ import axios from 'axios'; const instance = axios.create({ baseURL: process.env.REACT_APP_API_BASE_URL, timeout: 2500, headers: { 'Content-Type': 'application/json', withCredential: true, }, }); instance.interceptors.request.use( (config) => { const token = localStorage.getItem('token'); if (token) { config.headers['Authorization'] = token; } else { delete config.headers['Authorization']; } return config; }, (error) => { return Promise.reject(error); } ); export default instance; 이렇게 인터셉터를주어서, 요청할 때마다 토큰을 전달하고있습니다. 그리고 프라이빗 라우터 + 유저정보 인증 훅을 사용해서 로그인사용자만 접근가능하게 페이지를 설정해줬습니다. 근데 질문 1. 네트워크탭 Request Headers 에서 Authorization을 확인해보면 토큰정보가 그대로 노출되고있는데요 원래 이렇게되나요? 질문 2. Bearer + token 이렇게 보내는 경우는 포스트맨이나 이런걸로 테스트할때만 Bearer 을 붙여서 보내주면될까요? 질문 3. 검색 키워드가 생각이안나서 질문으로 올립니다. 아주 옛날에는 (4년전) App.tsx에서 if(localstorage.token){ setAuthToekn(token); } 이런식으로 하고, setAuthToken함수는 import axios from 'axios'; const setAuthToken = (token) => { if (token) { axios.defaults.headers.common['x-auth-token'] = token; } else { delete axios.defaults.headers.common['x-auth-token']; } }; export default setAuthToken; 이런식으로 되어있었는데요, 요즘은 제가 짠 코드처럼 axios.인터셉터 식으로 하는게 맞나요? 질문 4. 그럼 요즘도 회원가입/로그인시 로컬스토리지에 유저 정보 (닉네임 이름 이메일, 토큰정보)만 저장해두고 로그인하면, 로그인버튼이 회원 닉네임으로 변하게 해준다던가.. 이런식으로 분기처리를 하나요? ( 저는 이렇게하고있어서요.. 로딩처리를 줄수도있겠지만 깜빡거리는게 싫고, 또 로컬스토리지로안하면 로그인버튼으로 잠깐바꼇다가 회원닉네임이 표시되더라구요) 질문5. (질문4와 이어집니다.) 만약 질문4처럼하면 사용자가 사이트에 계속 로그인중인데, 이 토큰이 끝났는지 판단하려는 코드를 따로 작성해줘야할까요? 예를들면, App.tsx에 서버 api/auth같은거에 요청보내는 로직을 작성해서, 토큰만보내서 유효한 토큰인지 아닌지, 유효하지않은토큰이면 에러를 리턴시켜준다던가, 리프레쉬토큰을 발급시켜서 연장시켜준다던가 이런식으로하면될까요? 마지막으로 질문이 좀 많고 중구난방인데 죄송스럽고 조심스럽네요..

토큰 기반 인증에서 리프레쉬 토큰 관리

JWT로 토큰 기반 인증을 구현할 때 궁금한게 좀 생겼습니다! 리프레쉬 토큰은 DB에 저장해볼까 했는데 그러면 토큰 기반 인증이 아니라 세션 기반 인증인 것 같아서 고민입니다. DB에 저장하는 순간 Stateless 장점도 없어지는 것 같구… Stateless로 구현한다해도 로그아웃 때문에 블랙리스트 관리해야한다는데, 이러면 결국 Stateful인거 같구… 다른 분들은 어떻게 구현하시는지 궁금합니다! 일단 이렇게 고민해봤습니다. --- <1번 시나리오 - 리프레쉬 토큰을 DB에 저장하지 않는 시나리오>

 1. 액세스 토큰이랑 리프레쉬 토큰은 클라이언트가 저장하고 서버는 저장하지 않는다.
 2. 클라이언트 요청이 왔을 때 리프레쉬 토큰이 만료되지 않았으면 액세스 토큰을 발급해주고, 만료됐으면 액세스 토큰을 발급해주지 않는다. (401 또는 403)
 장점 - DB에 접근할 이유가 없으므로 Stateless 하다. 단점 - 로그아웃을 했을 때 토큰 자체는 무효화시킬 수 있는 방법이 없다.

 <2번 시나리오 - 리프레쉬 토큰을 DB에 저장하는 시나리오> 1. 액세스 토큰이랑 리프레쉬 토큰은 클라이언트와 서버가 각각 저장한다.
 2. 클라이언트 요청이 왔을 때 리프레쉬 토큰이 만료되지 않았으면 액세스 토큰을 발급해주고, 만료됐으면 액세스 토큰을 발급해주지 않는다. (401 또는 403) 장점 - 로그아웃을 했을 때 토큰 자체는 무효화시킬 수 있다. 단점 - DB를 접근해야하므로 Stateful 하다. => 클러스터링이나 샤딩이 도입되면 복잡도가 올라간다.
 --- 1번 시나리오 단점을 극복하려고 블랙 리스트를 Redis에 관리한다는 글들을 종종 봤습니다. 블랙 리스트를 도입 안했을 때 문제는 실제로 겪어본 적이 있어서 공감은 가는데, 이러면 사실상 세션 쓰는거랑 똑같지 않나라는 생각이 듭니다. 인증시 결국 Redis 같은 DB에 접근해서 직접 확인하는 거니까요. 한편으로는 서비스가 매우 많이 커지면 세션이 부담돼서 토큰 기반 인증으로 전환한다는데, 파면 팔수록 점점 세션 기반 인증으로 바뀌는 것 같아서 고민입니다.