> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Vercel と統合する

> Auth0 を Vercel アプリケーションに統合します

Auth0 の Vercel ネイティブ統合を使用すると、最小限の設定でアイデンティティプラットフォームを Vercel プロジェクトに接続できます。ゼロから構築しなくても、ログイン画面を設定してカスタマイズできます。さらに、[B2B Organizations](/ja/docs/manage-users/organizations)、[Fine-Grained Authorization (FGA)](https://docs.fga.dev/)、[Auth0 for AI Agents](https://auth0.com/ai/docs) などの高度な機能を利用して、認証フローや認可フローを拡張できます。

Auth0 の Vercel ネイティブ統合では、次のことが可能です。

* Vercel プロジェクトに接続する Auth0 アプリケーションを自動的にプロビジョニングします。
* Auth0 の認証情報が Vercel Dashboard に事前に読み込まれるため、すばやく簡単にセットアップできます。
* [Auth0 SDKs](/ja/docs/libraries) を使用する Next.js アプリケーションを、追加設定なしですぐにサポートします。

Auth0 の Vercel ネイティブ統合では、Vercel プロジェクト用に新しい Auth0 テナント環境が作成されます。既存の Auth0 アカウントを使用する場合は、Auth0 Dashboard でアプリケーションを作成する際に、Vercel と手動で統合してください。

<div id="prerequisites">
  ## 前提条件
</div>

始める前に、以下を用意してください。

* アクティブなプロジェクトを持つ Vercel アカウント。必要に応じて、[Vercel アカウントを作成](https://vercel.com/signup)してください
* 最新の [Auth0 Next.js SDK](/ja/docs/quickstart/webapp/nextjs) を使用する Next.js アプリケーション

統合をインストールしたら、Vercel の要件に従って Universal Login または Classic Login を iframe 内で読み込めるように、[iframe 埋め込みを有効にしてください](/ja/docs/customize/login-pages/manage-core-configuration#iframe-embedding)。

<div id="install-integration">
  ## 統合をインストール
</div>

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](#getting-started) セクションに移動します。

<div id="getting-started">
  ## はじめに
</div>

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

<div id="quickstart">
  ### クイックスタート
</div>

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

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Auth0 の環境変数は、本番環境でのみ設定できます。
</Callout>

<div id="manage-application-settings">
  ## アプリケーション設定の管理
</div>

アプリケーション設定は、[Vercel Dashboard](#vercel-dashboard) と [Auth0 Dashboard](#auth0-dashboard) で管理できます。

<div id="vercel-dashboard">
  ### Vercel Dashboard
</div>

Vercel Dashboard でアプリケーション設定を管理するには、左側のナビゲーションにある **Settings** に移動します。

次のアプリケーション設定を更新できます。

* **名前を更新**: アプリケーションの名前を更新します。
* **構成を更新**:
  * **パラメーター**: アプリケーションのローカルホスト URL とコールバックエンドポイントを更新します。
  * **現在のインストールレベルプラン**: 統合のインストールレベルプランを更新するには、Integration settings に移動します。詳しくは、[Settings](#settings) を参照してください。
* **このリソースを保護**
  * **シークレットをローテーション**: アプリケーションのシークレットをローテーションします。詳しくは、[Rotating environment variables](https://vercel.com/docs/projects/environment-variables/managing-environment-variables#rotating-environment-variables) を参照してください。
  * **許可される環境**: 統合を **All environments** または **Production environment only** のどちらで利用可能にするかを選択します。
* **統合を削除**: 統合を削除すると、自動的に Free Vercel プランにダウングレードされます。詳しくは、[Delete integration](#delete-integration) を参照してください。

<div id="auth0-dashboard">
  ### Auth0 Dashboard
</div>

追加のアプリケーション設定は、[Auth0 Dashboard](https://manage.auth0.com/) で管理できます。

ネイティブ統合をインストールすると、Auth0 は専用のテナント内に新しいアプリケーションを作成し、Vercel の URI、許可済みのコールバック URL、ログアウト URL をあらかじめ設定します。

このアプリケーションも、Auth0 Dashboard 内の他のアプリケーションと同様に変更できます。たとえば、Universal Login エクスペリエンスをカスタマイズできます。

<div id="manage-integration">
  ## 統合を管理する
</div>

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

<div id="invoices">
  ### 請求書
</div>

**Invoices** ページでは、Auth0 統合に関連する請求書の一覧を表示できます。請求書の詳細については、[Billing & Invoices](https://vercel.com/docs/pricing/understanding-my-invoice)を参照してください。

<div id="settings">
  ### 設定
</div>

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

<div id="payment-methods">
  #### 支払い方法
</div>

支払い方法を追加するには、**Add** を選択します。支払い方法について詳しくは、[Vercel pricing](https://vercel.com/docs/accounts/plans)を参照してください。

<div id="current-installation-level-plan">
  #### 現在のインストール レベル プラン
</div>

インストール レベル プランは、このインストール内のすべての製品に適用されます。

インストール レベル プランを変更するには:

1. **Settings** で **Current Installation Level Plan** までスクロールし、**Change Plan** を選択します。
2. 希望するインストール レベル プランを選択します。
3. **続行** を選択します。
4. 選択内容を確認し、**Update** を選択します。
5. インストールの更新が完了したら、**Done** を選択します。

<div id="delete-integration">
  #### 統合を削除する
</div>

統合を削除すると、自動的に 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>** を選択します。