Contents
1. Auth0 アカウント作成とアプリケーション登録
このセクションでは、Auth0 テナントの取得から必要な認証情報（Domain・Client ID・Client Secret）を手に入れるまでの流れを解説します。テナントが無いと認証フロー自体が構築できないため、最初に必ず行う作業です。
1‑1. Domain・Client ID・Client Secret の取得手順
Auth0 ダッシュボードでアプリケーションを作成し、必要なキーを確認します。
ポイント: 取得した Client Secret はサーバー側だけで保持し、決してクライアントに送らないようにしてください。
- Applications → Applications を開き、Create Application をクリック。
- アプリケーション名を入力し、Regular Web Application（Next.js がサーバーサイドでも動作するため）を選択。
-
作成完了後の設定画面に以下が表示されます。
-
Domain（例:my-tenant.auth0.com） Client ID（公開可能な文字列）Client Secret（サーバー側でのみ使用）
1‑2. Allowed Callback/Logout URLs の設定ポイント
Auth0 はリダイレクト先をホワイトリスト方式で管理します。ローカル開発と本番デプロイそれぞれに正しい URL を登録してください。
| 種類 | 推奨値（例） |
|---|---|
| Allowed Callback URLs | http://localhost:3000/api/auth/callback https://my-app.vercel.app/api/auth/callback |
| Allowed Logout URLs | http://localhost:3000/ https://my-app.vercel.app/ |
注意: 設定ミスがあると「Redirect URI mismatch」エラーが発生します。環境ごとに必ず確認しましょう。
2. Next.js プロジェクトの初期構築と SDK インストール
ここでは、Next.js アプリを作成し、Auth0 用 SDK を導入するまでの手順を示します。Node.js 18+ と npm 9（または Yarn 4） が推奨環境です。
2‑1. Node.js バージョン・パッケージマネージャの推奨
- Node.js:
>= v18.20.0（Next.js 13+ の最低要件）。 - npm:
9.x 系、Yarn:4.x 系が依存関係解決で安定しています。
|
1 2 3 4 5 6 7 |
# Node バージョン確認 node -v # → v18.20.0 以上推奨 # Next.js プロジェクト作成（TypeScript 推奨） npx create-next-app@latest my-auth0-app --ts cd my-auth0-app |
2‑2. @auth0/nextjs-auth0 のインストールとバージョン確認
公式クイックスタートに沿って SDK を導入します。バージョンは v2.5.0 が執筆時点の最新版です。
|
1 2 3 4 5 6 |
# SDK インストール（npm） npm i @auth0/nextjs-auth0@^2.5.0 # 正しくインストールされたか確認 npm list @auth0/nextjs-auth0 |
package.json に記載されたバージョンを CI でロックしておくと、ビルドの再現性が保てます。
3. 環境変数とセキュリティベストプラクティス
認証情報は環境変数に保存し、Git 管理から除外することが最重要です。ここでは .env.local の設定方法と .gitignore への追記を初期段階で行うポイントを解説します。
3‑1. Git 管理から除外する設定
プロジェクト作成直後に .gitignore に以下を追加してください。これにより、ローカル環境の機密情報がリポジトリにコミットされることを防げます。
|
1 2 3 |
# .env ファイルは絶対に公開しない .env.local |
Tip:
.gitignoreの記載はREADME.mdの「初期設定」セクションで最初に案内すると見落としが減ります。
3‑2. .env.local の必須項目
.env.local はプロジェクトルートに作成し、サーバー側だけで使用する変数を記述します。以下は最低限必要なキーです。
|
1 2 3 4 5 6 7 8 |
# 認証フロー全体で共有される秘密鍵（32 バイト以上のランダム文字列） AUTH0_SECRET=base64-encoded-random-string # Auth0 テナント情報（サーバー側でのみ使用） NEXT_AUTH0_DOMAIN=your-tenant.auth0.com NEXT_AUTH0_CLIENT_ID=YOUR_CLIENT_ID NEXT_AUTH0_CLIENT_SECRET=YOUR_CLIENT_SECRET # ← サーバー専用、公開しない |
AUTH0_SECRETはopenssl rand -base64 32等で生成してください。NEXT_PUBLIC_プレフィックスは クライアント側に埋め込む必要がある変数だけに付与します（例: 公開 API キー）。認証情報の Secret 系統 は絶対に付けないでください。
3‑3. NEXT_PUBLIC_ プレフィックスの正しい使い分け
| 用途 | 推奨変数名 | 説明 |
|---|---|---|
| クライアント側でも参照が必要な公開情報 | NEXT_PUBLIC_SOME_KEY |
ビルド時にクライアントへ埋め込まれる。機密情報は不可。 |
| サーバー専用の機密情報 | AUTH0_SECRET, NEXT_AUTH0_CLIENT_SECRET |
クライアントに露出しないよう NEXT_PUBLIC_ を付けない。 |
誤解防止: 「クライアント側でも必要なケースがある」旨は、公開して問題の無い情報に限られます。Secret 系統は常にサーバーのみで保持してください。
4. Router 別の Auth0Provider 設定例
Next.js の Pages Router と App Router は設定方法が若干異なります。両方の実装パターンを示すことで、どちらでもスムーズに移行できるようにします。
4‑1. Pages Router（pages/）での設定
a. ミドルウェア (middleware.ts) の配置
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// middleware.ts import { NextResponse } from 'next/server'; import { withAuth } from '@auth0/nextjs-auth0/edge'; export default withAuth( async (req) => { // 必要に応じてパスごとに条件分岐可能 return NextResponse.next(); }, { returnTo: '/' } // 未認証時のリダイレクト先 ); |
b. アプリ全体をラップする UserProvider（pages/_app.tsx）
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// pages/_app.tsx import type { AppProps } from 'next/app'; import { UserProvider } from '@auth0/nextjs-auth0'; export default function MyApp({ Component, pageProps }: AppProps) { return ( <UserProvider> <Component {...pageProps} /> </UserProvider> ); } |
c. API Route にまとめた認証ハンドラ（pages/api/auth/[...auth0].js）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// pages/api/auth/[...auth0].js import { handleAuth, handleLogin, handleCallback, handleLogout } from '@auth0/nextjs-auth0'; export default handleAuth({ async login(req, res) { await handleLogin(req, res, { returnTo: '/' }); }, async callback(req, res) { await handleCallback(req, res, { afterCallback: (req, res, session) => session, }); }, async logout(req, res) { await handleLogout(req, res, { returnTo: '/' }); }, }); |
4‑2. App Router（src/app/）での設定
a. ルートレイアウトに UserProvider を組み込む (layout.tsx)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// src/app/layout.tsx import './globals.css'; import { UserProvider } from '@auth0/nextjs-auth0'; export const metadata = { title: 'My Auth0 App', description: 'Next.js 13+ + Auth0', }; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="ja"> <body> <UserProvider>{children}</UserProvider> </body> </html> ); } |
b. Edge API Route に認証ハンドラを集約（src/app/api/auth/[...auth0]/route.ts）
|
1 2 3 4 5 6 |
// src/app/api/auth/[...auth0]/route.ts import { handleAuth } from '@auth0/nextjs-auth0'; export const GET = handleAuth(); export const POST = handleAuth(); |
c. ミドルウェアはルートに配置したままで同様に機能
|
1 2 3 4 |
// middleware.ts（Pages Router と共通） import { withAuth } from '@auth0/nextjs-auth0/edge'; export default withAuth((req) => req, { returnTo: '/' }); |
5. 認証フロー実装と保護されたページ／API の作り方
この章では、ログイン・コールバック・ログアウトエンドポイントの実装例と、サーバー側・クライアント側で認可を行うパターンを紹介します。
5‑1. withPageAuthRequired と useUser の使い分け
| 機能 | サーバーサイド（SSR） | クライアントサイド |
|---|---|---|
| ページ全体の保護 | withPageAuthRequired HOC を使用 → 未認証時に自動リダイレクト |
- |
| ユーザー情報取得 | getSession でセッションを取得（getServerSideProps 等） |
useUser フックでリアルタイム取得 |
a. withPageAuthRequired の例（Pages Router）
|
1 2 3 4 5 6 |
import { withPageAuthRequired } from '@auth0/nextjs-auth0'; export default withPageAuthRequired(function Secret() { return <h1>機密情報ページ</h1>; }); |
b. useUser フックの例（クライアント側 UI）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { useUser } from '@auth0/nextjs-auth0'; export default function Profile() { const { user, error, isLoading } = useUser(); if (isLoading) return <p>読み込み中…</p>; if (error) return <p>エラー: {error.message}</p>; if (!user) return <p>未ログインです。</p>; return ( <> <h2>{user.name} さんのプロフィール</h2> <img src={user.picture} alt="avatar" /> </> ); } |
5‑2. getServerSideProps でサーバー側認可を行う例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import { GetServerSideProps } from 'next'; import { getSession } from '@auth0/nextjs-auth0'; export const getServerSideProps: GetServerSideProps = async (ctx) => { const session = await getSession(ctx.req, ctx.res); if (!session?.user) { return { redirect: { destination: `/api/auth/login?returnTo=${encodeURIComponent(ctx.resolvedUrl)}`, permanent: false, }, }; } // ロールベースの認可例（カスタムクレーム使用） const roles = session.user['https://myapp.com/roles'] ?? []; if (!roles.includes('admin')) { return { notFound: true }; // 403 相当 } return { props: { user: session.user } }; }; export default function AdminPage({ user }: { user: any }) { return <h1>管理者ダッシュボードへようこそ、{user.name} さん</h1>; } |
6. デプロイ・運用・デバッグと料金プランの概要
実装が完了したら本番環境へデプロイし、運用上の注意点を押さえておきましょう。
6‑1. Vercel / Netlify への環境変数設定手順
| プラットフォーム | 手順 |
|---|---|
| Vercel |
|
| Netlify |
|
どちらの場合も、Allowed Callback URLs と Allowed Logout URLs にデプロイ先 URL（例:
https://my-app.vercel.app/api/auth/callback）を必ず追記してください。
6‑2. Auth0 ダッシュボードでのエラーログ確認方法
- Monitoring → Logs にアクセス。
- 「Failed Login」や「Callback URL mismatch」など、問題が起きたリクエストが一覧表示されます。
- ローカル開発時は
DEBUG=@auth0/nextjs-auth0:*環境変数を設定すると、next devコンソールに詳細デバッグ情報が出力されます。
|
1 2 3 |
# デバッグモードでローカルサーバ起動例 DEBUG=@auth0/nextjs-auth0:* npm run dev |
6‑3. 2026 年版 Auth0 の料金プラン（概要）
以下は 2026‑06 時点 の主要プランです。最新情報は公式ページをご確認ください。
| 項目 | 無料枠 (Free) | 開発者プラン (Developer) |
|---|---|---|
| 月間アクティブユーザー | 7,000 ユーザー | 10,000 ユーザー |
| カスタムドメイン | × | ◎ |
| 多要素認証 (MFA) | 基本 OTP | プッシュ・生体認証まで対応 |
| ログ保持期間 | 30 日 | 90 日 |
| アプリケーション数 | 無制限 | 無制限 |
結論: シンプルなログイン＋ロールベース認可であれば、無料枠でも十分です。カスタムドメインや高度な MFA が必要になる場合は、有料プランへの移行をご検討ください。
7. 次のステップ：公式ドキュメントとサンプルリポジトリの活用
本ガイドに沿って環境構築・実装を完了すれば、Next.js（Pages Router または App Router）アプリに Auth0 認証が組み込めます。今後のメンテナンスや機能追加の際は、以下リソースを定期的にチェックしましょう。
- 公式クイックスタート: https://auth0.com/docs/ja-jp/quickstart/webapp/nextjs/interactive
- Auth0 SDK リファレンス: https://github.com/auth0/nextjs-auth0
- サンプルリポジトリ（App Router）: https://github.com/auth0-samples/nextjs-auth0-app-router
- Zenn 実装例（App Router）: https://zenn.dev/joo_hashi/articles/6997e67b5ce29a
実践フロー:
1. ローカルでnpm run dev→ 動作確認
2. Vercel にデプロイ → 環境変数が正しく注入されるか検証
3. 本番環境でログイン・ログアウトをテストし、Auth0 の Logs でエラーが無いことを確認
参考情報（脚注）
- Next.js バージョン要件 – Next.js 13+ は Node.js 18 以上が必須です。(nextjs.org/docs/getting-started)
- @auth0/nextjs-auth0 v2.5.0 – npm パッケージページにてリリースノートを確認できます。(npm @auth0/nextjs-auth0)
- Auth0 料金プラン – 2026‑06 時点の情報は公式 Pricing ページに掲載されています。(Auth0 Plans and Pricing)
以上で、Next.js と Auth0 を組み合わせた認証実装の全体像が把握できるはずです。ぜひ手元のプロジェクトで試してみてください！