メインコンテンツへスキップ
Auth0 の Vercel ネイティブ統合を使用すると、最小限の設定でアイデンティティプラットフォームを Vercel プロジェクトに接続できます。ゼロから構築しなくても、ログイン画面を設定してカスタマイズできます。さらに、B2B Organizations、Fine-Grained Authorization (FGA)、Auth0 for AI Agents などの高度な機能を利用して、認証フローや認可フローを拡張できます。 Auth0 の Vercel ネイティブ統合では、次のことが可能です。
  • Vercel プロジェクトに接続する Auth0 アプリケーションを自動的にプロビジョニングします。
  • Auth0 の認証情報が Vercel Dashboard に事前に読み込まれるため、すばやく簡単にセットアップできます。
  • Auth0 SDKs を使用する Next.js アプリケーションを、追加設定なしですぐにサポートします。
Auth0 の Vercel ネイティブ統合では、Vercel プロジェクト用に新しい Auth0 テナント環境が作成されます。既存の Auth0 アカウントを使用する場合は、Auth0 Dashboard でアプリケーションを作成する際に、Vercel と手動で統合してください。

​
前提条件

始める前に、以下を用意してください。 統合をインストールしたら、Vercel の要件に従って Universal Login または Classic Login を iframe 内で読み込めるように、iframe 埋め込みを有効にしてください。

​
統合をインストール

Vercel Marketplace から Auth0 の Vercel ネイティブ統合をインストールします。
  1. Integrations > Browse Marketplace に移動し、Auth0 を検索します。Native Integrations にある Auth0 統合 を選択し、Install を選択します。
  2. Auth0 により、アプリケーションの localhost URL とコールバックURL が自動入力されます。Installation Plan を選択し、Continue を選択します。
  3. アプリケーションの名前を入力します。Create を選択します。新しい Auth0 テナントとアプリケーションが正常に作成されたら、Continue を選択します。
  4. 既存の Vercel プロジェクトに接続するには、Connect Project を選択し、プロジェクトと環境を選択します。必要に応じて、環境変数に追加するカスタムプレフィックスを入力します。Connect を選択します。Vercel プロジェクトの接続が完了すると、統合の Getting Started セクションに移動します。

​
はじめに

Vercel Dashboard の［Getting started］セクションには、アプリをすばやく安全に稼働させるための Quickstart が表示されます。左側のナビゲーションでは、アプリケーション設定を管理することもできます。

​
クイックスタート

Auth0 の Vercel ネイティブ統合を使い始めるには、Vercel Dashboard の手順に従ってアプリケーションを作成およびデプロイします。
Auth0 の環境変数は、本番環境でのみ設定できます。

​
アプリケーション設定の管理

アプリケーション設定は、Vercel Dashboard と Auth0 Dashboard で管理できます。

​
Vercel Dashboard

Vercel Dashboard でアプリケーション設定を管理するには、左側のナビゲーションにある Settings に移動します。 次のアプリケーション設定を更新できます。
  • 名前を更新: アプリケーションの名前を更新します。
  • 構成を更新:
    • パラメーター: アプリケーションのローカルホスト URL とコールバックエンドポイントを更新します。
    • 現在のインストールレベルプラン: 統合のインストールレベルプランを更新するには、Integration settings に移動します。詳しくは、Settings を参照してください。
  • このリソースを保護
    • シークレットをローテーション: アプリケーションのシークレットをローテーションします。詳しくは、Rotating environment variables を参照してください。
    • 許可される環境: 統合を All environments または Production environment only のどちらで利用可能にするかを選択します。
  • 統合を削除: 統合を削除すると、自動的に Free Vercel プランにダウングレードされます。詳しくは、Delete integration を参照してください。

​
Auth0 Dashboard

追加のアプリケーション設定は、Auth0 Dashboard で管理できます。 ネイティブ統合をインストールすると、Auth0 は専用のテナント内に新しいアプリケーションを作成し、Vercel の URI、許可済みのコールバック URL、ログアウト URL をあらかじめ設定します。 このアプリケーションも、Auth0 Dashboard 内の他のアプリケーションと同様に変更できます。たとえば、Universal Login エクスペリエンスをカスタマイズできます。

​
統合を管理する

Vercel のダッシュボードから統合を管理するには、プロジェクトの Integration タブを選択し、Auth0 統合までスクロールして Manage を選択します。

​
請求書

Invoices ページでは、Auth0 統合に関連する請求書の一覧を表示できます。請求書の詳細については、Billing & Invoicesを参照してください。

​
設定

設定ページでは、支払い方法の追加、インストールレベルプランの変更、および統合の削除を行えます。

​
支払い方法

支払い方法を追加するには、Add を選択します。支払い方法について詳しくは、Vercel pricingを参照してください。

​
現在のインストール レベル プラン

インストール レベル プランは、このインストール内のすべての製品に適用されます。 インストール レベル プランを変更するには:
  1. Settings で Current Installation Level Plan までスクロールし、Change Plan を選択します。
  2. 希望するインストール レベル プランを選択します。
  3. 続行 を選択します。
  4. 選択内容を確認し、Update を選択します。
  5. インストールの更新が完了したら、Done を選択します。

​
統合を削除する

統合を削除すると、自動的に Vercel の Free プランへダウングレードされます。 統合を削除するには、次の手順を実行します。
  1. Settings で Delete <YOUR_PRODUCT> までスクロールし、Remove <YOUR_PRODUCT> ボタンを選択します。
  2. 統合スラッグとチームを入力し、I acknowledge that this will remove my Auth0-connected account を選択します。
  3. Remove <YOUR_PRODUCT> を選択します。