보호된 라우트 생성

보호할 페이지 생성 또는 수정: middleware.ts에 정의된 matcher 경로에 해당하는 페이지들은 이제 자동으로 미들웨어에 의해 보호됩니다. 이 페이지들에서는 더 이상 getServerSession을 사용하여 인증 여부를 직접 확인할 필요가 없습니다 (필요하다면 사용자 정보는 가져올 수 있음).

// 이 파일에는 더 이상 getServerSession 및 redirect 로직이 필요 없습니다.
// 미들웨어에서 이미 인증 여부를 확인했기 때문입니다.
import { getServerSession } from 'next-auth'; // 사용자 정보를 가져오기 위해 필요할 수 있음
import { authOptions } from '../api/auth/[...nextauth]/route';

export default async function DashboardPage() {
  // 이미 인증된 상태이므로, 세션 정보를 가져와서 활용하기만 하면 됩니다.
  const session = await getServerSession(authOptions);

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '20px auto', border: '1px solid #28a745', borderRadius: '10px', boxShadow: '0 4px 8px rgba(0,0,0,0.1)', textAlign: 'center' }}>
      <h1 style={{ color: '#28a745', marginBottom: '20px' }}>대시보드</h1>
      <p className="text-gray-700">환영합니다, <span style={{ fontWeight: 'bold' }}>{session?.user?.name || '사용자'}</span>님! 이곳은 미들웨어에 의해 보호되는 대시보드 페이지입니다.</p>
      {session?.user?.image && (
        <img
          src={session.user.image}
          alt="User Avatar"
          style={{ width: '80px', height: '80px', borderRadius: '50%', marginTop: '20px', display: 'block', margin: '0 auto' }}
        />
      )}
      <p style={{ marginTop: '15px', fontSize: '0.9em', color: '#555' }}>
        (미들웨어에서 인증을 처리하여 서버 컴포넌트가 더 간결해졌습니다.)
      </p>
    </div>
  );
}

세션에 사용자 역할 추가: src/app/api/auth/[...nextauth]/route.ts 파일의 callbacks.jwt 및 callbacks.session 함수에서 사용자 정보를 처리할 때, 데이터베이스에서 가져온 사용자 역할 정보를 세션(token, session)에 추가합니다.

// ... (기존 코드) ...

callbacks: {
  async jwt({ token, user, account }) {
    if (account && user) {
      const ROLE_BY_EMAIL: Record<string, 'admin' | 'user'> = {
        'admin@example.com': 'admin',
      };
      const userRole = ROLE_BY_EMAIL[user.email ?? ''] ?? 'user';
      token.role = userRole; // JWT 토큰에 역할 추가
    }
    return token;
  },
  async session({ session, token }) {
    session.user.role = token.role; // 세션 객체에 역할 추가
    return session;
  },
},
// ... (기존 코드) ...

참고: 예제는 재현 가능한 매핑(ROLE_BY_EMAIL)으로 역할을 결정합니다. 실제 서비스에서는 데이터베이스 또는 IDP claim의 role 필드를 같은 위치에서 읽어오면 됩니다.

• 서버 컴포넌트

  import { getServerSession } from 'next-auth';
  import { redirect } from 'next/navigation';
  import { authOptions } from '../api/auth/[...nextauth]/route';
  export default async function AdminPage() {
    const session = await getServerSession(authOptions);
    if (!session) {
      redirect('/api/auth/signin?callbackUrl=/admin');
    }
    // 'admin' 역할이 아니면 접근 거부
    if (session.user?.role !== 'admin') {
      redirect('/unauthorized'); // 권한 없음 페이지로 리다이렉트
    }
    return (
      <div style={{ padding: '20px', maxWidth: '800px', margin: '20px auto', border: '1px solid #ffc107', borderRadius: '10px', boxShadow: '0 4px 8px rgba(0,0,0,0.1)', textAlign: 'center' }}>
        <h1 style={{ color: '#ffc107', marginBottom: '20px' }}>관리자 페이지</h1>
        <p>환영합니다, <span style={{ fontWeight: 'bold' }}>{session.user?.name}</span>님! 귀하는 <span style={{ fontWeight: 'bold' }}>{session.user?.role}</span> 권한을 가지고 있습니다.</p>
        <p style={{ marginTop: '10px', fontSize: '0.9em', color: '#555' }}>
          (이 페이지는 'admin' 역할만 접근할 수 있습니다.)
        </p>
      </div>
    );
  }

• 미들웨어: 미들웨어에서도 withAuth 함수에 callbacks.authorized 옵션을 사용하여 역할 기반 접근 제어를 구현할 수 있습니다.

  import { withAuth } from 'next-auth/middleware';
  import { NextResponse } from 'next/server'; // Next.js API에서 제공하는 응답 객체
  export default withAuth(
    // `authorized` 콜백에서 요청에 대한 권한을 검사합니다.
    function middleware(req) {
      const token = req.nextauth.token;
      // 예시: '/admin' 경로에 대해서는 'admin' 역할만 허용
      if (req.nextUrl.pathname.startsWith('/admin') && token?.role !== 'admin') {
        return NextResponse.rewrite(new URL('/unauthorized', req.url)); // 권한 없음 페이지로 리다이렉트 (URL 변경)
      }
      // 그 외의 경우는 정상적으로 요청 처리
      return NextResponse.next();
    },
    {
      pages: {
        signIn: '/api/auth/signin',
      },
      callbacks: {
        // 인증 여부만 확인 (세션이 있으면 true)
        // 여기서는 토큰의 존재 여부만으로 인증을 판단하고,
        // 실제 권한 검사는 `middleware` 함수 내부에서 수행합니다.
        authorized: ({ token }) => !!token,
      },
    }
  );
  export const config = {
    matcher: [
      '/dashboard/:path*',
      '/profile/:path*',
      '/admin/:path*',
    ],
  };

  미들웨어에서 권한을 검사하는 방식은 매우 강력하지만, 복잡한 권한 로직을 모두 미들웨어에서 처리하기보다는, 페이지 컴포넌트 내부에서 getServerSession을 통해 상세한 권한 검사를 수행하는 것이 더 관리하기 좋을 때도 있습니다.

이전 절의 NextAuth.js 기본 설정이 완료되어 있고, GitHub 로그인 Provider가 작동하는지 확인합니다.

src/app/dashboard/page.tsx를 위 getServerSession 예시로 생성/수정합니다.

src/app/settings/page.tsx를 위 클라이언트 컴포넌트 예시로 생성합니다.

src/app/admin/page.tsx를 위 서버 컴포넌트 + 역할 확인 예시로 생성합니다.

• 중요: src/app/api/auth/[...nextauth]/route.ts 파일의 callbacks 부분에 token.role = userRole;와 같이 역할을 할당하는 로직을 추가해야 합니다.

src/app/unauthorized/page.tsx 파일을 생성하여 권한 없음 메시지를 표시하는 페이지를 만듭니다.

export default function UnauthorizedPage() {
  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '20px auto', border: '1px solid #dc3545', borderRadius: '10px', boxShadow: '0 4px 8px rgba(0,0,0,0.1)', textAlign: 'center' }}>
      <h1 style={{ color: '#dc3545', marginBottom: '20px' }}>권한 없음 (Unauthorized)</h1>
      <p>이 페이지에 접근할 권한이 없습니다.</p>
      <p style={{ marginTop: '15px' }}>
        <a href="/" style={{ color: '#007bff', textDecoration: 'underline' }}>홈으로 돌아가기</a>
      </p>
    </div>
  );
}

src/middleware.ts 파일을 생성하여 전역적인 라우트 보호를 테스트해 볼 수 있습니다. (미들웨어와 getServerSession을 동시에 사용할 경우, 미들웨어에서 인증을 처리하므로 getServerSession 호출 로직을 제거해야 함).

개발 서버를 실행하고 다음 경로로 접속하며 테스트합니다.

• 로그인하지 않은 상태에서 /dashboard, /settings, /admin에 접속하여 리다이렉트되는지 확인합니다.
• 로그인한 상태에서 /dashboard, /settings에 접속하여 콘텐츠가 보이는지 확인합니다.
• 로그인한 상태에서 /admin에 접속하여, 만약 admin 역할이 아니라면 /unauthorized 페이지로 리다이렉트되는지 확인합니다. (GitHub 로그인만 사용한다면, 일반 사용자 계정으로는 admin 페이지에 접근할 수 없을 것입니다.)