← 전체 글로 돌아가기

Next.js

Next.js 미들웨어 리다이렉트 루프를 쿠키 조건부터 추적한 기록

로그인 직후 다시 로그인 화면으로 돌아가던 Next.js 미들웨어를 쿠키 조건으로 나눠 해결한 기록

로그인 성공 뒤 주소가 다시 돌아갔다

관리자 로그인 API는 200이었지만 브라우저는 /dashboard를 거쳐 /login으로 돌아왔다. 처음에는 토큰 저장 문제라고 봤는데 네트워크 탭에서 /dashboard 문서 요청이 미들웨어에 의해 리다이렉트되는 것을 확인했다.

쿠키 이름과 경로를 따로 확인했다

미들웨어는 session을 찾고 로그인 코드는 access_token을 저장하고 있었다. 이름을 맞춘 뒤에도 쿠키 path/api라 화면 요청에 전달되지 않았다. 실제 요청에는 값 대신 존재 여부만 기록했다.

export function middleware(request: NextRequest) {
  const token = request.cookies.get('access_token')
  console.log(request.nextUrl.pathname, Boolean(token))
  return NextResponse.next()
}

인증 쿠키는 화면 경로에서도 읽어야 하므로 path: '/'로 바꾸고, 미들웨어와 로그인 API가 같은 이름을 사용하게 했다. /login은 예외 경로로 남겼다.

세 가지 재현 케이스

  • 쿠키가 없을 때 /dashboard/login으로 한 번만 이동하는가
  • 로그인 직후 /dashboard 요청에 쿠키가 실리는가
  • 로그인 상태에서 /login을 열었을 때 의도한 페이지로 가는가

마지막 케이스를 빠뜨리면 보호 로직 자체가 루프를 만든다. 운영 로그에는 토큰 원문을 남기지 않았다.

다음 기준

리다이렉트 횟수보다 어느 요청에 어떤 쿠키가 실렸는지를 먼저 확인하겠다. API 성공과 페이지 인증을 같은 것으로 착각한 것이 원인이었다.