TIL- 로그인 상태 관리 기술적 의사결정 및 트러블 슈팅

기술적 의사결정

현재 프로젝트는 Next.js 14 버전에 Supabase를 사용하여 모든 서버 요청을 통해 로그인 상태를 관리하고 있습니다. 따라서 서버 상태 관리에 최적화된 라이브러리인 TanStack Query를 사용하는 것이 더 적합하다고 판단하여, 로그인 상태 관리를 TanStack Query로 결정하였습니다.

 

트러블슈팅

Supabase 미들웨어에서 사용자 인증을 처리하는 코드에서 문제가 발생했습니다. 원래 코드에서는 특정 경로에 대해 사용자가 로그인하지 않은 경우 로그인 페이지로 리디렉션하는 로직이 다음과 같았습니다:

 

if (
  !user &&
  !request.nextUrl.pathname.startsWith('/login') &&
  !request.nextUrl.pathname.startsWith('/auth')
) {
  const url = request.nextUrl.clone();
  url.pathname = '/login';
  return NextResponse.redirect(url);
}

 

여기에 sign-up 경로를 추가해야 할 필요가 있었고, if문이 길어지는 것을 피하기 위해 some 메서드를 사용하여 코드를 리팩터링했습니다. 하지만 API 경로를 포함하지 않아서 라우트 핸들러에 전달되지 않는 문제가 발생했습니다. 이를 해결하기 위해 다음과 같이 코드를 수정했습니다:

 

const publicRoutes = ['/log-in', '/sign-up', '/auth', '/api'];

if (!user && !publicRoutes.some((route) => request.nextUrl.pathname.startsWith(route))) {
  const url = request.nextUrl.clone();
  url.pathname = '/log-in';
  return NextResponse.redirect(url);
}

 

그 결과  API 경로를 포함하여 올바르게 라우트 핸들러에 전달되도록 했습니다.