Next Auth로 소셜 로그인 구현
Post

Next Auth로 소셜 로그인 구현

13/06/2022 14/06/2022
Da-Bin Jeong
1

배운 것

Next Auth

좋은 점

  • Nextjs 간편하게 소셜 로그인을 구현할 수 있음.
  • Server, Client 모두 Nextjs 하나로 구현할 수 있음.

궁금증

  • provider의 인증 토큰을 따로 받을 수 있는 지 모르겠음.
  • Java서버 백단에서 토큰 유효성 인증을 해줄 수 있는 방법이 있을까?

설치 (v4 기준)

1

$yarn add next-auth

사용 방법

  • pages/api/[...nextauth].ts 파일을 생성
import NextAuth from "next-auth"
import GithubProvider from "next-auth/providers/github"
export default NextAuth({
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
  ],
})
  • 원하는 공급자(provider)를 위 providers 배열에 추가해 주면 됨.
  • 공급자 목록은 -> https://next-auth.js.org/providers/
  • 예를 들어 Apple로그인을 추가하고 싶다면 아래와 같이 추가
import NextAuth from "next-auth"
import GithubProvider from "next-auth/providers/github"
import AppleProvider from "next-auth/providers/apple";

export default NextAuth({
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    AppleProvider({
    clientId: process.env.APPLE_ID,
    clientSecret: process.env.APPLE_SECRET
    }),
  ],
})
  • 그 다음 _app.tsx 컴포넌트 SessionProvider로 감싸기
import { SessionProvider } from "next-auth/react"
export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}
  • Hook을 사용해서 로그인, 로그아웃, 세션 확인 가능
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>
    </>
  )
}

Reference

TIL, Nextjs