xu의 성장일지

자동 로그인 구현하기현재 로그인 시 액세스 토큰과 리프레시 토큰을 받아 쿠키에 저장 중이다.액세스 토큰은 유효기간이 1시간이며, 리프레시 토큰은 7일이다.그래서 자동 로그인 시, 액세스 토큰이 만료됐을 때 리xuwon.tistory.com분명 이때까지만 해도 자동 로그인 작동도 잘 됐고... 그런데... 문제가 여러 개 생겨버렸다.그래서 트러블 슈팅 블로그 작성 가능하게 됐으니 럭키비키라고 생각하며 기쁜 마음으로 블로그를 적어보려 한다. 첫 번째쿠키 관련 이슈액세스 토큰 만료 시 쿠키 실시간 업데이트 X 원래 페이지 이동 시에 토큰을 확인하고, 자동 로그인 활성화일 땐 액세스 토큰을 재발급 받아서 로그인을 유지하도록 했는데,페이지 이동 시에 다시 확인하고 발급받는 과정을 거치다 보니, 만료 후 로그인 전..

현재 로그인 시 액세스 토큰과 리프레시 토큰을 받아 쿠키에 저장 중이다.액세스 토큰은 유효기간이 1시간이며, 리프레시 토큰은 7일이다.그래서 자동 로그인 시, 액세스 토큰이 만료됐을 때 리프레시 토큰으로 재발급을 받아서 다시 쿠키에 넣어주어야 한다.우선 로그인 상태를 확인하는 함수를 만들어 주었다.import { destroyCookie, setCookie } from 'nookies';import { clearUser } from '@/store/userSlice';import { useDispatch } from 'react-redux';import { useAccessTokenRefreshMutation } from '@/api/userApi';// 로그인 상태 확인 함수export const us..

카카오 소셜 로그인은1. /social/kakao/login 으로 이동하여 인증 진행2. 받아온 code로 /social/kakao/callback에 GET 요청 보내서 토큰 받기3. 토큰은 쿠키에 저장4. 로그인 성공 후 토큰으로 유저 정보 GET 요청으로 받아옴5. 유저 정보 Redux에 저장이런 흐름으로 진행하였다. // sign-inconst handleLogin = (provider: string) => { switch (provider) { case 'kakao': // 서버의 카카오 로그인 엔드포인트로 이동 window.location.href = 'kakao login endpoint'; // 해당 페이지로 리디렉션 break; case 'google..