Next.js로 소셜 로그인 구현하기

18 Oct 2023

nextjs

소개

소셜 로그인은 많은 웹 애플리케이션에서 사용되는 중요한 기능 중 하나입니다. 이 기능을 구현하기 위해 Next.js를 사용하는 방법에 대해 알아보겠습니다.

선행 작업

Next.js로 소셜 로그인을 구현하기 전에 몇 가지 선행 작업을 해야합니다.

소셜 로그인 공급자 (예: Google, Facebook)의 개발자 계정을 만들어야 합니다.
소셜 로그인을 제공하는 공급자로부터 클라이언트 ID와 클라이언트 시크릿을 받아야 합니다.

패키지 설치

먼저, Next.js 프로젝트를 생성한 후에 next-auth 패키지를 설치해야 합니다. 다음 명령어를 터미널에서 실행하세요:

npm install next-auth

소셜 로그인 구성

프로젝트의 루트 디렉토리에 pages/api/auth/[...nextauth].js 파일을 생성하세요. 해당 파일에 아래의 코드를 작성해주세요:

import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'

export default NextAuth({
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET
    }),
    // 다른 소셜 로그인 공급자도 설정할 수 있습니다.
  ]
})

위 코드에서 GOOGLE_CLIENT_ID와 GOOGLE_CLIENT_SECRET는 사전에 받은 정보로 대체해야 합니다. 이렇게 작성된 구성 파일은 NextAuth를 설정하고, 소셜 로그인을 위한 공급자를 추가하는 역할을 합니다.

로그인 버튼 추가

이제 Next.js 애플리케이션의 원하는 페이지에 소셜 로그인 버튼을 추가할 수 있습니다. 예를 들어, 로그인 페이지에 소셜 로그인 버튼을 추가하려면 아래와 같이 코드를 작성하세요:

import { signIn, providers } from 'next-auth/client'

export default function LoginPage() {
  const handleSignIn = (provider) => {
    signIn(provider)
  }

  return (
    <div>
      {Object.values(providers).map(provider => (
        <button key={provider.id} onClick={() => handleSignIn(provider.id)}>
          {provider.name}
        </button>
      ))}
    </div>
  )
}

위 코드에서 signIn 함수는 선택한 소셜 로그인 공급자의 로그인 페이지로 리다이렉트합니다. 따라서 사용자가 버튼을 클릭하면 해당 로그인 페이지로 이동하게 됩니다.

사용자 정보 가져오기

소셜 로그인에 성공한 후에 사용자의 정보를 가져오려면, 로그인 후 리다이렉트되는 페이지에서 아래와 같은 코드를 추가하세요:

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

export default function ProfilePage() {
  const [session, loading] = useSession()

  if (loading) {
    return <div>Loading...</div>
  }

  if (!session) {
    return <button onClick={() => signIn()}>Sign in</button>
  }

  return (
    <div>
      <h1>Welcome, {session.user.name}</h1>
      <button onClick={() => signOut()}>Sign out</button>
    </div>
  )
}

위 코드에서 useSession 훅을 사용하여 현재 로그인된 사용자의 세션 정보를 가져옵니다. 세션 정보에는 사용자의 이름, 이메일 등의 정보가 포함됩니다.

결론

이제 Next.js를 사용하여 소셜 로그인을 구현하는 방법에 대해 알아보았습니다. next-auth 패키지를 사용하면 쉽게 소셜 로그인을 구현할 수 있습니다. 보안을 위해 클라이언트 ID와 클라이언트 시크릿을 환경 변수로 저장하는 것을 권장합니다. Next.js 공식 문서와 next-auth 패키지 문서를 참고하여 자세한 내용을 확인할 수 있습니다.

소개

선행 작업

패키지 설치

소셜 로그인 구성

로그인 버튼 추가

사용자 정보 가져오기

결론

참고 자료