Zenn
🦉

AppRouter+Auth.js v5系でGoogle認証するサンプル

2024/06/22に公開
Next.js
React
TypeScript
Google
Auth.js
tech

AppRouter + Auth.js v5系 でGoogle認証を実装したので、備忘録も兼ねてミニマムなサンプルを作って記事にしておく。

サンプルコード

googleの認証情報は以下の記事を参考に設定する。

v5で便利になったことや書き方が変わるとこ抜粋

Universal auth()

今まではgetServerSession, getSession, withAuth, getToken, useSession などを使い分けていたが、これらがauthメソッドにまとめられた。

Simplified setup

今まではproviderにCLIENT_IDやSECRET_IDを設定するための記述をする必要があったが、v5からはルールに則った環境変数名でそれらを設定しておけば勝手に読み込んでくれるようになった。

こんな感じで設定しておくと

AUTH_GOOGLE_ID=123
AUTH_GOOGLE_SECRET=123

こんな感じで書くだけで勝手に設定してくれる

import NextAuth from "next-auth"
import Google from "next-auth/providers/google"
 
export const { handlers, auth } = NextAuth({
-  providers: [
-    Google({
-      clientId: process.env.AUTH_GOOGLE_ID,
-      clientSecret: process.env.AUTH_GOOGLE_SECRET,
-    }),
-  ],
+  providers: [Google],
})

Environment Variables

  • 環境変数のprefixにNEXTは不要

    • NEXTAUTH_SECRETじゃなくてAUTH_SECRETで良い

  • AUTH_URLはほとんどの場合不要

  • AUTH_SECRETを設定していれば、オプションの設定で再度secretを設定する必要は無い

    • つまり、以下のようなことはしなくて良い
    import NextAuth from "next-auth";
import GoogleProvider from 'next-auth/providers/google';

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [GoogleProvider],
  secret: process.env.AUTH_SECRET,　// 👈不要
});

  • 諸々踏まえるとAUTH_SECRETがただ一つの絶対必要な環境変数になる

ハマったところ

src/app/api/auth/[...nextauth]/route.tsの書き方でハマった。
Auth.jsのv4系までだと

import NextAuth from "next-auth"

const handler = NextAuth({
  ...
})

export { handler as GET, handler as POST }

のような書き方だけど、v5系からは

import { handlers } from "@/auth"

const { handlers } = NextAuth({
  ...
})

export const { GET, POST } = handlers

こんな感じになる。
現在v5系はbeta扱いのため、公式ドキュメントはv4系で書かれている ＆
いくつかの参考にさせてもらった記事ではv5系を使ってv4系の書き方をしていた（v5の初期バージョンではそれも可能だったのかも…？）
ため、気づくのに時間がかかった。

v5系へのMigrate Guideにはこの旨が書かれている。

Auth.jsのサンプルリポジトリはnextはlatest、Auth.jsはbeta最新版で実装されているので、こちらの実装から気づくこともできる。

Discussion