NextAuth.js

출처 URL: https://next-auth.js.org/

NextAuth.js

오픈 소스. 풀스택. 데이터는 직접 소유하세요.

쉬움

• 인기 서비스 기본 지원 (Google, Facebook, Auth0, Apple…)
• 이메일 / 패스워드리스 / 매직 링크 기본 지원
• 어떤 사용자 이름 / 비밀번호 저장소와도 사용 가능
• OAuth 1.0 및 2.0 서비스와 함께 사용 가능

유연함

• 서버리스(Serverless) 환경을 고려해 설계되어 어디서나 실행 가능
• 데이터베이스는 직접 선택 - 없어도 됨! (MySQL, Postgres, MSSQL, MongoDB…)
• 데이터베이스 세션 또는 JWT 선택 가능
• 웹 페이지와 API 라우트 보호

보안성

• 서명되고 접두사가 붙은 서버 전용 쿠키
• HTTP POST + CSRF 토큰(Token) 검증
• JWS / JWE / JWK를 사용하는 JWT
• 탭 동기화, 자동 재검증, keep-alive 지원
• 클라이언트 사이드 JavaScript에 의존하지 않음

npm install next-auth

몇 분 만에 인증 추가!

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

    import NextAuth from 'next-auth'
    import AppleProvider from 'next-auth/providers/apple'
    import FacebookProvider from 'next-auth/providers/facebook'
    import GoogleProvider from 'next-auth/providers/google'
    import EmailProvider from 'next-auth/providers/email'

    export default NextAuth({
      providers: [
        // OAuth 인증 제공자...
        AppleProvider({
          clientId: process.env.APPLE_ID,
          clientSecret: process.env.APPLE_SECRET
        }),
        FacebookProvider({
          clientId: process.env.FACEBOOK_ID,
          clientSecret: process.env.FACEBOOK_SECRET
        }),
        GoogleProvider({
          clientId: process.env.GOOGLE_ID,
          clientSecret: process.env.GOOGLE_SECRET
        }),
        // 비밀번호 없는 / 이메일 로그인
        EmailProvider({
          server: process.env.MAIL_SERVER,
          from: 'NextAuth.js <no-reply@example.com>'
        }),
      ]
    })

클라이언트 (App) /pages/_app.jsx

    import { SessionProvider } from "next-auth/react"

    export default function App({
      Component, pageProps: { session, ...pageProps }
    }) {
      return (
      )
    }

클라이언트 (Page) /pages/index.js

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

    export default function Component() {
      const { data: session } = useSession()
      if(session) {
        return <>
          로그인됨: {session.user.email} <br/>
          <button onClick={() => signOut()}>로그아웃</button>
        </>
      }
      return <>
        로그인되지 않음 <br/>
        <button onClick={() => signIn()}>로그인</button>
      </>
    }

예제 코드

NextAuth.js는 오픈 소스 커뮤니티 프로젝트입니다.