NextAuth.js 설정

NextAuth.js는 Next.js 애플리케이션에 인증 기능을 쉽게 추가할 수 있게 해주는 강력한 라이브러리입니다.

이 절에서는 NextAuth.js를 Next.js 프로젝트에 통합하는 방법, 기본 설정, 그리고 다양한 인증 제공자 설정에 대해 알아보겠습니다.

NextAuth.js 설치 및 기본 설정

먼저, NextAuth.js를 프로젝트에 설치합니다.

npm install next-auth

그 다음, NextAuth.js 설정 파일을 생성합니다.

App Router를 사용하는 경우, app/api/auth/[...nextauth]/route.js 파일을 생성합니다.

import NextAuth from 'next-auth'
import CredentialsProvider from 'next-auth/providers/credentials'
 
const handler = NextAuth({
  providers: [
    CredentialsProvider({
      name: 'Credentials',
      credentials: {
        username: { label: "Username", type: "text" },
        password: { label: "Password", type: "password" }
      },
      async authorize(credentials) {
        // 여기에 실제 인증 로직을 구현합니다
        if (credentials.username === "admin" && credentials.password === "password") {
          return { id: 1, name: "Admin" }
        }
        return null
      }
    })
  ],
  // 추가 설정...
})
 
export { handler as GET, handler as POST }

세션 관리

NextAuth.js는 자동으로 세션을 관리합니다. 클라이언트 컴포넌트에서 세션을 사용하려면 다음과 같이 할 수 있습니다.

'use client'
 
import { useSession } from "next-auth/react"
 
export default function ClientComponent() {
  const { data: session } = useSession()
  
  if (session) {
    return <p>Signed in as {session.user.email}</p>
  }
  return <p>Not signed in</p>
}

서버 컴포넌트에서는 다음과 같이 세션을 사용할 수 있습니다.

import { getServerSession } from "next-auth/next"
import { authOptions } from "./api/auth/[...nextauth]/route"
 
export default async function ServerComponent() {
  const session = await getServerSession(authOptions)
  
  if (session) {
    return <p>Signed in as {session.user.email}</p>
  }
  return <p>Not signed in</p>
}

OAuth 제공자 설정

NextAuth.js는 다양한 OAuth 제공자를 지원합니다. 예를 들어, Google과 GitHub 인증을 추가하려면 다음과 같이 설정할 수 있습니다.

import NextAuth from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'
import GitHubProvider from 'next-auth/providers/github'
 
const handler = NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
    GitHubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
  ],
  // 추가 설정...
})
 
export { handler as GET, handler as POST }

각 제공자의 클라이언트 ID와 비밀키는 환경 변수로 관리하는 것이 좋습니다.

API 라우트와의 연결

NextAuth.js는 11장에서 다룰 API 라우트와 밀접하게 연관됩니다. NextAuth.js는 자체적으로 여러 API 엔드포인트를 생성하며, 이를 통해 로그인, 로그아웃 등의 인증 관련 작업을 처리합니다.

또한, 사용자 정의 API 라우트에서 현재 세션 정보를 확인하여 인증된 사용자만 접근할 수 있도록 제한할 수 있습니다.

예를 들어, 보호된 API 라우트를 만들려면 다음과 같이 할 수 있습니다.

import { getServerSession } from "next-auth/next"
import { authOptions } from "../auth/[...nextauth]/route"
 
export async function GET(request) {
  const session = await getServerSession(authOptions)
 
  if (!session) {
    return new Response("Unauthorized", { status: 401 })
  }
 
  // 인증된 사용자를 위한 로직
  return new Response("Protected content", { status: 200 })
}

실습 : Google OAuth를 사용한 소셜 로그인 구현

Google OAuth를 사용하여 소셜 로그인을 구현해보겠습니다.

Google Cloud Console에서 새 프로젝트를 생성하고 OAuth 2.0 클라이언트 ID를 만듭니다.
.env.local 파일에 Google 클라이언트 ID와 비밀키를 추가합니다.

GOOGLE_ID=your_google_client_id
GOOGLE_SECRET=your_google_client_secret
NEXTAUTH_SECRET=your_nextauth_secret

app/api/auth/[...nextauth]/route.js 파일을 다음과 같이 수정합니다.

import NextAuth from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'
 
const handler = NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
  ],
  // 추가 설정...
})
 
export { handler as GET, handler as POST }

로그인 버튼을 포함한 컴포넌트를 생성합니다.

'use client'
 
import { signIn, signOut, useSession } from 'next-auth/react'
 
export default function LoginButton() {
  const { data: session } = useSession()
 
  if (session) {
    return (
      <>
        Signed in as {session.user.email} <br/>
        <button onClick={() => signOut()}>Sign out</button>
      </>
    )
  }
  return (
    <>
      Not signed in <br/>
      <button onClick={() => signIn('google')}>Sign in with Google</button>
    </>
  )
}

이 컴포넌트를 페이지에 추가하고 실행해보세요. Google 계정으로 로그인할 수 있어야 합니다.

이 실습을 통해 NextAuth.js를 사용하여 Google OAuth 로그인을 구현하는 방법을 익힐 수 있습니다. 추가로 다른 제공자를 통합하거나, 커스텀 로그인 페이지를 만들어보는 것도 좋은 연습이 될 것입니다.

Tailwind CSS 설정 및 사용 로그인 및 로그아웃 구현