NextAuth.js는 Next.js 애플리케이션에 인증 기능을 쉽게 추가할 수 있게 해주는 강력한 라이브러리입니다.
이 절에서는 NextAuth.js를 Next.js 프로젝트에 통합하는 방법, 기본 설정, 그리고 다양한 인증 제공자 설정에 대해 알아보겠습니다.
NextAuth.js 설치 및 기본 설정
먼저, NextAuth.js를 프로젝트에 설치합니다.
그 다음, NextAuth.js 설정 파일을 생성합니다.
App Router를 사용하는 경우, app/api/auth/[...nextauth]/route.js
파일을 생성합니다.
세션 관리
NextAuth.js는 자동으로 세션을 관리합니다.
클라이언트 컴포넌트에서 세션을 사용하려면 다음과 같이 할 수 있습니다.
서버 컴포넌트에서는 다음과 같이 세션을 사용할 수 있습니다.
OAuth 제공자 설정
NextAuth.js는 다양한 OAuth 제공자를 지원합니다.
예를 들어, Google과 GitHub 인증을 추가하려면 다음과 같이 설정할 수 있습니다.
각 제공자의 클라이언트 ID와 비밀키는 환경 변수로 관리하는 것이 좋습니다.
API 라우트와의 연결
NextAuth.js는 11장에서 다룰 API 라우트와 밀접하게 연관됩니다.
NextAuth.js는 자체적으로 여러 API 엔드포인트를 생성하며, 이를 통해 로그인, 로그아웃 등의 인증 관련 작업을 처리합니다.
또한, 사용자 정의 API 라우트에서 현재 세션 정보를 확인하여 인증된 사용자만 접근할 수 있도록 제한할 수 있습니다.
예를 들어, 보호된 API 라우트를 만들려면 다음과 같이 할 수 있습니다.
실습 : Google OAuth로 소셜 로그인 구현
Google OAuth를 사용하여 소셜 로그인을 구현해보겠습니다.
- Google Cloud Console에서 새 프로젝트를 생성하고 OAuth 2.0 클라이언트 ID를 만듭니다.
.env.local
파일에 Google 클라이언트 ID와 비밀키를 추가합니다.
app/api/auth/[...nextauth]/route.js
파일을 다음과 같이 수정합니다.
- 로그인 버튼을 포함한 컴포넌트를 생성합니다.
- 이 컴포넌트를 페이지에 추가하고 실행해보세요. Google 계정으로 로그인할 수 있어야 합니다.
이 실습을 통해 NextAuth.js를 사용하여 Google OAuth 로그인을 구현하는 방법을 익힐 수 있습니다.
추가로 다른 제공자를 통합하거나, 커스텀 로그인 페이지를 만들어보는 것도 좋은 연습이 될 것입니다.