Next.js NextAuth로 Kakao Oauth 인증 사용하기

NextAuth

NextAuth.js

yarn add next-auth

next-auth api 코드 작성

import NextAuth from 'next-auth'
import KakaoProvider from 'next-auth/providers/kakao'

export default NextAuth({
  session: {
    strategy: 'jwt',
  },
  jwt: {
    secret: 'secret',
  },
  providers: [
    KakaoProvider({
      clientId: process.env.KAKAO_CLIENT_ID!,
      clientSecret: process.env.KAKAO_CLIENT_SECRET!,
    }),
  ],
  pages: {
    signIn: '/',
  },
})

세션을 공유하기 위해 상위 레벨에 Provider를 설정한다.

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <SessionProvider session={pageProps.session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

로그인 로그아웃 버튼 설정

const Home: NextPage = () => {
  const { data: session } = useSession()
  if (session) {
    return (
      <>
        Signed in as {session.user?.name} <br />
        <button onClick={() => signOut()}>Sign out</button>
      </>
    )
  }
  return (
    <>
      Not signed in <br />
      <button onClick={() => signIn('kakao')}>Sign in</button>
    </>
  )
}

Kakao Oauth 로그인 설정

• 카카오 디벨로퍼 사이트 접속
• Web 플랫폼 등록
• Redirect URI 등
  • https://example/api/auth/callback/kakao
• 활성화 설정
• 제품 설정 > 카카오 로그인 > 보안 > client secret 발급

KAKAO_CLIENT_ID=앱키-RESTAPI키
KAKAO_CLIENT_SECRET=보안-ClientSecret키

참조

next-auth.js.org/getting-started