[Next.js] Next-Auth (Google)

Next-auth

•  Next.js 애플리케이션에서 사용자를 인증하고 관리하기 위한 오픈 소스 라이브러리
• `next-auth`를 사용하면 다양한 인증 제공자(소셜 로그인, 이메일, 로그인 등) 손쉽게 통합할 수 있으며, Oauth 2.0, OpenID Connect, JWT(JSON Web Token)와 같은 다양한 인증 표준도 지원을 한다.

 

기능

 - 다양한 인증 제공자 지원

•  - OAuth 2.0 : Google, Facebook, Twitter, GitHub 등 소셜 로그인 제공자를 지원한다.
• 자체 로그인 : 이메일 기반의 인증 및 비밀번호 기반 로그인을 구현할 수 있다.
• 타사 로그인 : 엔터프라이즈 인증 제공자(Auth0,Microsoft Azure AD)와도 통합할 수 있다.

 

세션관리

•  `next-auth`는 사용자의 세션을 관리하는 기능을 제공하며, 서버 세션 또는 클라이언트에서 JWT 기반 세션을 사용할 수 있다.
• 세션은 기본저으로 쿠키를 통해 관리되며, 필요에 따라 커스터마이징을 할 수 있다.

 

보안

•  - CSRF(Cross-Site-Request Forgery) 보호를 위해 내장 기능이 제공되며, 세션 암호화 및 보안 강화 기능이 포함되어 있다.
• 사용자는 자신의 보안 요구사항에 따라 인증 로직을 커스터마이징할 수 있다.

 

유연한 구성 및 커스터마이징

•  - Next.js API 라우트를 활용하여 사용자 정의 인증 로직을 쉽게 추가할 수 있다.
• 인증 후 훅(hooks) 등을 사용하여 추가 로직을 구현할 수 있다.

 

호환성

•  - `next-auth`는 TypeScript와 안전히 호환되며, TypeScript 환경에서도 타입 안전성을 보장한다.
• 데이터베이스와의 통합도 원활하게 지원되며, MongoDB, MySQL, PostgerSQL 등 다양한 데이터베이스를 사용할 수 있다.

 

주요 컴포넌트

Providers	사용자가 인증에 사용할 수 있는 여러 제공자를 정의한다. 예를 들어, Googl OAuth를 사용하려면 `GoogleProvider`을 설정한다.
Session	인증된 사용자의 세션 데이터를 관리한다. `userSession` 훅을 통해 클라이언트에서 세션 정보를 쉽게 접근할 수 있다.
API Routes	`next-auth`는 `/api/auth/[...nextauth]`와 같은 Next.js API 라우트를 사용하여 인증과 관련된 다양한 엔드포인트를 제공한다.
Callbacks	로그인, 로그아웃, 세션 확인 등의 이벤트가 발생할 때마다 커스텀 로직을 추가할 수 있는 콜백 기능을 제공한다.
Pages	로그인 페이지, 로그아웃 페이지, 에러 페이지 등과 같은 인증과 관련된 페이지를 커스텀마이징할 수 있다.

 

Google API

// pages/api/auth/[...nexauth].js
import NextAuth from "next-auth";
import Providers from "next-auth/providers";

export default NextAuth({
	providers: [
    	providers,Google({
        	clientId: process.env.GOOGLE_CLIENT_ID,
            cliendSecret: process.env.GOOGLE_CLIENT_SECRET,
        }),
    ],
    database: process.env.DATABASE_URL,//DB연결(선택사항)
    callbacks: {
    	async session(session, token) {
        	session.user.id = token.id;
            return session;
          },
       },
    });

• Google OAuth 2.0 인증 제공자를 설정하고, 세션 콜백에서 사용자 ID를 세션에 포함시키는 방식으로 설정했다.
• Next.js 프로젝트에서 `next-auth` 라이브러리를 사용하여 인증을 설정하는 API 라우트이다.

import

import NextAuth from "next-auth";
import Providers from "next-auth/providers";

• NextAuth : `next-auth` 라이블리의 기본 모듈로, 인증 기능을 설정하고 구성하는데 사용된다.
• Providers : 다양한 인증 제공자를 포함하는 객체로, `Google`, `Facebook`, `GitHub` 등 다양한 인증 제공자를 설정할 수 있다.

 

NextAuth 설정 내보내기

export default NextAuth({
	providers: [
    	Providers.Google({
        	clientId: process.env.GOOGLE_CLIENT_ID,
            vlientSecret: process.env.GOOGLE_CLIENT_SECRET,
         }),
     ],
     database: process.env.DATABASE_URL,
     classbacks: {
     	async session(session, token){
        	session.user.id = token.id;
            return session;
          },
       },
    });

•   `NextAuth`를 기본적으로 내보내는 함수로, `Nextauth` 함수에 대한 구성을 설정한다. 이 설정을 통해 인증 제공자, 데이터베이스 연결, 콜백 등을 정의할 수 있다.

Providers.Google({...}) : `next-auth/providers` 모듈에서 제공하는 Google OAuth 2.0 제공자를 설정한다. Google 인증을 사용하려면 Google API 콘솔에서 발급받은 `clientId`와 `clientSecret`이 필요하다.

 

`clientId : process.env.GOOGLE_CLIEN_ID` : Google API 콘솔에서 발급받은 클라이언트 ID를 지정한다.

 - 환경 변수에서 클라이언트 ID를 가져온다. 환경 변수는 코드베이스에 직접 하드코딩하지 않고, 민감한 정보를 보호하는 방법이다. `evn` 파일에 `GOOGLE_CLIENT_ID=your-client-id`로 설정되어 있을 수 있다.

 

`clientSecret: process.env.GOOGLE_CLIENT_SECRET` : Google API 콘솔에서 발급받은 클라이언트 시크릿을 지정한다. 

- 환경 변수에서 클라이언트 시크릿을 가져온다. 민감한 정보이기 때문에 환경 변수를 사용한다.

 

`database : process.env.DATABASE_URL` : 사용자의 세션 정보, 인증된 사용자 정보 등을 저장할 데이터베이스를 설정한다. URL을 통해 DB에 연결한다.

- `mysql://user:password@localhost:3306/dbname` 과 같은 형식일 수 있다.

- DB 설정은 필수는 아니고, 세션을 메모리에서 관리할 수도 있다.

 

`callbacks` : 콜백은 인증 과정 중 특정 이벤트가 발생할 때 실행된다.

 

`async session(session, token)` : session 콜백은 사용자가 로그인할 때 호출되며, 클라이언트에 전달되는 세션 데이터를 커스터마이징할 수 있다. 이 함수는 비동기로 동작하며, session과 token이라는 두가지 매개변수를 받는다.

- session : 사용자가 클라이언트에서 접근 할 수 있는 세션 데이터이다. 기본적으로 `user`객체와 `expires` 속성이 포함된다.

- token : JWT 토큰 또는 데이터베이스 세션 정보로, 인증 과정에서 생성된 정보가 담겨 있다. `token.id`로 사용자의 고유ID를 포함할 수 있다.

 

`session.user.id = token.id` : 세션 객체의 user 속성에 id라는 새로운 속성을 추가하고, 그 값으로 token.id를 할당한다. 이 ID는 사용자의 고유한 식별자로 사용될 수 있다. 예를 들어, 데이터베이스에서 사용자 정보를 조회할 때 이 ID를 사용한다.

 

`return session;` : 수정된 세션 객체를 반환한다. 이 객체는 클라이언트에 전달되어 사용자가 로그인 상태를 유지하는데 사용된다.