NextAuth バージョン5 アップグレードガイド

今回、NextAuthのバージョンを4から5にバージョンアップしてみたので、簡単なアップグレード手順を共有しようと思います！

手順は以下公式ガイドを参考に行いました！結構簡単に移行できた印象です！

NextAuthv5移行公式ガイド

NextAuth 5 の変更点ざっと

ざっと影響がありそうなところを記載してます！

@auth/core による OAuth/OIDC の厳密な仕様準拠

OAuth の動作がより厳密になり、一部の OAuth プロバイダーが動作しない可能性があります。
バージョンアップ後、要動作確認です！

OAuth 1.0 の廃止

旧式の OAuth 1.0 は非推奨となり、今後のサポートがなくなります。

設定の簡素化

.env ファイルの変数を自動で推測します。auth.tsに環境変数を設定値として設定する必要がなくなります。
これまでの getServerSession, getSession, withAuth, getToken, useSession が統一されたことにより、コードがよりシンプルになります。

Next.js の最低要件が 14.0 に

現在、Next.js 14以上を使用している方には影響ありません。

アップグレード手順

1. 最新バージョンをインストール

yarn add next-auth@beta

2. `auth.ts` の修正

NextAuthOptionsの変数定義が変更になりました。中身はprovidersの設定以外は変更なしでした！

修正前

export const authOptions: NextAuthOptions = {}

修正後

export const { auth, handlers, signIn, signOut } = NextAuth({})

providersの設定について、NextAuth v4 までは XXProvider 形式で指定していましたが、v5 からは Provider という文字が不要になり、環境変数を .env に記載するだけで直接の設定が不要になります。

修正前

providers: [
  CredentialsProvider({
    name: 'credentials',
    credentials: {
      username: { label: 'Username', type: 'text' },
      password: { label: 'Password', type: 'password' },
    },
    async authorize(credentials) {
      <任意の処理>
    },
  }),
  GoogleProvider({
    clientId: process.env.GOOGLE_CLIENT_ID ?? '',
    clientSecret: process.env.GOOGLE_CLIENT_SECRET ?? '',
  }),
]

修正後

providers: [
  Credentials({
    credentials: {
      username: { label: 'Username', type: 'text' },
      password: { label: 'Password', type: 'password' },
    },
    async authorize(credentials) {
      <任意の処理>
    },
  }),
  Google,
]

よりシンプルな形になりました。

3. `app/api/auth/[...nextauth]/route.ts` の修正

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

4. サーバーサイドのセッション取得の修正

修正前

const session = await getServerSession(authOptions);

修正後

const session = await auth();

5. クライアントサイドのセッション取得

クライアントサイドでの呼び出しは特に変更なし。

その他の注意点

セッション情報の保存にDBを使用している場合 や OAuthプロバイダーを利用している場合 は、公式ガイドを確認しましょう。
公式ドキュメントの最新情報を随時チェックすることをおすすめします。

これで NextAuth v5 へのアップグレードが完了です！ 🚀