[Next.js 14(SSR app route) + supabase auth] 삽질

supabase auth에서 미들웨어 로직 404 문제

회사에서 일을 하다가 supabase auth 로직을 짜고있는데 이상한 문제가 발생했다.

import { createMiddlewareClient } from "@supabase/auth-helpers-nextjs";
import { NextRequest, NextResponse } from "next/server";

export const middleware = async (req: NextRequest) => {
  const res = NextResponse.next();

  const supabase = createMiddlewareClient({ req, res });

  const {
    data: { session },
  } = await supabase.auth.getSession();

  console.log(session);

  if (!session) {
    return NextResponse.rewrite(new URL("/login", req.url));
  }

  return res;
};

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)."],
};

위 코드는 Next.js 14 version 기준 SSR방식인 app route 기능을 활용하여 미들웨어를 구현한 코드이다.

어떤 게 문제냐?

미들웨어 기능을 사용하여, 사용자가 로그인을 하지 않았을 때, 로그인 페이지로 리다이렉트하는 로직. 하지만 이 로직을 사용할 시, localhost를 실행할 경우 404 page not found를 일으킨다.

원인 분석

1. 리다이렉션 루프: 사용자가 로그인하지 않은 상태에서 /login 페이지에 접근하려고 하면, 미들웨어가 다시 /login으로 리다이렉트하려고 시도할 수 있음. 위 코드에서는 /login 경로에 대한 예외 처리가 없었기 때문에 이 경로도 미들웨어의 조건에 부합할 경우. 결과적으로 무한 리다이렉션 발생
2. 경로 매칭 문제: matcher 설정에서 예외로 처리한 경로 외의 다른 정적 파일이나 API 요청 등이 제대로 처리되지 않는 경우, 이로 인해 404 에러가 발생할 수 있음.
3. 예를 들어, 로그인 페이지가 정적 파일로 미리 생성되지 않았거나, 빌드 과정에서 문제가 발생하여 _next/static 경로 아래에 정상적으로 생성되지 않은 경우
4. rewrite 경로 문제: new URL 경로가 잘못 되었을 경우

해결

if (!session) {
  return NextResponse.rewrite(new URL("/auth/login", req.url));
}

아 짜증나 시간 아까워 너무 삽질했어….