Next.js에서 OAuth + RBAC(역할 기반 접근 제어) 구현하기

 

• OAuth(Open Authorization)를 활용한 로그인 처리
• NextAuth.js와 RBAC(역할 기반 접근 제어)를 결합하여 사용자 권한 관리
• Google, GitHub 등의 OAuth 제공자와 사용자 역할 설정 방법

npm install next-auth

 

pages/api/auth/[...nextauth].js (OAuth + RBAC 설정)

import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';
import GitHubProvider from 'next-auth/providers/github';

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    GitHubProvider({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
  ],
  callbacks: {
    async session({ session, token }) {
      session.user.role = token.role || 'user';
      return session;
    },
    async jwt({ token, user }) {
      if (user) {
        token.role = user.email === 'admin@example.com' ? 'admin' : 'user';
      }
      return token;
    },
  },
  secret: process.env.NEXTAUTH_SECRET,
});

 

pages/index.js (OAuth 로그인 UI)

import { signIn, signOut, useSession } from 'next-auth/react';

export default function Home() {
  const { data: session } = useSession();

  if (session) {
    return (
      <div>
        <h1>환영합니다, {session.user.name}!</h1>
        <p>이메일: {session.user.email}</p>
        <p>역할: {session.user.role}</p>
        <button onClick={() => signOut()}>로그아웃</button>
        {session.user.role === 'admin' && <p>관리자 전용 콘텐츠</p>}
      </div>
    );
  }

  return (
    <div>
      <h1>OAuth 로그인</h1>
      <button onClick={() => signIn('google')}>Google 로그인</button>
      <button onClick={() => signIn('github')}>GitHub 로그인</button>
    </div>
  );
}

 

환경 변수 설정 파일: .env.local

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
GITHUB_CLIENT_ID=your-github-client-id
GITHUB_CLIENT_SECRET=your-github-client-secret
NEXTAUTH_SECRET=your-random-secret

 

NextAuth.js를 활용하면 OAuth 로그인과 RBAC를 간편하게 구현 가능