배운 것

Next Auth

좋은 점

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

궁금증

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

설치 (v4 기준)

copy$yarn add next-auth

사용 방법

• pages/api/[...nextauth].ts 파일을 생성

copyimport 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로그인을 추가하고 싶다면 아래와 같이 추가

copyimport 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로 감싸기

copyimport { SessionProvider } from "next-auth/react"
export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

• Hook을 사용해서 로그인, 로그아웃, 세션 확인 가능

copyimport { 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

• https://next-auth.js.org/getting-started/example