#로컬스토리지

로컬스토리지 데이터 변환 감지

리액트에서 로컬스토리지에 데이터가 변환되는걸 감지하여 쿼리 데이터를 무효화하고 싶은데, 좋은 방법이 있나요,,

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

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

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

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

토큰값을 받아오지 못하는 문제 (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 토큰 중 accessToken은 어디에 보관하는 것이 좋을까요?

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

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

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

리액트 로그인질문..

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같은거에 요청보내는 로직을 작성해서, 토큰만보내서 유효한 토큰인지 아닌지, 유효하지않은토큰이면 에러를 리턴시켜준다던가, 리프레쉬토큰을 발급시켜서 연장시켜준다던가 이런식으로하면될까요? 마지막으로 질문이 좀 많고 중구난방인데 죄송스럽고 조심스럽네요..

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

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

Next.js app router 다크모드 깜빡 거림 문제

혹시 next app router에서 다크모드 설정 깜빡거리는 현상 해결해 보신 분 계신가요? 테마는 로컬스토리지에 저장해서 초기에 보여줍니다. Next 14 + styled-components 사용중입니다. 기존 page router에서는 _document.tsx에서 script 태그 dangerouslySetInnerHTML 사용해서 DOM요소 렌더링 이전에 로컬스토리지 저장된 모드 가져와서 관련 코드 실행 되게 끔 해서 깜빡임 현상을 해결했었습니다. app router에서 layout.tsx에 Script태그 이용해서 똑같이 적용하면 DOM요소가 렌더링 되고나서 실행이 되어서 기존 다크모드설정 후 새로고침 시 깜빡거리는 문제가 발생합니다ㅠㅠ 기존에 _document.tsx랑_app.tsx에 작성된 코드들은 layout.tsx에서 관리하는 걸로 알고 있는데 동작 방식이 다른 건지 기존과 다르게 동작합니다.. 여러 옵션을 사용해봐도 똑같네요... 관련 자료도 너무 없어서 nextjs github issue 뒤져보니까 똑같지는 않지만 비슷한 문제를 겪고 있는 issue가 있던데 해결이 안 된 거 같더라구요.. 이러한 상황에는 어떻게 해야할까요..? 개인 프로젝트고 해결이 된다면 정말 좋겠는데, 면접에서 이렇게 해결하지 못한 상황에 대해서는 어떻게 말해야할지도 고민입니다..

토큰은 클라이언트에 노출되어도 상관없나요?

안녕하세요! 프론트엔드 공부하고 있는 취준생입니다. 토큰에 대해 이해가 안되는 것이 있어서 질문을 올립니다. 토큰은 복호화, 암호화와 달리 서명을 통해 무결성을 확인하는 것으로 알고 있는데요, 이를 통해 토큰을 로컬스토리지나 전역 상태 라이브러리등을 사용하여 저장하는 걸로 배웠습니다. 로컬스토리지나 전역 상태 라이브러리를 사용하는 것이 클라이언트에 노출하는 것이랑 보안적으로 다른 것인가요? 사실 이것이 어떻게 안전한 것인지 의아해서 질문을 올립니다. 토큰도 결국 string 문자열일 뿐이고, 이를 복사하여 서버 데이터에서 유저 정보를 빼낼 수 있지 않나요?

supabase, firebase, pocketbase 뭘 사용하는것 이 좋을까요?

안녕하세요 ! 혼자 프로젝트를 진행하다가 궁금한 점이 생겨서 질문드립니다. 현재 저는 생일 축하 웹사이트 프로젝트를 진행중입니다 리액트를 공부 중이고 해서 겸사겸사 뭐라도 해보자 해서 매우 간단하게 하려고 합니다 ! 생일 전까지 빠르게 만들어야하는지라 로그인, 회원가입은 아직까진 예정에 없습니다..ㅎㅎ 생일 축하 메시지만 남기는 것이기에 굳이 로그인 기능이 필요할까 싶기도 하구요.. 결론적으로 제가 하고 싶은 것은 1. 그 사이트 내에서 축하 메시지를 작성하면 그 메시지를 띄워주고 2. 새로고침 하거나 홈페이지를 나갔다 들어와도 개개인들이 작성한 그 메시지들이 그대로 남아있게끔 계속 보이게 하고 싶습니다 !!! 그럴러면 메시지 데이터를 저장해둘 서버가 필요하다고 생각해서 잘 알려진 supabase, firebase, pocketbase 중에서 사용하고 싶은데 어떤 것을 사옹해야할지 모르겠습니다 ㅠㅠ 유명하고 많이 써서 사용하기보단 각각의 장단점이 있을테니 제 프로젝트의 규모와 목적에 맞게 사용하고 싶습니다 근데 제가 공부한지 얼마 안된지라 찾아봐도 postgres, nosql 관련한 글들인데 장단점을 잘 모르겠더라구요.. 차이점은 알겠으나 그래서 내 프로젝트엔 뭘 쓰는게 좋을지 파악이 어려웠습니다..! 아니면 저 위의 기능과 데이터들 뿐이면 로컬스토리지도로 가능한걸까요? 그리고 혹시 메시지를 삭제하는 기능까지 만들려면 인가받은 사용자만 삭제해야하니까 로그인 기능도 필요한거겠죠? 회원가입 기능 없이 관리자인 저만 삭제할 수 있도록 할 수는 없을까요..? - 프로젝트 규모에 맞게 어떤 서버를 사용하면 좋을지? - 삭제기능도 한다면 관리자인 저만 삭제할 수 있는지? (그럼 관리자인 저와, 사용자 페이지를 따로 만드는 것인지..?) 개인 프로젝트에서 서버를 사용해본적이 없어서 하나부터 열까지 너무 어렵네요ㅠㅠㅠ 선배님들 도움주시면 감사하겠습니다 !!

JWT 토큰을 공유(?) 하는 방법

안녕하세요. node.js와 react를 활용하여 로그인 인증, 인가를 구현 하고 있습니다. 웹을 시작한지 얼마 안돼 삽질을 좀 하고있는데 해결하는데 어려움이 있어 질문을 올리게 됐습니다. 1. 현재 개발 환경 : - Node.js(express)로 JWT토큰을 발급하고,인증하는 서버를 실행 중 입니다.(localhost:8080) - localhost:3000 으로 로그인 페이지를 만들었고, 로그인 성공시 서버로부터 JWT토큰을 발급 받게 되어있습니다. (토큰을 현재는 로컬스토리지에 저장 하고 있습니다) - localhost:3001 로 새로운 서비스페이지를 만들고있습니다. 2. 질문 : - localhost:3000에서 서버로부터 전달받은 JWT토큰을 localhost:3001에게 전달하고, localhost:3001은 전달 받은 토큰을 가지고 인증서버에 토큰을 주면서 유효성을 확인 받고 싶습니다. 현재는 3000번에서 3001번으로 URL 이동하는 버튼을 만들었는데 이때 URL 파라미터에 토큰값을 추가해서 전달하고 3001번이 전달받은 파라미터에서 토큰값을 다시 로컬스토리지에 저장하고 사용하고있습니다.. 이 방법이 아무리 생각해도 보안적으로 문제가 될 것 같아서 이런 경우 어떤식으로 구현을 해야 좋은방법인지 고민하다가 이곳에 질문을 올리게 됐습니다.

임시저장 기능 구현

설문조사나 자기소개서 등에서 임시저장 또는 실시간 저장을 구현하고자 한다면 저장할때마다 트랜잭션을 발생시키시나요? 혹은 로컬스토리지나 세션에 저장후 한꺼번에 디비에 저장하는게 적절할까요? 설문조사 작성중에 나간후 다시 작성할때 데이터가 남아있고 작성도중 이전다음페이지로 왔다갔다해도 데이터들이 남아있기해야한다면요 저장할때마다 디비에하면 서버부하가 심하나요? 그걸 해결할방법이있나요?

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

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

로컬스토리지 아무것도 없는데 괜찮을 까요?

커리어에서 많이 물어보면서 삐거덕 거리지만 열심히 굴러가고 있는 저의 작고 소중한 서비스가 있습니다 그런데 로컬스토리지를 보니까 계정 토큰 1게만 저장하고 아무것도 없더라고요 다른 서비스들은 로컬 스토리지가 화려한데 저의 서비스는 잘못된 걸까요?? 많으면 보안상 문제가 되지 않을까? 하는 걱정과 없는데 나도 있어야 하는거 아닌가? 하는 걱정입니다.