next auth

Next-auth 개념 & 기능

Next Auth: Next.js 기반의 앱에서 사용자 인증 작업을 쉽게 처리할 수 있는 라이브러리

사용자 로그인, 회원가입 및 다양한 인증 제공자(예: Google, Facebook, GitHub)와의 통합을 간편하게 구현할 수 있음

제공 기능

• 인증: 사용자 로그인 및 회원가입을 지원하며, 다양한 인증 제공자로 사용자를 인증
• 세션 관리: 사용자 세션을 쉽게 관리하고, 로그인 상태를 유지할 수 있음
• 인증 제공자 통합: 다양한 인증 제공자와의 통합을 지원하여 사용자가 원하는 방식으로 로그인
• JWT 토큰: JSON Web Token(JWT)을 사용하여 사용자 인증 정보를 안전하게 저장하고 전달
• 세션 저장소: 사용자 세션 데이터를 저장하기 위한 다양한 백엔드 데이터베이스를 지원

장점

• 빠른 구현
• 다양한 인증 제공자
• 보안
• 세션관리 용이성
• nextjs와의 통합 - ssr과의 호환성을 제공함

Next-auth 장점

1. 간단한 설정: 직접 구현하는 것에 비해 인증 설정이 매우 간단합니다.
2. 다양한 인증 공급자: Google, Facebook, Apple, Naver, Kakao 등 수십 개의 인증 공급자와 통합이 가능합니다.
3. 안전한 보안: 보안 관련 작업(세션 관리, JWT 생성, CSRF 방어 등)을 자동으로 처리하여 보안이 강화됩니다.
4. 확장성: 사용자의 데이터베이스와의 통합을 지원하여 확장성이 뛰어납니다.
5. Next.js와의 통합: Next.js와 통합하여 SSR(Server Side Rendering) 및 CSR(Client Side Rendering)에서 원활하게 작동합니다.

예시 코드

서버 사이드 (/pages/api/auth/[…nextauth].js) 이 코드는 NextAuth의 API를 설정하는 부분으로, OAuth 제공자와 이메일 로그인 방식을 설정

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

export default NextAuth({
  providers: [
    // OAuth 인증 제공자
    GoogleProvider({
      clientId: process.env.GOOGLE_ID, // 환경변수에서 Google 클라이언트 ID 가져오기
      clientSecret: process.env.GOOGLE_SECRET // 환경변수에서 Google 비밀 키 가져오기
    }),
    // 이메일 로그인 제공자
    EmailProvider({
      server: process.env.MAIL_SERVER, // 이메일 서버 설정
      from: 'NextAuth.js <no-reply@example.com>'
    })
  ]
})

클라이언트 사이드 (/pages/index.js) 이 코드는 클라이언트에서 NextAuth의 세션을 확인하고, 로그인/로그아웃 버튼을 표시하는 예시, 세션관리

import { useSession, signIn, signOut } from 'next-auth/react'

export default function Component() {
  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()}>Sign in</button>
    </>
  )
}

useSession: 현재 로그인 상태를 확인합니다. session 객체가 있으면 로그인한 상태로 표시됩니다. signIn: 로그인 버튼 클릭 시, signIn() 함수로 로그인 절차를 시작합니다. signOut: 로그아웃 버튼 클릭 시, signOut() 함수로 로그아웃 절차를 시작합니다.

Next-auth 사용자 인증 방식 (+ callback)

NextAuth.js는 주로 세션과 JWT를 함께 사용하여 인증 작업을 진행

개발자는 프로젝트의 요구 사항에 맞게 적절한 방식을 선택할 수 있습니다. Callback 사용:

NextAuth.js는 다양한 콜백 함수를 사용하여 사용자 인증 및 세션 관리를 조정할 수 있습니다.

/pages/api/auth/[…nextauth].js

callbacks: {
  // 사용자 로그인 시 호출되는 콜백
  async signIn({ user, account, profile, email, credentials }) {
    return true; // 로그인 성공 시 true 반환
  },
  // 리디렉션 URL 설정 콜백
  async redirect({ url, baseUrl }) {
    return baseUrl; // 리디렉션할 기본 URL 반환
  },
  // 세션 관리 콜백
  async session({ session, user, token }) {
    return session; // 세션 반환
  },
  // JWT 생성 콜백
  async jwt({ token, user, account, profile, isNewUser }) {
    return token; // 생성된 JWT 반환
  }
}

• signIn/signOut: 사용자가 로그인할 때 호출됩니다. 로그인 성공 여부를 결정하는 true 또는 false를 반환할 수 있습니다.
• redirect: 로그인 후 리디렉션할 URL을 설정합니다.
• session: 세션 객체를 반환하여 사용자의 세션 정보를 관리할 수 있습니다.
• jwt: JWT를 생성하는 콜백으로, 사용자의 정보를 포함하는 token을 반환합니다.

JWT와 Session 방식이란?

1. JWT (JSON Web Tokens):
   • JWT는 사용자 인증 및 권한 부여에 사용되는 두 가지 주요 방식 중 하나입니다.
   • JWT는 Json Web Token의 약자로, Json 형식을 이용해 인증에 필요한 정보를 암호화한 웹 토큰입니다. JWT 토큰 예시:

     eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKF2QfT4fwPEw2fx1M36p5rJ89Aaq34
     

     이 토큰은 인증과 정보 교환을 위한 안전한 방법으로, 서버에서 클라이언트에게 전달된 후 클라이언트가 서버에 다시 요청할 때마다 사용됩니다.

2. 세션 (Session):
   • 세션은 웹 애플리케이션에서 사용자의 상태 정보를 저장하고 관리하는 방식입니다.
   • 세션은 사용자가 웹 서비스와 상호작용할 때 생성되며, 사용자의 상태 정보를 서버 측에 저장하여 관리합니다. 세션 예시: 세션 데이터는 서버에 저장되며, 사용자 식별을 위한 고유 ID를 사용하여 서버에서 상태를 추적합니다.

Session vs JWT

About 유재석

개발자 유재석 입니다. Web Developer.

Email : jaeseok9405@gmail.com

Website : https://github.com/yoo94