[Next.js] next-auth란? / 사용법

next-auth란?

next.js에서, 소셜 로그인 기능을 쉽게 추가해주는 Node.js 라이브러리

NextAuth.js

 

next-auth 사용법

// Next.js 프로젝트의 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 추가해주기 - clientId, clientSecret 입력.
    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
    }),
    // Passwordless / email sign in
    EmailProvider({
      server: process.env.MAIL_SERVER,
      from: 'NextAuth.js <no-reply@example.com>'
    }),
  ]
})

 

// Next.js 프로젝트의 pages/_app.js

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

export default function App({
  Component, pageProps: { session, ...pageProps }
}) {
  // OAuth 인증후에 인증정보를 session에 적용하기 위해, Provider로 감싸주기
  return (
    <SessionProvider session={session}>
      <Component {...pageProps}/>
    </SessionProvider>
  )
}

 

// Next.js 프로젝트의 pages/내 로그인 화면.js

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

export default function Component() {
  // session에서 OAuth 사용자 정보 확인하기
  const { data: session } = useSession()
  
  // 사용자 정보 있으면, 이메일과 로그아웃 버튼 출력
  if(session) {
    return <>
      Signed in as {session.user.email} <br/>
      <button onClick={() => signOut()}>Sign out</button>
    </>
  }
  
  // 사용자 정보 없으면, 로그인 버튼 출력 - signIn() 함수는 next-auth기본 로그인화면으로 이동시켜준다.
  return <>
    Not signed in <br/>
    <button onClick={() => signIn()}>Sign in</button>
  </>
}

 

signIn() 버튼 클릭시 기본로그인 화면 출력

 

나만의 로그인 화면 만들기 ( 커스텀 )

// Next.js 프로젝트의 pages/auth/login.js

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

export default function Login() {
 // signIn 함수에 내가 사용하는 oauth의 이름을 입력해준다.
  return (
    <div>
      <button onClick={() => signIn("google")}>Login</button>
    </div>
  );
}

 

 

 

signIn() 함수 기본 다이렉트 경로 변경하기

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

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    KakaoProvider({
      clientId: process.env.KAKAO_API_KEY,
      clientSecret: process.env.KAKAO_SECRET,
    }),
    NaverProvider({
      clientId: process.env.NAVER_CLEINT_ID,
      clientSecret: process.env.NAVER_CLEINT_SECRET,
    }),
  ],
  //pages에, 로그인 화면의 경로를 지정해준다.
  pages: {
    signIn: "/auth/login",
  },
});


// pages 내부 버튼 사용방법
import { signIn } from 


export default function Example(){
  return <div>
    <button onClick={() => signIn()}>
      Login
    </button>
  </div>
}