[Backend][Nextjs] next-auth

# NextAuth.js를 활용한 초간단 소셜 로그인 구현 방법 소개

 

 

- Next Auth는 NextJS를 위한 오픈소스 authentication 솔루션이라고 문서에서는 소개하고 있습니다. NextJS를 사용해서 개발할 계획을 가지고 있으신 분들은 한 번 쯤 고려해보길 추천드립니다. 고도화된 서비스에서의 Authentication을 제공하기 위해서는 추가적인 학습 및 개발이 필요할 수 있겠지만, MVP나 사이드 프로젝트 등과 같이 최소한의 로그인과 이를 데이터 베이스에 연동하는 정도의 기능으로 충분하다면, 정말 빠른 시간안에 개발이 가능합니다. 본 포스팅에서는 설치 및 간단한 소셜 로그인 구현 과정을 포스팅하려고 합니다

※ NextJS를 전제로 구현된 솔루션이기 때문에 NextJS에 대한 사전 지식이 있어야 이해할 수 있는 내용이 있을 수 있습니다. 또한 NextAuth 카카오 로그인 구현을 위해서는KAKAO_CLIENT_ID와 KAKAO_CLIENT_SECRET가 필요합니다. Kakao 로그인 설정은 본 포스팅에서는 다루지 않습니다

---

# 공식 문서

NextAuth.js

# 구현 방법

1. NextAuth 설치

npm install --save next-auth

---

2. Provider 구현

- [...nextauth].js 파일을 pages/api/auth 경로에 추가합니다. 그리고 아래와 같이 Auth에 대한 Kakao provider를 정의합니다.

 

import NextAuth from "next-auth"
import KakaoProvider from "next-auth/providers/kakao";

export default NextAuth({
	// Configure one or more authentication providers
    providers: [
      KakaoProvider({
        clientId: process.env.KAKAO_CLIENT_ID,
        clientSecret: process.env.KAKAO_CLIENT_SECRET
      })
]})

---

3. NextJS에 Session Provider를 추가

- pages/_app.js에 아래와 같이 SessionProvider감싸줍니다

 

// pages/_app.js
import { SessionProvider } from "next-auth/react"

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

---

4. 로그인 구현

- E-Mail 로그인과 Kakao 로그인을 아래와 같이 'signIn' 을 사용해서 추가합니다

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>
      <button onClick={() => signIn("kakao")}>Sign in with Kakao</button>
    </>
  )
}

---

5. Redirect 구현

- 소셜 로그인 구현을 완료하기 위해서는 Redirect URL을 카카오 개발자 페이지에 추가해 주어야 합니다. NextAuth의 기본적인 redirect url 양식은 다음과 같습니다

[origin]/api/auth/callback/[provider]

- 카카오 로그인의 경우는 redirect url은 아래와 같이 추가하면 됩니다

http://localhost:3000/api/auth/callback/kakao

 

# 마치며

※ 본 포스팅에서는 NextAuth에 대한 소개가 목적으로 작성되어 Callback URL 변경이나, Session에서 Auth 정보를 가져오거나, DB Plug인을 사용하여 User DB에 사용자 ID를 추가하는 등의 기능은 생략하였습니다. OAuth에 대한 상세한 내용은 아래의 문서에 잘 정리되어 있으니 참조하시기 바랍니다

OAuth | NextAuth.js