NextAuth와 Next.js: 미들웨어에서 세션 처리하는 다양한 방법

 

다음은 Next.js와 NextAuth를 사용하여 미들웨어에서 세션을 확인하는 방법에 대한 보다 구체적인 대안과 이에 대한 실제 코드입니다.

 

이 글에서는 여러 접근 방안을 제시하고, 각 방법에 대한 간단한 코드 예제를 포함하였습니다.

 

1. 미들웨어에서 세션을 직접 가져오기

먼저, 일반적인 방법으로 세션을 직접 가져오는 코드입니다. 하지만 이 방법은 성능상 이슈가 있을 수 있습니다.

// middleware.ts
import type { NextRequest } from "next/server";
import { getSession } from "next-auth/react";

export async function middleware(req: NextRequest) {
  const session = await getSession({ req });

  if (!session) {
    // 세션이 없는 경우 로그인 페이지로 리다이렉트
    return NextResponse.redirect(new URL("/login", req.url));
  }

  // 세션이 있는 경우 다음 처리로 넘김
  return NextResponse.next();
}

 

이 코드는 모든 요청에서 세션을 확인하므로, 성능에 부담이 될 수 있습니다.

 

따라서 다른 방법을 고려할 필요가 있습니다.

 

2. 쿠키를 통해 인증 상태 확인하기

미들웨어에서 세션을 가져오는 대신, 쿠키를 검사하여 인증 여부를 판단하는 방법입니다.

 

이 방법은 성능이 더 뛰어나고, 비용이 적게 듭니다.

// middleware.ts
import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";
import { cookies } from "next/headers";

export async function middleware(req: NextRequest) {
  const sessionCookie = cookies().get("__session")?.value;

  if (!sessionCookie) {
    // 세션 쿠키가 없는 경우 로그인 페이지로 리다이렉트
    return NextResponse.redirect(new URL("/login", req.url));
  }

  // 세션 쿠키가 있는 경우 다음 처리로 넘김
  return NextResponse.next();
}

 

이 코드는 __session 쿠키를 검사하여 사용자가 인증되었는지 여부를 판단합니다.

 

세션 쿠키가 없으면 로그인 페이지로 리다이렉트하게 됩니다.

 

3. 서버 측에서 세션 처리하기

로그인 및 회원가입 페이지에서 서버 측에서 세션을 처리하는 방법입니다.

 

이 방법은 요청 시 서버에서 세션을 가져오고 리다이렉트를 수행합니다.

// pages/login.tsx 또는 pages/register.tsx
import { getSession } from "next-auth/react";
import { useEffect } from "react";
import { useRouter } from "next/router";

const LoginPage = () => {
  const router = useRouter();

  useEffect(() => {
    const checkSession = async () => {
      const session = await getSession();

      if (session) {
        // 사용자가 이미 인증된 경우 메인 페이지로 리다이렉트
        router.push("/"); 
      }
    };

    checkSession();
  }, [router]);

  return (
    <div>
      <h1>로그인 페이지</h1>
      {/* 로그인 폼 */}
    </div>
  );
};

export default LoginPage;

 

이 코드는 클라이언트 측에서 세션을 가져와 사용자가 이미 인증되었는지 확인한 후, 인증된 경우 메인 페이지로 리다이렉트합니다.

 

4. 인증 서버 컴포넌트 사용하기

인증 서버 컴포넌트를 생성하여 세션이 없는 경우 로그인 페이지로 리다이렉트하는 방법입니다.

 

이 방법은 레이아웃 페이지에 보호된 콘텐츠를 쉽게 추가할 수 있습니다.

// components/AuthGuard.tsx
import { useSession } from "next-auth/react";
import { useRouter } from "next/router";
import { useEffect } from "react";

const AuthGuard = ({ children }) => {
  const { data: session, status } = useSession();
  const router = useRouter();

  useEffect(() => {
    if (status === "loading") return; // 로딩 중일 때는 아무것도 하지 않음

    if (!session) {
      // 세션이 없는 경우 로그인 페이지로 리다이렉트
      router.push("/login");
    }
  }, [session, status, router]);

  if (!session) {
    return <div>Loading...</div>; // 로딩 중일 때 보여줄 컴포넌트
  }

  return <>{children}</>; // 인증된 사용자의 콘텐츠를 렌더링
};

export default AuthGuard;

 

이 컴포넌트를 사용하여 보호된 페이지에서 인증을 처리할 수 있습니다.

 

예를 들어, 레이아웃 파일에서 다음과 같이 사용할 수 있습니다.

// pages/_app.tsx
import AuthGuard from "@/components/AuthGuard";

function MyApp({ Component, pageProps }) {
  return (
    <AuthGuard>
      <Component {...pageProps} />
    </AuthGuard>
  );
}

export default MyApp;

 

결론

 

이와 같이 Next.js와 NextAuth를 활용하여 미들웨어에서 세션을 확인하는 다양한 방법을 소개하였습니다.

 

각 방법은 특정 상황에 따라 장단점이 있으므로, 개발자는 자신의 필요에 맞는 방법을 선택하여 구현하면 됩니다.

 

이러한 방법들이 다른 개발자들에게도 도움이 되길 바랍니다.