인증 정보가 만료되었을 때 라우트 가드 처리가 궁금합니다!

Question

라우트 가드 학습 중 궁금한 점이 생겨서 질문드립니다! import { useSession } from "@/store/session"; import { Navigate, Outlet } from "react-router"; export default function MemberOnlyLayout() { const session = useSession(); if (!session) return ; return ; } 라우트 가드에서는 인증 정보 유무만 검사하고, 인증 정보 만료 여부는 별도로 확인하지 않나요? 만약 그렇다면 인증 정보가 만료된 상황에서의 처리 방법이 궁금합니다! 고민해봤을 때 인터셉터 등 별도 로직으로 구현해 다음과 같이 처리할 것 같습니다 접근한 페이지에서 인증이 필요한 요청 처리가 있다면 refreshToken 을 이용해 accessToken 을 재발급 한 뒤 요청을 재시도한다 refreshToken 도 만료되었다면 요청을 취소하고 로그인 페이지로 리디렉션 한다 그런데 이렇게 처리하면 refreshToken 도 만료된 사용자는 인증 정보가 있으므로 요청 페이지로 이동한다 짧은 순간이나마 데이터가 없는 빈 화면이나 깨진 UI를 본다 로그인 페이지로 리디렉션되며 혼란을 겪는다 그래서 라우트 가드에서 만료된 경우 접근을 막아야 되지 않을까 생각해봤는데 매번 토큰 유효성 검증을 수행하면 성능 저하가 발생할 것 같다는 생각을 했습니다 어떻게 처리하면 좋을지 의견을 여쭤보고 싶습니다!

winterlood · Answer

안녕하세요 이정환입니다. 토큰 만료에 대한 처리가 라우트 가드에서 이루어지지 않아 걱정되셨을 수 있는데요 결론부터 말씀드리면 라우트 가드에서 직접 토큰 만료를 확인할 필요는 없습니다. 그 이유는 다음과 같습니다. 1. 토큰이 만료되면 Supabase 클라이언트가 자동으로 토큰 리프레싱을 시도해 토큰을 갱신합니다 2. 갱신에 성공하면 새로운 세션으로 자동 업데이트되므로 사용자는 아무런 영향 없이 계속 서비스를 이용할 수 있습니다 3. 갱신에 실패하면 SessionProvider 컴포넌트의 onAuthStateChange 이벤트 핸들러에 의해 자동으로 session이 null로 업데이트되어 로그아웃 처리됩니다 4. session이 null이 되면 라우트 가드의 if (!session) 조건에 의해 자동으로 로그인 페이지로 리다이렉트됩니다 따라서 토큰의 만료 감지는 라우트 가드가 아닌 Supabase 클라이언트와 onAuthStateChange가 담당하고, 라우트 가드는 그 결과인 session의 유무만 확인하는 역할로 두는 것이 효율적입니다. 각각의 역할이 분리되어 있다고 이해해 주시면 됩니다!

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. seb vesta님. 인증 정보 만료 시의 라우트 가드 처리에 대한 고민은 매우 중요한 부분입니다. 사용자 경험을 최적화하면서 보안성을 유지하고자 할 때 특히 신경 써야 하는 부분이기도 합니다. 인증 정보 만료 처리 방법 라우트 가드 기반의 인증 정보 확인 : 라우트 가드에서 인증 정보 자체의 유무와 유효성을 모두 확인할 수 있습니다. 예를 들어, useSession 훅과 같이 클라이언트 측에서 세션 유지 여부를 관리하고 토큰의 만료 여부를 확인하는 로직을 추가하는 것입니다. accessToken 의 만료를 즉시 확인하려면, 로컬에 저장된 토큰의 만료 시간을 클라이언트 측에서 미리 확인하도록 설정할 수도 있습니다. 이렇게 하면 요청을 보내기 전에 만료 여부를 검증할 수 있습니다. 토큰 자동 갱신 : accessToken 이 만료된 경우, 자동으로 새로운 accessToken 을 갱신하려는 시도를 진행하는 인터셉터를 설정할 수 있습니다. refreshToken 도 만료될 경우에는 로그인 페이지로 리디렉션합니다. UI 처리 : 사용자가 접근 시 refreshToken 이 만료되었을 경우에는, 빈 화면 대신 로그아웃 상태로 적절한 메시지를 출력하거나 로딩 스피너를 표시하며 로그아웃 처리 후 로그인 페이지로 안내합니다. 세션 만료 알림 : 사용자의 세션이 만료되었음을 사전에 인지할 수 있게 알림을 제공하고, 자동 로그아웃되기 전에 사용자에게 로그아웃 예정임을 알려줄 수 있습니다. 이와 관련한 기존 질문과 답변을 참고하시면 도움이 될 것입니다: - React와 Redux로 Session 관리하기 - 세션 관리와 관련된 다양한 전략을 설명하고 있는 게시물로, 라우트 가드에서의 세부적인 예시를 확인하실 수 있습니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.