jwt

웹뷰 + 모노레포 환경에서 자동 토큰 갱신 훅으로 개발자 경험 개선하기 (feat. axios, zustand)

https://0422.tistory.com/347 React, RN 환경에서 WebView 통신하기 (react-native-webview) 배경 웹뷰를 사용하여 앱을 구성하고 있다. 웹뷰는 마치 HTML의 iframe 태그처럼, 내부적으로 하나의 화면을 띄우는 형태이다. 그런데 우리 서비스의 로그인 로직은 앱에 있어서, 웹에서 따로 로그 0422.tistory.com 위 글에서 이어진다. 이전 게시글을 통해 앱-웹간 통신으로 토큰을 받아오고 이벤트를 발생시키는 것까지는 완료했다. 하지만 이제부터 시작이다. 받아오기전에는 어떻게 하고, 받은 토큰을 어떻게 관리할 것인가? 토큰을 받아오기 전에는? 토큰은 앱의 onLoad를 통해 주입되지만, 이 이벤트가 동기적으로 작동하지는 않는다. 따라서 웹 화면은 로..

React, RN 환경에서 WebView 통신하기 (react-native-webview)

배경 웹뷰를 사용하여 앱을 구성하고 있다. 웹뷰는 마치 HTML의 iframe 태그처럼, 내부적으로 하나의 화면을 띄우는 형태이다. 그런데 우리 서비스의 로그인 로직은 앱에 있어서, 웹에서 따로 로그인/로그아웃을 구현하지 않고, 앱 내부의 JWT토큰을 웹으로 전달할 수 있어야 했다. 또한 웹내에서 JWT토큰이 만료되는 경우 로그인 페이지로 이동시켜줄 필요가 있었다. 우선 Web과 App환경의 통신 방법에 대해 알아보고, 이후에 토큰을 내부적으로 관리해볼 것이다. 기본 구성하기 기본적으로 react-native-webview 라이브러리를 사용해서 WebView 화면을 띄워주었다. https://www.npmjs.com/package/react-native-webview react-native-webview..

JWT를 활용한 로그인 없는 안전한 프로필 공유 만들기

들어가며 프렌딩에서 프로필 교환 관련 개발을 하고있었다. 여기서 프로필 교환이란, 나와 상대의 프로필 카드를 교환하는 것이다. 마치 명함을 교환하는 것처럼 말이다. 그런데 여기서 약간의 문제가 생겼다. 앱인 경우에는 프로필 공유를 하게되면, 해당 프로필을 가진 사람의 기기에 푸시알림을 보내서 친구추가를 하는 형태였지만, 앱을 설치하지 않은 사람이 설치한 사람의 프로필 링크를 받거나, QR을 찍는 경우 어떻게 할지가 고민했다. 결론은 앱을 설치하지 않은 사용자의 경우 웹을 띄워서 어떤 프로필인지 볼 수 는 있게 해주자 였는데, 이걸 어떻게 안전하게 구현할 수 있을지가 고민이었다. 그냥 프로필 id로 보여주면 되는거 아님? 웹링크는 랜딩 사이트를 이미 개발했고, 배포해두었기때문에, 랜딩 사이트의 url을 사..

개발 환경(cross-domain간)에서 안전하게 쿠키 인증 테스트하기

쿠키에 대한 개념, CORS간 쿠키요청에 대한 글은 이전 글을 참고해주면 된다. 참고 이 글은 배포환경에 아닌(배포환경은 same-site다) 개발환경에서의 cross-domain, 즉 localhost와 백엔드 서버간의 쿠키 인증, 그리고 api테스트에 대해 다룬다. 여기서 설정한 것들은 배포환경과는 별개의 로직이다. 배경과 문제상황 도입하게 된 배경 우리 서비스는 OAuth2.0을 사용해 구글, 깃허브 로그인을 진행하고, 이후에 얻어지는 서버 자체의 JWT토큰을 set-cookie를 통해 httpOnly쿠키를 set해주는 방식으로 인증을 구현했다. 들어가기에 앞서 우리 서비스의 쿠키 옵션을 살펴보자. httpOnly O secure O same-site Lax httpOnly JS로는 쿠키를 조작할 ..

React JWT 인증(로그인, 회원가입) 구현

https://www.youtube.com/watch?v=KMJE9FIDZl8&t=27s 멋쟁이사자처럼 11기에서 진행한 세션 실습내용입니다. 노션 https://energetic-palm-634.notion.site/JWT-da4634014dab4eb58445bf3bf1ed94c1?pvs=4

MySQL로 로그인, 회원가입 구현하기 (4) - JWT 구현하기

jsonwebtoken이라는 라이브러리를 통해 node에서 jwt를 구현할 수 있다. npm i jsonwebtoken jwtMaker const jwt = require('jsonwebtoken'); const jwtMaker = (id) => { const payload = { id: id }; const secret = process.env.SECRET; const options = { expiresIn: '15m', }; const token = jwt.sign(payload, secret, options); return token; }; module.exports = jwtMaker; expiresIn을 통해 토큰의 만료시간을 설정해주었고, payload로 user_id를 기입해주었다. user..

MySQL로 로그인, 회원가입 구현하기 (3) - 인증, 인가: 세션/쿠키와 JWT

왜 이런짓을 하는거지? 유저가 로그인을 하면, 인증이 된다. 근데 그 뒤에는? 클라이언트가 페이지를 이동하면? 어떻게 그 인증정보를 유지할 수 있을까? HTTP요청은 Stateless이다. 즉, 이전 통신 내용을 기억하지 못한다. 그래서 100번 통신을 하면 100번 모두 0422임을 증명해줘야 한다. 그럼 100번 통신하면 100번 다 로그인할꺼냐? 그건 좀 아닌 것 같다. 이를 위한 방법으로는 세가지가 있는데 쿠키만사용, 세션/쿠키, JWT가 있다. 쿠키 사용자가 로그인을 하면 서버에서는 사용자 정보를 담은 쿠키를 생성해서 응답값으로 던져준다. 클라이언트는 이를 받아서 브라우저 쿠키형태로 저장을 해두고, 요청시마다 header에 담아서 서버로 날려준다. 근데인증을 위해서는 계정정보를 쿠키에 담고 있어..