Anthropic Claudeソフトウェア開発⭐ リポ 0品質スコア 50/100

auth0-nextjs

Name: auth0-nextjs
Author: auth0

Next.jsアプリケーションへの認証機能追加（ログイン・ログアウト・保護されたページ・ミドルウェア・サーバーコンポーネント）が必要な際に使用します。`@auth0/nextjs-auth0` SDKを用いて、App RouterとPages Routerの両方に対応しています。

description の原文を見る

Use when adding authentication to Next.js applications (login, logout, protected pages, middleware, server components) - supports App Router and Pages Router with @auth0/nextjs-auth0 SDK.

SKILL.md 本文

Auth0 Next.js インテグレーション

@auth0/nextjs-auth0 を使用して Next.js アプリケーションに認証を追加します。App Router と Pages Router の両方に対応しています。

前提条件

Next.js 13+ アプリケーション (App Router または Pages Router)
Auth0 アカウントとアプリケーション構成
Auth0 をまだ設定していない場合は、最初に auth0-quickstart スキルを使用してください

使用しない場合

クライアント側のみの React アプリ - Vite/CRA SPAs には auth0-react を使用
React Native モバイルアプリ - iOS/Android には auth0-react-native を使用
Next.js 以外のフレームワーク - フレームワーク固有の SDK を使用 (Express, Vue, Angular など)
ステートレス API のみ - セッション管理が不要な場合は JWT 検証ミドルウェアを使用

クイックスタートワークフロー

1. SDK をインストール

npm install @auth0/nextjs-auth0

2. 環境を設定

Auth0 CLI を使用した自動セットアップの場合、セットアップガイドで完全なスクリプトを参照してください。

手動セットアップの場合:

.env.local を作成:

AUTH0_SECRET=<generate-a-32-character-secret>
APP_BASE_URL=http://localhost:3000
AUTH0_DOMAIN=your-tenant.auth0.com
AUTH0_CLIENT_ID=your-client-id
AUTH0_CLIENT_SECRET=your-client-secret

秘密鍵を生成: openssl rand -hex 32

重要: .env.local を .gitignore に追加

3. Auth0 クライアントとミドルウェアを作成

プロジェクト構造を最初に確認: プロジェクトが src/ ディレクトリを使用しているか確認します (src/app/ または src/pages/ が存在するかどうか)。これにより、ファイルの配置場所が決まります:

src/ を使用: src/lib/auth0.ts, src/middleware.ts (Next.js 16 では src/proxy.ts)
src/ を使用しない: lib/auth0.ts, middleware.ts (Next.js 16 では proxy.ts)

lib/auth0.ts を作成 (または src/ 規約を使用している場合は src/lib/auth0.ts):

import { Auth0Client } from '@auth0/nextjs-auth0/server';

export const auth0 = new Auth0Client({
  domain: process.env.AUTH0_DOMAIN!,
  clientId: process.env.AUTH0_CLIENT_ID!,
  clientSecret: process.env.AUTH0_CLIENT_SECRET!,
  secret: process.env.AUTH0_SECRET!,
  appBaseUrl: process.env.APP_BASE_URL!,
});

ミドルウェア構成 (Next.js 15 対 16):

Next.js 15 - middleware.ts を作成 (プロジェクトルート、または src/ を使用している場合は src/middleware.ts):

import { NextRequest } from 'next/server';
import { auth0 } from '@/lib/auth0';

export async function middleware(request: NextRequest) {
  return await auth0.middleware(request);
}

export const config = {
  matcher: [
    '/((?!_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)',
  ],
};

Next.js 16 - 2 つのオプションがあります:

オプション 1: middleware.ts を使用 (Next.js 15 と同じ、同じ src/ 配置ルール):

import { NextRequest } from 'next/server';
import { auth0 } from '@/lib/auth0';

export async function middleware(request: NextRequest) {
  return await auth0.middleware(request);
}

export const config = {
  matcher: [
    '/((?!_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)',
  ],
};

オプション 2: proxy.ts を使用 (プロジェクトルート、または src/ を使用している場合は src/proxy.ts):

import { NextRequest } from 'next/server';
import { auth0 } from '@/lib/auth0';

export async function proxy(request: NextRequest) {
  return await auth0.middleware(request);
}

export const config = {
  matcher: [
    '/((?!_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)',
  ],
};

自動的に次のエンドポイントが作成されます:

/auth/login - ログイン
/auth/logout - ログアウト
/auth/callback - OAuth コールバック
/auth/profile - ユーザープロフィール

4. ユーザーコンテキストを追加 (オプション)

注: v4 では、<Auth0Provider> でラップすることはオプションです。サーバーレンダリング中に初期ユーザーを useUser() に渡したい場合にのみ必要です。

App Router - オプションで app/layout.tsx でアプリをラップ:

import { Auth0Provider } from '@auth0/nextjs-auth0/client';
import { auth0 } from '@/lib/auth0';

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const session = await auth0.getSession();

  return (
    <html>
      <body>
        <Auth0Provider user={session?.user}>{children}</Auth0Provider>
      </body>
    </html>
  );
}

Pages Router - オプションで pages/_app.tsx でアプリをラップ:

import { Auth0Provider } from '@auth0/nextjs-auth0/client';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Auth0Provider user={pageProps.user}>
      <Component {...pageProps} />
    </Auth0Provider>
  );
}

5. 認証 UI を追加

クライアントコンポーネント (両方のルーターで動作):

'use client'; // App Router の場合のみ必要

import { useUser } from '@auth0/nextjs-auth0/client';

export default function Profile() {
  const { user, isLoading } = useUser();

  if (isLoading) return <div>Loading...</div>;

  if (user) {
    return (
      <div>
        <img src={user.picture} alt={user.name} />
        <h2>Welcome, {user.name}!</h2>
        <a href="/auth/logout">Logout</a>
      </div>
    );
  }

  return <a href="/auth/login">Login</a>;
}

6. 認証をテスト

開発サーバーを起動:

npm run dev

http://localhost:3000 を訪問して、ログインフローをテスト。

詳細ドキュメント

セットアップガイド - 自動セットアップスクリプト、環境構成、Auth0 CLI の使用方法
インテグレーションガイド - サーバー側認証、保護されたルート、API ルート、ミドルウェア
API リファレンス - 完全な SDK API、フック、ヘルパー、セッション管理

よくある間違い

間違い	修正方法
v3 環境変数を使用	v4 は `APP_BASE_URL` と `AUTH0_DOMAIN` を使用 (`AUTH0_BASE_URL` または `AUTH0_ISSUER_BASE_URL` ではなく)
Auth0 ダッシュボードでコールバック URL を追加忘れ	`/auth/callback` を許可されたコールバック URL に追加 (例: `http://localhost:3000/auth/callback`)
ミドルウェア構成が不足	v4 では auth ルートをマウントするためにミドルウェアが必要 - `auth0.middleware()` を使用して `middleware.ts` (Next.js 15+16) または `proxy.ts` (Next.js 16 のみ) を作成
ルートパスが間違い	v4 は `/auth/login` を使用 (`/api/auth/login` ではなく) - ルートは `/api` プレフィックスを削除
AUTH0_SECRET が不足またはが弱い	`openssl rand -hex 32` で安全な秘密鍵を生成し、.env.local に保存
.env の代わりに .env.local を使用していない	Next.js はローカル秘密に .env.local を必要とし、.env.local は .gitignore に含まれるべき
Auth0 で SPA タイプで作成されたアプリ	Next.js の場合は「通常の Web アプリケーション」タイプである必要があります
削除された v3 ヘルパーを使用	v4 では `withPageAuthRequired` と `withApiAuthRequired` を削除 - 代わりに `getSession()` を使用
サーバーコンポーネントで useUser を使用	useUser はクライアント専用、サーバーコンポーネントには `auth0.getSession()` を使用
AUTH0_DOMAIN に https:// が含まれている	v4 の `AUTH0_DOMAIN` はドメインのみ (例: `example.auth0.com`)、スキームは不要

クイックリファレンス

V4 セットアップ:

src/ 規約を検出: src/app/ または src/pages/ が存在するか確認 — 存在する場合はすべてのファイルを src/ 内に配置
lib/auth0.ts (または src/lib/auth0.ts) を作成し、Auth0Client インスタンスを含める
ミドルウェア構成を作成 (必須):
- Next.js 15: middleware.ts (または src/middleware.ts) と middleware() 関数
- Next.js 16: middleware.ts に middleware() 関数 OR proxy.ts に proxy() 関数 (同じ src/ ルール)
オプション: SSR ユーザーの場合は <Auth0Provider> でラップ

クライアント側フック:

useUser() - クライアントコンポーネントでユーザーを取得
user - ユーザープロフィールオブジェクト
isLoading - ローディング状態

サーバー側メソッド:

auth0.getSession() - サーバーコンポーネント/API ルート/ミドルウェアでセッションを取得
auth0.getAccessToken() - API を呼び出すためのアクセストークンを取得

一般的なユースケース:

ログイン/ログアウトリンク → /auth/login と /auth/logout パスを使用 (ステップ 5 参照)
保護されたページ (App Router) → インテグレーションガイド
保護されたページ (Pages Router) → インテグレーションガイド
認証付き API ルート → インテグレーションガイド
ミドルウェア保護 → インテグレーションガイド

リファレンス

ライセンス: Apache-2.0(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者: auth0
リポジトリ: auth0/agent-skills
ライセンス: Apache-2.0
最終更新: 不明

GitHubで原本を見る →フィードバックを送る

Source: https://github.com/auth0/agent-skills / ライセンス: Apache-2.0