auth0/auth0-nextjs

auth0-nextjs은(는) 무엇을 하나요?

Next.js 애플리케이션에 인증(로그인, 로그아웃, 보호된 페이지, 미들웨어, 서버 컴포넌트)을 추가할 때 사용하세요 - @auth0/nextjs-auth0 SDK를 사용하여 App Router와 Pages Router를 지원합니다.

개요

@auth0/nextjs-auth0 SDK는 Next.js 애플리케이션에 Auth0 인증을 통합하는 공식 라이브러리입니다. 이 스킬은 App Router와 Pages Router를 모두 지원하며, 서버 사이드 렌더링, 정적 사이트 생성, 미들웨어 등 Next.js의 다양한 기능과 함께 작동하도록 설계되었습니다.

설정 방법

1. Auth0 애플리케이션 등록

   • Auth0 대시보드에서 애플리케이션을 생성하고 도메인, 클라이언트 ID, 클라이언트 시크릿을 확인합니다.

2. 환경 변수 설정 .env.local 파일에 다음 변수를 추가합니다:

AUTH0_SECRET='your-long-secret-key'
AUTH0_BASE_URL='http://localhost:3000'
AUTH0_ISSUER_BASE_URL='https://your-tenant.auth0.com'
AUTH0_CLIENT_ID='your-client-id'
AUTH0_CLIENT_SECRET='your-client-secret'

3. SDK 설치

npm install @auth0/nextjs-auth0

사용 방법

App Router

app/layout.js (또는 app/layout.tsx)에 UserProvider를 추가합니다:

import { UserProvider } from '@auth0/nextjs-auth0/client';

export default function RootLayout({ children }) {
  return (
    <html lang="ko">
      <body>
        <UserProvider>{children}</UserProvider>
      </body>
    </html>
  );
}

로그인 페이지

app/api/auth/[auth0]/route.js 파일을 생성합니다:

import { handleAuth } from '@auth0/nextjs-auth0';

export const GET = handleAuth();

로그인/로그아웃 링크

import { useUser } from '@auth0/nextjs-auth0/client';

export default function Home() {
  const { user, error, isLoading } = useUser();

  if (isLoading) return <div>로딩 중...</div>;
  if (error) return <div>{error.message}</div>;

  return (
    <div>
      {user ? (
        <div>
          <p>환영합니다, {user.name}님!</p>
          <a href="/api/auth/logout">로그아웃</a>
        </div>
      ) : (
        <a href="/api/auth/login">로그인</a>
      )}
    </div>
  );
}

보호된 페이지

import { withPageAuthRequired } from '@auth0/nextjs-auth0/client';

export default withPageAuthRequired(function Profile() {
  const { user } = useUser();
  return <div>사용자 프로필: {JSON.stringify(user)}</div>;
});

Pages Router

pages/api/auth/[...auth0].js 파일을 생성합니다:

import { handleAuth } from '@auth0/nextjs-auth0';

export default handleAuth();

로그인/로그아웃 링크

import { useUser } from '@auth0/nextjs-auth0/client';

export default function Home() {
  const { user, error, isLoading } = useUser();

  if (isLoading) return <div>로딩 중...</div>;
  if (error) return <div>{error.message}</div>;

  return (
    <div>
      {user ? (
        <div>
          <p>환영합니다, {user.name}님!</p>
          <a href="/api/auth/logout">로그아웃</a>
        </div>
      ) : (
        <a href="/api/auth/login">로그인</a>
      )}
    </div>
  );
}

보호된 페이지 (getServerSideProps)

import { withPageAuthRequired } from '@auth0/nextjs-auth0';

export const getServerSideProps = withPageAuthRequired();

export default function ProtectedPage({ user }) {
  return <div>보호된 페이지입니다, {user.name}님!</div>;
}

미들웨어를 사용한 라우트 보호

middleware.js (또는 middleware.ts) 파일을 생성하여 특정 경로를 보호합니다:

import { withMiddlewareAuthRequired } from '@auth0/nextjs-auth0/middleware';

export default withMiddlewareAuthRequired();

export const config = {
  matcher: '/protected/:path*',
};

서버 컴포넌트에서의 인증

import { getSession } from '@auth0/nextjs-auth0';
import { redirect } from 'next/navigation';

export default async function ServerComponent() {
  const session = await getSession();
  if (!session) {
    redirect('/api/auth/login');
  }
  return <div>환영합니다, {session.user.name}님!</div>;
}

참고 사항

• AUTH0_SECRET은 32자 이상의 무작위 문자열이어야 합니다.
• 프로덕션 환경에서는 AUTH0_BASE_URL, AUTH0_ISSUER_BASE_URL, AUTH0_CLIENT_ID, AUTH0_CLIENT_SECRET을 환경 변수로 설정하세요.
• 자세한 내용은 공식 문서를 참조하세요.