인프런 커뮤니티 질문&답변

안녕하세요 seb vesta님 이정환입니다.

Supabase가 아닌 별도의 백엔드 서버를 활용하신다면 보통은 쿠키를 사용하게 됩니다. 쿠키를 이용해 인증 정보를 관리하는 내용은 아래의 잘 정리된 아티클을 참고하시면 좋을 것 같습니다!

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-JWTjson-web-token-%EB%9E%80-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC#cookie_%EC%9D%B8%EC%A6%9D

쿠키를 사용하고 싶지 않으시다면 Supabase가 하던 작업 "로컬스토리지에 토큰을 보관하고, 꺼내 사용한다"를 그대로 구현하시면 되는데요 시나리오만 설명해드리자면 다음과 같습니다.

1. 로그인 API 요청 성공시 백엔드 서버에서 Access Token, Refresh Token 응답

2. 두 토큰 모두 로컬스토리지와 Zustand 스토어에 보관 (간혹 Refresh 만 보관하는 경우도 있습니다)

3. API 요청시 Zustand 스토어에 보관된 Access Token 첨부

4. Acecss Token 만료로 인해 백엔드 서버에서 400(Bad Request) 응답할 경우

    

   • Refresh Token을 사용해 Access Token을 갱신하는 API 요청

   • 응답받은 Access Token을 2번과 동일하게 로컬스토리지와 Zustand 스토어에 보관(갱신)

안녕하세요, 인프런 AI 인턴입니다. seb vesta님.

Supabase와 같은 외부 서비스를 사용하지 않을 때 세션 관리에 대한 고민이 많으실 것으로 이해합니다. 기존의 Supabase에서는 onAuthStateChange 이벤트를 통해 세션 상태의 변화를 감지했습니다. 그러나, 자체적으로 서버를 관리하거나 다른 백엔드 서비스를 사용할 경우 조금 다른 접근 방식이 필요합니다. 다음과 같은 방법을 고려해보실 수 있습니다:

1. 서버 측 세션 관리

일반적으로 백엔드 서버가 있다면, 세션 관리는 서버에서 처리하는 것이 적합합니다. 서버 측에서 세션을 생성하고, 쿠키를 통해 클라이언트에게 세션 ID를 전달하는 방식입니다.

• 세션 ID: 서버에서 생성된 세션 ID를 쿠키에 저장하고, 서버에 요청할 때마다 이 쿠키를 포함하여 세션 상태를 확인합니다.
  
• 쿠키를 통한 세션 체크: 클라이언트가 페이지를 로드할 때마다 서버에 요청을 보내 로그인 상태를 업데이트하거나 유지할 수 있습니다.
  

2. 클라이언트 측 세션 관리

서버 측에서 세션을 관리하지 않는 대신, 클라이언트 측에서 상태를 관리할 수도 있습니다. 이럴 경우 로컬 스토리지나 상태 관리 라이브러리(Zustand나 Redux)를 활용할 수 있습니다.

• 로컬 스토리지: 로그인 성공 시 토큰이나 세션 데이터를 로컬 스토리지에 저장하고, 사용하는 컴포넌트에서 이를 읽어 상태를 업데이트합니다.
  
• 상태 관리 라이브러리: 로그인 상태가 변경될 때 상태 관리 라이브러리에 상태를 저장하여 필요한 컴포넌트에서 사용할 수 있도록 합니다.
  

3. 상태 변경 감지

클라이언트 측에서 상태 변경을 감지하려면 로그인 및 로그아웃 같은 주요 이벤트에서 상태를 갱신하도록 설정합니다.

• 이벤트 핸들러: 로그인 또는 로그아웃 시점에 상태를 변경하고 이를 스토어에 저장합니다.
  
• 전역 상태: Zustand와 같은 상태 관리 도구를 활용하여 전역 상태로 관리하고, 상태 변경 시 자동으로 UI가 업데이트되도록 만듭니다.
  

관련 질문 예시: React에서 로그인 상태 유지하기 - sessionStorage와 useEffect

이 접근 방법들은 서버 또는 클라이언트의 환경에 따라 달라질 수 있으니, 프로젝트의 구조와 목적에 맞게 선택하시면 될 것 같습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.