1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Auth.js v5で環境変数はどう変わった?Google OAuthの設定まとめ

1
Posted at

はじめに

Next.jsでGoogleログインを実装する際、Auth.js(旧NextAuth.js)のv4とv5では、推奨される環境変数の名前や設定方法が変わっています。

特に、NEXTAUTH_SECRET と AUTH_SECRET の違いや、AUTH_URL が必要なのかは迷いやすいポイントです。

この記事では、Next.js 16 + Auth.js v5 + Neon PostgreSQL の構成を例に、環境変数の変更点と設定方法をまとめます。

開発環境

今回の環境は以下のとおりです。

技術 バージョン・サービス
Next.js 16.3.4
Auth.js(next-auth) 5.0.0-beta.32
Node.js バージョン未記録
パッケージマネージャー pnpm
データベース Neon PostgreSQL
認証プロバイダー Google OAuth

1. Auth.js v4からv5で何が変わった?

Auth.js v5では、環境変数の命名規則が AUTH_ プレフィックスに整理されました。

主な変更点は次のとおりです。

v4での設定 v5での推奨設定
NEXTAUTH_SECRET AUTH_SECRET
NEXTAUTH_URL AUTH_URL(通常は省略可能)
GOOGLE_CLIENT_ID などの独自名 AUTH_GOOGLE_ID
GOOGLE_CLIENT_SECRET などの独自名 AUTH_GOOGLE_SECRET
DATABASE_URL DATABASE_URL(変更なし)

※ v4でGoogleのクライアント情報に使う環境変数名は、実装によって異なります。

重要なのは、v5ではOAuthプロバイダーの認証情報を環境変数から自動検出できるようになったことです。

例えばGoogleの場合、AUTH_GOOGLE_ID と AUTH_GOOGLE_SECRET を設定すれば、Auth.jsが自動的に読み込みます。

なお、NEXTAUTH_SECRET や NEXTAUTH_URL は互換性のためのエイリアスも提供されています。すべての旧変数が即座に使用不能になったわけではありません。

2. Auth.js v5で必要な環境変数

今回のGoogleログインとNeonを利用する構成では、.env.local を次のように設定します。

# Google OAuth
AUTH_GOOGLE_ID="GoogleのClient ID"
AUTH_GOOGLE_SECRET="GoogleのClient Secret"

# Auth.js
AUTH_SECRET="生成したランダムな秘密鍵"

# Neon PostgreSQL
DATABASE_URL="Neonの接続文字列"

それぞれの役割は以下のとおりです。

環境変数 役割
AUTH_GOOGLE_ID Google OAuthのクライアントID
AUTH_GOOGLE_SECRET Google OAuthのクライアントシークレット
AUTH_SECRET Auth.jsのトークンなどの暗号化に使用する秘密鍵
DATABASE_URL Neon PostgreSQLへの接続情報

AUTH_SECRET はAuth.jsに必要な秘密鍵です。

一方、DATABASE_URL はAuth.js自体の必須変数ではありません。Neonを使うアプリケーション側で必要になるものです。

また、DATABASE_URL を設定しただけでは、Googleログインのユーザー情報がNeonに自動保存されるわけではありません。永続化にはデータベースアダプターなどの追加設定が必要です。

3. AUTH_SECRETの生成方法

AUTH_SECRET はランダムな文字列を設定します。

pnpmを使用している場合は、npx auth secret の代わりに次のコマンドを実行します。
pnpm dlx は、パッケージを一時的に取得してコマンドを実行する仕組みです。

pnpm dlx auth secret

通常は秘密鍵を生成し、Next.jsの .env.local に書き込みます。

pnpm dlx auth secretでエラーが出る場合

コマンドが正常に実行できない場合は、Node.jsの標準暗号化機能を使って秘密鍵を生成することもできます。

node -e "console.log(require('node:crypto').randomBytes(32).toString('base64url'))"

このコマンドでは32バイト(256ビット)の暗号学的に安全な乱数を生成します。

表示された値を .env.local に設定すれば完了です。

AUTH_SECRET="実際に生成した秘密鍵"

秘密鍵はGitHubにコミットせず、安全に管理します。

4. AUTH_URLは必要?

Auth.js v5では、通常のNext.js環境であれば AUTH_URL は省略できます。

v4では次のように NEXTAUTH_URL を設定する構成が一般的でした。

NEXTAUTH_URL="http://localhost:3000"

v5ではリクエストヘッダーからホストURLを自動的に判定できるため、明示的な設定が必要ないケースが増えています。

環境 AUTH_URL
localhostでの開発 通常不要
Vercel 通常不要
リバースプロキシ環境 構成による
特殊なホスト・認証パス 設定が必要な場合あり

必要な場合は次のように記述できます。

AUTH_URL="http://localhost:3000"

このURLには、通常 /api/auth/callback/google を含めません。

ただし、Google Cloud Consoleに登録するリダイレクトURIには、以下の完全なパスが必要です。

http://localhost:3000/api/auth/callback/google

5. AUTH_TRUST_HOSTとは?

Auth.js v5には AUTH_TRUST_HOST という環境変数もあります。

AUTH_TRUST_HOST=true

これは、プロキシ経由で受信する X-Forwarded-Host や X-Forwarded-Proto などのヘッダーを信頼して、ホストURLの判定に使用するための設定です。

通常のローカル開発やVercelでは、手動で設定する必要がないことがほとんどです。

プロキシ構成によって必要になる場合がありますが、信頼できるプロキシ環境でのみ利用するようにします。

6. Google OAuthの設定コード

Auth.js v5では、Google OAuthの設定もシンプルに書けます。

プロジェクト直下に auth.ts を作成します。

import NextAuth from "next-auth"
import Google from "next-auth/providers/google"

export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [Google],
})

次に、app/api/auth/[...nextauth]/route.ts を作成します。

import { handlers } from "@/auth"

export const { GET, POST } = handlers

これでAuth.jsの認証APIルートを用意できます。

v5では、環境変数の命名規則に従っていれば、以下のように clientId と clientSecret を明示する必要はありません。

Google({
  clientId: process.env.AUTH_GOOGLE_ID,
  clientSecret: process.env.AUTH_GOOGLE_SECRET,
})

ただし、独自の環境変数名を利用する場合などは、明示的に渡すこともできます。

7. .env.localをGitHubにコミットしない

.env.local には秘密情報が含まれるため、Gitの管理対象から除外します。

.gitignore の例は以下のとおりです。

.pnpm-store/
node_modules/
.next/
out/
*.tsbuildinfo

.env*
!.env.example

.DS_Store
*.log
next-env.d.ts

.env.example には、実際の値を入れずに必要な環境変数名だけを記述できます。

AUTH_GOOGLE_ID=
AUTH_GOOGLE_SECRET=
AUTH_SECRET=
DATABASE_URL=

これをリポジトリに含めておけば、別の開発環境でも必要な設定を把握できます。

なお、すでに秘密情報をGitにコミットしてしまった場合は、.gitignore に追加するだけでは過去の履歴から削除されません。漏えいの可能性がある秘密情報は再発行も検討する必要があります。

8. 動作確認

設定後、開発サーバーを起動します。

pnpm dev

ブラウザで以下にアクセスします。

http://localhost:3000/api/auth/signin

Googleログインを選択し、認証後にアプリに戻ってくれば、基本的なOAuthフローが動作しています。

エラーが発生した場合は、Google Cloud ConsoleのリダイレクトURI、環境変数、Auth.jsのサーバーログなどを確認します。

まとめ

Auth.js v5での大きな変更は、環境変数が AUTH_ プレフィックスに整理され、OAuthプロバイダーの認証情報を自動検出できるようになったことです。

今回の構成で押さえておくポイントは次の4つです。

  1. NEXTAUTH_SECRET より AUTH_SECRET を使用する。
  2. Google OAuthには AUTH_GOOGLE_ID と AUTH_GOOGLE_SECRET を設定する。
  3. AUTH_URL は通常省略できる。
  4. Neonの DATABASE_URL は別途設定し、ユーザー情報を保存する場合はアダプターも導入する。

v4から移行する際は、環境変数名だけではなく、auth.ts の構成や認証APIの実装方法も確認しておくとよさそうです。

参考資料

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?