인프런 커뮤니티 질문&답변
작성한 질문수
클라이언트 , 서버 컴포넌트의 사용 범위
해결된 질문
작성
·
72
·
수정됨
0
안녕하세요 정환님. 완강하고 혼자 google oAuth 와 jwt를 이용해서 로그인을 구현하는 와중에 아무리 찾아봐도 도저히 개념이 잡히지 않는 부분이 있어서 질문 드립니다.
nextjs에서는 대부분의 컴포넌트들을 서버컴포넌트로 쓰는것을 권장하고, 상호작용을 위해 hydration이 필요한 컴포넌트들을 클라이언트 컴포넌트로 사용하라고 강의에서 배웠고 그렇게 구현을 하고 있습니다.
nextjs의 로그인을 찾아보면 jwt로 access토큰과 refresh 토큰을 이용해서 구현을 하는 글들이 많이 있는데, access토큰은 로컬 스토리지나 state에 담고, refresh 토큰은 httpOnly 쿠키에 담으라고 합니다.
구현을 하다보니 컴포넌트에서 데이터를 페칭을 할때 서버에 access 토큰을 헤더에 담아 보내기 위해서는 로컬 스토리지나 state를 사용하기위해 무조건 클라이언트 컴포넌트를 사용해야 하는데 , 원래 이래야 하는 건가요? 이렇게 되면 데이터 페칭이 필요한 컴포넌트들을 무조건 클라이언트 컴포넌트가 되어버립니다.
아니면 서버 컴포넌트를 사용하고 페칭이 필요할때는 쿠키에 있는 refresh 토큰으로 매번 검증을 해야하는것인지..
강의에 많이 벗어난 내용 같긴 한데 이렇게 사용하는게 맞는건인지 .. 개념이 잘 잡히지 않아 질문드립니다.
강의는 정말 잘 들었습니다. 새해 복 많이 받으세요.
답변 1
0
안녕하세요 이정환입니다.
일단 Access Token이나 Refresh Token 모두 보통은 로컬스토리지보다는 쿠키에 담는걸로 알고 있어요로컬스토리지는 사용자가 임의로 데이터를 수정할수도 있고, 또 허용되지 않은 스크립트에 의해 토큰이 탈취되는 문제가 발생할 수도 있기 때문에 보통은 쿠키를 이용하는걸로 알고 있습니다. 저도 대개 쿠키를 이용해 인증 처리를 구현하고 있구요 😃
쿠키를 이용하시면 요런식으로 구현하실 수 있어요
브라우저가 Next.js 서버에게 로그인 요청
로그인 성공시, Next.js 서버는 Access Token과 Refresh Token을 1번 요청에 대한 응답으로 보내줌
이때 body로 응답하는것이 아닌 Response Header에 set-cookie 필드를 통해 응답함
이렇게 될 경우 브라우저의 쿠키 저장소에 서버에서 응답한 토큰이 자동으로 저장 됨
이후의 요청부터는 이 쿠키에 포함된 토큰이 동봉되어 보내짐
이제 브라우저는 이후의 Next.js 서버에게 어떤 요청을 보내든, 2번 과정에서 응답받은 토큰이 쿠키에 포함되어 전송 됨 (자동으로 됨)
Next.js 서버는 이제 매번 요청에 동봉된 쿠키 값을 검사하여(Request 헤더에 있음) access token을 사용함
외부 백엔드 서버에 요청해야 하는 경우 쿠키의 토큰을 사용하면 됨
내부적으로 라우트 가드(로그인 해야만 접근 가능한 페이지)를 구현해야 할 경우 토큰의 유효성을 확인하면 됨