[next.js]nextauth에 대해서 더 구체적으로 공부해 보자

진도장 2024. 11. 20. 18:55

2024. 11. 20. 18:55

NextAuth.js

nextauth.js는 next.js애플리케이션에서 인증을 쉽게 구현할 수 있도록 해주는 오픈소스 라이브러리이다. OAuth, 이메일, 자격증명(credentials)등을 통해 사용자를 인증할 수 있으며, 인증세션을 관리하는 기능을 제공한다. Next.js의 API Routes와 긴밀하게 통합되어 서버리스 환경에서도 원활하게 작동한다.

NextAuth.js의 주요 구성 요소

Providers (인증 제공자)
NextAuth.js는 다양한 인증 제공자(OAuth 제공자)를 지원한다.
- 예: Google, GitHub, Facebook, Twitter 등
- 또한, 자체 자격 증명(Credentials Provider)을 설정하여 커스텀 로그인 방식을 구현할 수도 있다.
Session (세션 관리)
사용자가 로그인하면 세션이 생성된다. 이 세션은 쿠키를 통해 클라이언트와 서버 간에 유지되며, 사용자의 로그인 상태를 확인하는 데 사용된다.
Callbacks (콜백)
로그인, 세션, JWT 등과 관련된 다양한 작업을 커스터마이징할 수 있도록 콜백 함수를 제공한다.
Adapters
사용자의 데이터를 데이터베이스에 저장하거나 읽어오는 작업을 처리한다. 예를 들어, MongoDB, PostgreSQL, MySQL 등을 지원한다.

NextAuth.js를 이용한 로그인 인증 방식

NextAuth 설정 파일 생성 ([...nextauth].ts)
pages/api/auth/[...nextauth].ts 또는 app/api/auth/[...nextauth]/route.ts 파일에서 인증 설정을 정의합니다.
주요 설정은 다음과 같습니다.

import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  callbacks: {
    async jwt({ token, account }) {
      if (account) {
        token.accessToken = account.access_token;
      }
      return token;
    },
    async session({ session, token }) {
      session.accessToken = token.accessToken;
      return session;
    },
  },
});

인증 과정 (OAuth 예제)

1단계: 인증 제공자와 연결
사용자가 로그인 버튼을 클릭하면 NextAuth는 설정된 OAuth 제공자(예: Google)의 로그인 페이지로 리다이렉트합니다.
2단계: 인증 제공자의 인증 확인
사용자가 이메일/비밀번호를 입력하거나, Google 계정을 승인하면 인증 제공자가 사용자 정보를 NextAuth.js로 반환합니다.
3단계: JWT 토큰 생성
NextAuth.js는 사용자 정보를 기반으로 JWT(Json Web Token)를 생성하여 사용자의 세션을 관리합니다.
4단계: 세션 관리
생성된 JWT는 쿠키에 저장되어 클라이언트와 서버 간의 통신에서 인증 상태를 유지합니다.

Custom Provider를 통한 자격 증명 인증
자격 증명 기반 인증을 구현하려면 CredentialsProvider를 설정합니다.

import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';

export default NextAuth({
  providers: [
    CredentialsProvider({
      name: 'Credentials',
      credentials: {
        email: { label: "Email", type: "text" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials) {
        const user = await authenticateUser(credentials.email, credentials.password);
        if (user) {
          return user; // 사용자 정보 반환
        }
        return null; // 인증 실패
      },
    }),
  ],
});

인증 방식의 특징 및 동작

상태 기반 인증 (Session-based Authentication)
세션 정보는 쿠키에 저장되며, 요청마다 클라이언트가 쿠키를 서버로 전달합니다.
- 장점: 사용자의 인증 상태를 쉽게 유지할 수 있음.
- 단점: 쿠키에 대한 보안 관리 필요.
JWT 기반 인증 (Token-based Authentication)
JWT를 사용하여 클라이언트와 서버 간의 인증 상태를 유지합니다.
- 장점: 상태 비저장(Stateless) 방식으로 확장성이 높음.
- 단점: 토큰 탈취 방지를 위한 보안 조치 필요.
콜백을 통한 데이터 처리
인증 후 사용자 데이터를 가공하거나, 데이터베이스와 연동하는 등의 작업을 콜백에서 처리할 수 있습니다.
예: 사용자 역할(Role) 추가, 접근 제어.

클라이언트에서 로그인/로그아웃 처리

로그인 버튼
next-auth/react의 signIn 함수 사용

import { signIn } from 'next-auth/react';

const LoginButton = () => (
  <button onClick={() => signIn('google')}>Login with Google</button>
);

로그아웃 버튼
signOut 함수 사용

import { signOut } from 'next-auth/react';

const LogoutButton = () => (
  <button onClick={() => signOut()}>Logout</button>
);

사용자 세션 확인
useSession 훅 사용

import { useSession } from 'next-auth/react';

const Profile = () => {
  const { data: session } = useSession();

  if (session) {
    return <p>Welcome, {session.user?.name}</p>;
  }

  return <p>Please log in.</p>;
};

NextAuth.js는 빠르게 인증 시스템을 구축하고자 할 때 매우 유용한 도구이며, 확장성과 커스터마이징 가능성도 뛰어납니다. 🛠️

DJ pupm this party