React Academy · 강의

Next.js App Router에 Auth.js 설정하기

Auth.js를 설치하고 경로 처리기를 구성한 뒤 GitHub OAuth 공급자를 추가합니다.

Next.js App Router에 Auth.js 설정하기은(는) CoddyKit의 무료 React Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

Auth.js란 무엇인가요

Auth.js(이전 이름은 NextAuth.js v5)는 Next.js를 위한 다양한 기능을 갖춘 인증 라이브러리입니다. OAuth 제공자, 자격 증명, 세션 및 JWT를 기본으로 처리합니다.

설치

Auth.js 베타 버전을 설치하고 config 파일을 초기화합니다.

npm install next-auth@beta

# Create auth.ts at project root
touch auth.ts

인증 config 만들기

프로젝트 루트의 auth.ts에서 제공자와 콜백을 사용해 인증 config를 정의합니다.

import NextAuth from 'next-auth';
import GitHub from 'next-auth/providers/github';

export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [GitHub],
  callbacks: {
    session({ session, token }) {
      session.user.id = token.sub!;
      return session;
    },
  },
});

경로 처리기 설정

app/api/auth/[...nextauth]/route.ts에 모든 하위 경로를 처리하는 경로 처리기를 만들고 Auth.js 처리기에 위임합니다.

// app/api/auth/[...nextauth]/route.ts
import { handlers } from '@/auth';

export const { GET, POST } = handlers;

환경 변수

OAuth 제공자에 필요한 환경 변수를 설정합니다. JWT 서명에는 AUTH_SECRET이 필요합니다.

# .env.local
AUTH_SECRET=your-random-secret-here

# GitHub OAuth
AUTH_GITHUB_ID=your-github-client-id
AUTH_GITHUB_SECRET=your-github-client-secret

# Generate AUTH_SECRET:
# npx auth secret

로그인 및 로그아웃 버튼 추가하기

auth.ts에서 signIn과 signOut을 가져와 Server Component 폼에서 사용합니다.

import { signIn, signOut } from '@/auth';

export function SignInButton() {
  return (
    <form action={async () => { 'use server'; await signIn('github'); }}>
      <button type="submit">Sign in with GitHub</button>
    </form>
  );
}

export function SignOutButton() {
  return (
    <form action={async () => { 'use server'; await signOut(); }}>
      <button type="submit">Sign out</button>
    </form>
  );
}

Server Component에서 세션 읽기

어떤 Server Component나 경로 처리기에서든 auth()를 auth.ts에서 호출하면 현재 세션을 가져올 수 있습니다.

import { auth } from '@/auth';

export default async function ProfilePage() {
  const session = await auth();
  if (!session) redirect('/login');
  return <h1>Welcome, {session.user?.name}</h1>;
}

미들웨어로 페이지 보호하기

Auth.js 미들웨어를 사용하면 모든 요청에서 서버 로직을 실행하지 않고도 엣지에서 경로를 보호할 수 있습니다.

// middleware.ts
export { auth as middleware } from '@/auth';

export const config = {
  matcher: ['/dashboard/:path*', '/profile/:path*'],
};

데이터베이스 세션

데이터베이스 어댑터(예: @auth/prisma-adapter)를 추가하면 세션, 사용자 및 계정을 JWT 대신 데이터베이스에 저장할 수 있습니다.

import { PrismaAdapter } from '@auth/prisma-adapter';
import { prisma } from '@/lib/prisma';

export const { handlers, auth, signIn, signOut } = NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [GitHub],
  session: { strategy: 'database' },
});

세션 타입 사용자 지정하기

Auth.js 세션 타입을 확장하여 사용자 ID나 역할 같은 사용자 지정 필드를 포함할 수 있습니다.

// types/next-auth.d.ts
import { DefaultSession } from 'next-auth';

declare module 'next-auth' {
  interface Session {
    user: { id: string; role: string } & DefaultSession['user'];
  }
}

오류 처리

Auth.js는 기본적으로 인증에 실패하면 /error로 리디렉션합니다. 오류 페이지를 사용자 지정하려면 app/error/page.tsx를 만드시면 됩니다.

빠른 확인

Next.js 앱 라우터에서 Auth.js GET 및 POST 처리기를 외부에 노출하려면 어떤 파일을 만들어야 합니까?

복습

next-auth@beta를 설치하고 제공자와 콜백을 포함한 auth.ts를 만드십시오. app/api/auth/[...nextauth]/route.ts에서 처리기를 외부에 노출하고, AUTH_SECRET과 제공자 환경 변수를 설정한 다음, Server Component에서 auth()로 세션을 읽으시면 됩니다.

자주 묻는 질문

“Next.js App Router에 Auth.js 설정하기” 강의는 무료인가요?

네 — “Next.js App Router에 Auth.js 설정하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Academy 강의 전체를 잠금 해제할 수 있습니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Next.js App Router에 Auth.js 설정하기”에서 뭘 배우나요?

Auth.js를 설치하고 경로 처리기를 구성한 뒤 GitHub OAuth 공급자를 추가합니다. 브라우저에서 직접 실행하는 실습 코드로 React Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

React Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 React Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“Next.js App Router에 Auth.js 설정하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 React Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 React Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← React Academy(으)로 돌아가기