#accesstoken

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

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

Next.js 와 데이터 패칭 관련 React Query SSR

안녕하세요. Next.js 13.4 버전으로 개발중인 주니어 개발자입니다. SSR 관련해서 처음 접하고 개발중인데 Data Fetching 부분에서 조금 이론과 실무 모두 조금 막혀있습니다. 다름이 아니라 서버 컴포넌트/클라이언트 컴포넌트 이렇게 2개로 나뉘는데 accessToken 사용 떄문에 axios를 사용중입니다. 그래서 마이페이지 를 구현중에 데이터를 불러와서 뿌려주는 부분을 구현중인데 클라이언트 컴포넌트에서 useEffect 안에서 불러오면 한 박자 느리게 데이터가 뿌려져서 이질감이 있습니다. 그래서 서버컴포넌트에서 prefetch 해서 react query 사용해서 hydration 방식으로 직렬화 해서 내려주고 클라이언트 컴포넌트에서 const { data } = useQuery(['querykey'], () => queryFn) 형태로 사용해서 뿌려주고싶은데 여기서 이 'data'는 useState에 할당을 못하나요? 마이페이지 데이터 수정시에는 어떻게 활용을 해야되는건지 잘 모르겠습니다...

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 어떻게 처리하시나 궁금합니다.

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

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

JWT invaild signature 오류

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

React Spring 배포과정 중 의문의 404

react + spring boot로 진행하는 프로젝트가 현재 cloudtype이라는 플랫폼으로 배포중에 있습니다. 문제는 정확한 서버주소를 호출하는 것 같음에 불구하고 404 에러가 발생하여 해결하지 못하고 있습니다. 현재, 아래 사진과 같은 로그가 클라이언트, 서버에 각각 발생합니다. 서버에서는 다음과 같이 구성되어있고 @RestController @RequestMapping("/v1/login") @RequiredArgsConstructor @CrossOrigin(origins = "https://web-secondchance-front-bug-1cupyg2klvnmgdft.sel5.cloudtype.app") public class KakaoController { private final KakaoService kakaoService; private final Logger LOGGER = LoggerFactory.getLogger(KakaoController.class); @PostMapping("/kakao-login") public ResponseEntity<UserDto> kakaoLogin(@RequestBody KakaoLoginDto kakaoLoginDto) { String code = kakaoLoginDto.getCode(); LOGGER.info("Get Code from FrontEnd : {}", code); LOGGER.info("Request getAccessToken()"); kakaoLoginDto = kakaoService.getAccessToken(code); String accessToken = kakaoLoginDto.getAccess_token(); LOGGER.info("access_token : {}", accessToken); if(accessToken != null){ UserDto userDto = kakaoService.getUserInfo(accessToken); return ResponseEntity.ok(userDto); } else { return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(null); } // accessToken이 null임에도 getUserInfo를 부름. // 안부르게 끔 위의 방법을 포함하여 // 1. map에서 true, false를 사용하여 해봄 // 2. getAccessToken을 map객체로 반환하게끔 하여 accessToken이 있으면 true, 없으면 false로 하여 isEmpty 함수로 체크하여 부름 // 위의 두 방법 전부 소용없음. 그냥 getUserInfo를 부름. } @PostMapping("/kakao-logout") public String kakaoLogout(){ return "ok"; } } 현재 리액트에서는 다음과 같이 axios.post로 접근하여 code를 전달합니다. 무엇이 문제일까요?

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

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

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

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

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를 쐈던것이기 때문에 그 반환값이 서버 컴포넌트로 오게 되고, 이는 브라우저에 반영이 안 되는데요ㅠ 혹시 이럴 경우에는 어떻게 처리를 하는게 좋을까요? 미들웨어나 라우트 핸들러를 사용하려 해도 그 방법을 도저히 모르겠네요

리액트 재사용 에러 처리 질문 있습니다

import해서 getAccessToken와 loginVerification를 사용중입니다. 그리고 이 코드를 다른 곳에서 import해서 ----중략---- try { const responseData = await sendApiRequest( apiUrl , { --생략-- }, 'POST'); ----Data(responseData.data); } catch (error) { ----중략---- 으로 import해서 사용 중입니다. 에러에 대한 처리 방법이 제대로 되었나요?

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

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

[React native] SSE 관련 에러 질문

안녕하세요. 취업 기간 중 React native 일정 관리 앱을 제작중입니다. 일정 알림 기능을 위해 서버의 일정 데이터를 스트리밍하여 컴포넌트에 매핑하는 동작을 구현 중입니다. react-native-sse 라이브러리를 사용하여 SSE를 시도하고 있는데 유효한 accessToken과 url을 전달해도 연결 자체가 이뤄지지 않는 문제가 발생합니다. 컴포넌트 랜더링 시 연결을 시도하고 에러 혹은 언마운트 시 연결 종료하도록 코드 작성했습니다. 에러 로그는 다음과 같습니다. [EventSource][onreadystatechange][ERROR] Response status error. Reconnecting... DEBUG [EventSource][onreadystatechange] ReadyState: 2, status: 401 DEBUG [EventSource][onreadystatechange] ReadyState: 4, status: 401 리커넥팅을 반복하면서 401 에러를 계속 반환하는데 이 경우 url에 문제가 있는 것인지 혹은 라이브러리에서 요구하는 추가적인 속성이 필요한지 잘 모르겠습니다. 비슷한 문제를 겪거나 React native에서 SSE 연결을 해보신 선배님들께 도움 요청드립니다.

next auth 소셜로그인으로 일반적인 jwt 인증방식 구현하기

안녕하세요 next auth로 소셜로그인을 구현중입니다. 따로 spring boot 서버가 있는 상태이구여. 궁금한점이 있습니다. 1. 소셜로그인 완료 시 account에 들어있는 accessToken과 refreshToken을 아래와 같은 코드로 빼낸 뒤 서버에 보내서 일반적인 jwt방식으로 구현을 하려고 합니다. 하지만 token들이 jwt형식이 아니라 ' . ' 구분없이 하나의 문자열로 나옵니다. jwt토큰 형태로 바꾸는 방법이 따로 있나요? 아니면 이와 같은 방식은 잘못된 방식인건가요?? ``` session: { jwt: true, }, callbacks: { async jwt({ token, account, profile, user }: any) { if (account && user) { token.accessToken = account.access_token; token.refreshToken = account.refresh_token; token.id = profile.id; } return token; }, async session({ session, token, user }: any) { if (session) { session.accessToken = token.accessToken; session.refreshToken = token.refreshToken; session.user.id = token.id; } return session; }, }, ``` 2. 만약 소셜로그인 시 생성된 토큰들을 spring boot 서버에 보내는 방법이 불가능하다면 따로 토큰을 생성해야 하는건가요? 그렇다면 next-auth를 사용하는 이점이 사라지는게 아닐까요??

[React Native] 카카오 소셜 로그인 질문드립니다.

현재 대학교에서 공부 중입니다. 작게 팀을 꾸려서 프로젝트 진행 중인데 소셜 로그인에서 계속 삽질 중이라..ㅠㅠ 도움 받고자 합니다. 현재 카카오 로그인 화면으로 이동 -> 사용자 정보 입력 후 동의 -> 인가코드 발급 -> 인가코드를 서버로 전송 -> 서버에서 response body받기 까지 완료된 상태입니다. 서버에서 받아온 response body가 아래 코드처럼 출력되고 있는데 알아본 바로는 여기서 accessToken 부분을 추출해서 서버로 한번 더 전송해야 하는 걸로 알고있습니다. accessToken을 서버로 보낸 후 JWT를 받아와서 회원 정보를 사용하는 것인가요?

채팅 새로고침시 연결 끊기는 문제

안녕하세요. 현재 Websocket과 stompjs v6.0.0을 활용해 채팅을 구현했습니다. roomId로 여러 채팅방을 만들 수 있게 구현했고, 현재 새로고침을 하지 않는 이상 잘 돌아갑니다. 그러나, 새로고침 할 시에는 바로 연결이 끊겨 이전의 채팅 내역도 보이지 않고, 연결, 구독 내역이 사라집니다 ... 어떻게 reconnect 해야할까요? 단순히 채팅 페이지에서 useEffect로 connect를 다시 하니 이미 연결 구독이 된 상태라고 뜨더라구요 .... ㅠㅠ (고민글을 올렸을 때 채팅방이 생성되고, 연결 구독이 됩니다. 채팅 시작 버튼을 눌렀을 경우에는 본인이 연결 구독이 되어 1대 1로 상대방과 채팅이 시작되는 구조입니다. ) import { CompatClient, Stomp } from "@stomp/stompjs"; import { createContext, useContext, useMemo, useRef } from "react"; import { useSetRecoilState } from "recoil"; import { messageState } from "../../states/chatting"; import audio from "../../assets/audios/chatting.mp3"; const ChatContext = createContext( {} as { connect: (roomId: number) => void; disconnect: () => void; send: (roomId: number, message: string) => void; }, ); export const useChatContext = () => useContext(ChatContext); export function ChatProvider({ children }: any) { const setMessages = useSetRecoilState(messageState); const token = localStorage.getItem("accessToken"); // 채팅 연결 구독 const client = useRef<CompatClient>(); const connect = (roomId: number) => { client.current = Stomp.over(() => { const sock = new WebSocket("wss://m-ssaem.com:8080/stomp/chat"); return sock; }); client.current.connect( { token: token, }, () => { client.current && client.current.subscribe( `/sub/chat/room/${roomId}`, (message) => onMessageReceived(message, roomId), { token: token!, }, ); }, ); return client; }; const onMessageReceived = (message: any, roomId: number) => { const audioElement = new Audio(audio); audioElement.play(); setMessages((prevMessages) => { const updatedMessages = { ...prevMessages, [roomId]: [...(prevMessages[roomId] || []), JSON.parse(message.body)], }; return updatedMessages; }); }; // 채팅 나가기 const disconnect = () => { if (client.current) { client.current.disconnect(() => { window.location.reload(); }); } }; // 채팅 보내기 const send = (roomId: number, message: string) => { if (client.current) { client.current.send( `/pub/chat/message`, { token: token, }, JSON.stringify({ roomId: roomId, message: message, type: "TALK", }), ); } }; const handlers = useMemo(() => ({ connect, disconnect, send }), []); return ( <ChatContext.Provider value={handlers}>{children}</ChatContext.Provider> ); } ----------이 부분은 connect 하는 부분입니다 --------- const { connect } = useChatContext(); const chatRoomId = worryBoard && worryBoard.chatRoomId; const handleStartChatting = () => { navigate(`/chatting`); connect(chatRoomId!!); }; ------------ 채팅 페이지는 따로 있습니다 --------------

채팅 기능 client 가 null 값이 돼요

하나의 페이지에서 connectHandler를 작동하고 또다른 페이지에서 sendHandler를 작동하려고 하는데 이렇게 해서는 useChat()이 리렌더링 되면서 client 값이 초기화가 되더라구요 값을 유지하고 싶고 recoil에 client를 담는 건 불가능이라고 떠서... connectHandler와 sendHandler를 다른 hooks로 분리하는 방법도 생각해봤는데 그러면 또 client값이 connect한 값이 아니더라구요 무슨 방법이 있을까요? 제발 도와주세요 ㅠㅠ (한 페이지에서 connectHandler, sendHandler, disconnectHandler 실행하면 잘 작동합니다!) import { CompatClient, Stomp } from "@stomp/stompjs"; import { useRef } from "react"; import { useRecoilState } from "recoil"; import { inputMessageState, messageState } from "../../states/chatting"; export function useChat() { const [messages, setMessages] = useRecoilState(messageState); const [inputMessage, setInputMessage] = useRecoilState(inputMessageState); const token = localStorage.getItem("accessToken"); // 채팅 연결 구독 const client = useRef<CompatClient>(); const connectHandler = () => { client.current = Stomp.over(() => { const sock = new WebSocket("wss://m-ssaem.com:8080/stomp/chat"); return sock; }); client.current.connect( { token: token, }, () => { client.current && client.current.subscribe(`/sub/chat/room/1`, onMessageReceived, { token: token!, }); }, ); }; const onMessageReceived = (message: any) => { setMessages((prevMessage) => [...prevMessage, JSON.parse(message.body)]); }; // 채팅 나가기 const disconnectHandler = () => { if (client.current) { client.current.disconnect(() => { window.location.reload(); }); } }; // 채팅 보내기 const sendHandler = () => { if (client.current && inputMessage.trim() !== "") { client.current.send( `/pub/chat/message`, { token: token, }, JSON.stringify({ roomId: 1, message: inputMessage, type: "TALK", }), ); setInputMessage(""); } }; return { connectHandler, disconnectHandler, sendHandler, }; }

카카오 로그인 accessToken 어디에 저장해야 할까요??

[상황] 현재 하고 있는 동아리 프로젝트에서 카카오 로그인을 구현하기로 했습니다. 저는 프론트엔드 파트이고, 프로젝트는 react, recoil 쓰고 있습니다. +) 팀원이 react-query 써서 백엔드와 통신을 하자고 합니다. [질문] 카카오 로그인에서 인가코드를 백엔드에 보내면, 백엔드에서 accessToken과 refreshToken을 넘겨주는데 이걸 어디에 저장해야 할까요?? 둘다 http response로 헤더에 실어서 보내준다고 합니다! 백엔드에서 쿠키에 넣어주지는 않고 토큰을 보내준다는데, 이걸 어떻게 관리해야 할까요?? localStorage에 저장하는건 매우 위험하다는 글을 봐서, 어떤식으로 관리해야 할지 모르겠습니다. 스토리지에 저장 안 하면, 보통 recoil로 atom에 저장해두고 쓰나요..? 로그인 구현이 처음이라 막막한데 도와주세요ㅠㅠ

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 boog Oauth2 client 질문 합니다!

react.js (port:3000) srping boot(port: 8080) 각각 배포 한 상황입니다. 인터넷에서 많은 자료를 찾을 수 있지만, 프로덕션에서 사용하기엔 좀 많은 걱정들이 있이서, 해소 되지 않은 부분들을 몇가지 여쭈어봅니다! 1. 많은 예시를 보면,  flow 는 이렇더라구요 - 사용자가 구글 로그인을 클릭함 (localhost:8080/oauth2/google?redirect_uri=localhost:3000/ ) 이 링크는 서버에서 사용자를 구글 로그인으로 리다이렉트 시키고, qusery String 으로 작성된 redirect_uri 는 최종 목적지 (login 이 success 되고 난 후 이동 할 )redirect_uri 이다 - 서버(8080)에서는 이용자가 구글로그인을 할 경우 code 를 받아와서 해당 code 로 다시 provider (google) 에게 유저의 정보를 제공 받은 이후 JWT 를 생성하여 사용자가 맨처음 구글로그인을 클릭했을때 redirect_uri 에 작성된 localhost:3000에 쿼리스트링으로 accessToken 을 포함해서 리다이렉션 시킨다 (localhost:3000?accessT=e.....) - 클라이언트는 해당 토큰을 저장하고 후처리를 진행한다 라고 하는 경우가 많았습니다. 그런데 이렇게되면 url 에 accessToken 이 url 에 노출되는게 맞나? 싶더라구요 사실 쿠키로 심어서 보내면 되겠지만 요구사항에는 쿠키를 사용하지 않기로 했습니다. 그러면 어떻게 처리해야할까요? 도저히 클라이언트에서 안전하게 토큰을 받을 수 있는 방법이 떠 오르질 않네요 ... 2. 보통 프로덕션에서는 User table 과 OAuth2 table 을 별도로 두나요 ? ( Oauth2 테이블은 OAuth2 에서 제공받은 id, provider, userFK 정도만 저장 )

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

react-native) 안드로이드에서만 api서버가 401에러 발생

서버 api 호출하는 코드인데요. ios에서는 토큰 가져와서, 호출 잘 되는데, 안드로이드에서는 토큰은 잘 가져오는데.... 호출을 하면 권한이 없다고 나옵니다. (401에러 unauthorized) 물론 헤더 넘기지 않는 로그인 같은것은 성공적으로 수행됩니다. 유저 정보를 가져오는 이 부분만 android에서 에러가 발생하네요 ㅜㅜ 혹시 이런 이슈 해결하신분 있을까요? api서버는 django입니다. useEffect(() => { const getTokenAndRefresh = async () => { try { const token = await EncryptedStorage.getItem('accessToken'); if (!token) { return; } console.log('스토리지에 token있음:', token); const API_URL = Platform.OS === 'ios' ? IOS_API_URL : ANDROID_API_URL; const response = await axios.get(`${API_URL}/me`, { headers: { Authorization: `Token ${token}`, }, }); console.log(response.data); dispatch( userSlice.actions.setUser({ userInfo: response.data, accessToken: token, }), ); } catch (error) { console.error(error); console.error('me호출 에러'); } } }; getTokenAndRefresh(); }, [dispatch, isAccessToken]);

next.js 에서 ssr의 경우 쿠키 접근은 어떻게 하나요?

1. next.js 에서 ssr의 경우 로컬스토리지는 접근이 불가능한데 쿠키도 접근이 불가능한가요? 2. 그리고 추가로 궁금한 부분은 accessToken을 로컬 스토리지로 저장하시는 분들은 ssr시에 인증을 어떻게 하시나요??