🦁

NextAuth.jsでGoogleログインを実装してみる

2022/11/24に公開

追記

NextAuth.jsはNext.js以外の他のフレームワークでも使えるように、Auth.jsに変更されています。

はじめに

NextAuth.jsを導入する機会があったのでその際に調べたことを勉強がてらまとめてみました。

NextAuth.jsとは

Next.jsに認証機能を簡単に導入できるライブラリです。

やること

Googleログインを実装

Next.jsを作成

npx create-next-app@latest --typescript
npm run dev

NextAuth.jsをインストール

npm install next-auth

Googleで認証情報の設定

https://developers.google.com/identity/protocols/oauth2
リダイレクトURIを設定
http://localhost:3000/api/auth/callback/google

クライアントIDクライアントシークレット が必要になります。

実装

APIの追加

pages/api/auth/[...nextauth].ts
import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    })
  ]
})
.env
GOOGLE_CLIENT_ID=クライアントID
GOOGLE_CLIENT_SECRET=クライアントシークレット

フロントエンドの実装

pages/_app.tsx
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { SessionProvider } from "next-auth/react"

export default function App({ Component, pageProps: { session, ...pageProps }, }: AppProps) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}
pages/index.tsx
import { useSession, signIn, signOut } from "next-auth/react"

export default function Home() {
  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>
    </>
  )
}

簡単に実装できてしまいました!便利!

Discussion