🦁

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

2022/11/24に公開

Next.js

追記

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で認証情報の設定

リダイレクト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>
    </>
  )
}

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