Next.js+NextAuthでGoogleのソーシャルログインを実現する

以前同じ内容で記事を書きましたがバージョンが進み仕組みも異なり再度試します。

NextAuthは5.0.0-beta.25を使います。

書いてることが公式のドキュメントでも微妙に異なるのでサンプルをもとに進めます。
https://github.com/nextauthjs/next-auth-example/blob/main/README.md
gitをクローンして手順に沿って進める。

Googleの認証はクラウドコンソールの認証情報からIDとSECRETを取得する。

.env.local

AUTH_SECRET="XXXXXX"
AUTH_GOOGLE_ID=XXXXXXXXX
AUTH_GOOGLE_SECRET=XXXXXXXXXX

設定ファイルには大量にコードがあるけど必要なのは4行なのでこれを入れる。

auth.ts

import NextAuth from "next-auth"
import Google from "next-auth/providers/google"
 
export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [Google],
})

以下の階層のフォルダとファイルを作る

/app/api/auth/[...nextauth]/route.ts

import { handlers } from "@/auth"
export const { GET, POST } = handlers

準備はできたので動かして想定通りログインできました。

Cookieでセッション維持しているので、次はDBで管理するようにログインの処理を作りたいと思います。