> ## 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 Next.js SDK を使用して、Auth0 を Vercel プロジェクトに連携する方法を学びます。

Auth0 の Vercel ネイティブ連携を使うと、最小限の設定で ID プラットフォームを Vercel プロジェクトに接続できます。ゼロから構築しなくても、ログイン画面を設定してカスタマイズできます。さらに、[B2B Organizations](/docs/ja-jp/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](/docs/ja-jp/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](/docs/ja-jp/quickstart/webapp/nextjs) を使用する Next.js アプリケーション

連携をインストールしたら、Vercel の要件に従って Universal Login または Classic Login を iframe 内で読み込めるように、[Iframe 埋め込みを有効にします](/docs/ja-jp/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 integration** を選択し、**Install** を選択します。

2. Auth0 により、アプリケーションの localhost URL と callback URL が自動入力されます。**Installation Plan** を選択し、**Continue** を選択します。

3. アプリケーション名を入力します。**Create** を選択します。新しい Auth0 テナントとアプリケーションが正常に作成されたら、**Continue** を選択します。

4. 既存の Vercel プロジェクトに接続するには、**Connect Project** を選択し、プロジェクトと環境を選択します。必要に応じて、環境変数に追加するカスタムプレフィックスを入力します。**Connect** を選択します。Vercel プロジェクトの接続が完了すると、連携の [Getting Started](#getting-started) セクションに移動します。

<div id="getting-started">
  ## Getting started
</div>

Vercel Dashboard の Getting started セクションには、アプリをすばやく安全に使い始めるための Quickstart が表示されます。左側のナビゲーションから、Application Settings を管理することもできます。

<div id="quickstart">
  ### 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でアプリケーション設定を管理するには、左側のナビゲーションにある**設定**に移動します。

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

* **名前の更新**: アプリケーションの名前を更新します。
* **Configurationの更新**:
  * **Parameters**: アプリケーションのローカルホスト URL とコールバックエンドポイントを更新します。
  * **現在のインストールレベルプラン**: 連携のインストールレベルプランを更新するには、連携設定に移動します。詳しくは、[設定](#settings)を参照してください。
* **このリソースの保護**
  * **シークレットのローテーション**: アプリケーションのシークレットをローテーションします。詳しくは、[Rotating environment variables](https://vercel.com/docs/projects/environment-variables/managing-environment-variables#rotating-environment-variables)を参照してください。
  * **許可する環境**: 連携を**すべての環境**で利用可能にするか、**本番環境のみ**で利用可能にするかを選択します。
* **連携を削除**: 連携を削除すると、自動的に Vercel の Free プランにダウングレードされます。詳しくは、[Delete integration](#delete-integration)を参照してください。

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

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

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

このアプリケーションは、Universal Login のエクスペリエンスのカスタマイズなど、Auth0 Dashboard 内の他のアプリケーションと同じように変更できます。

<div id="manage-integration">
  ## 連携の管理
</div>

Vercel Dashboard で連携を管理するには、プロジェクトの **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>

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

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

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

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

1. **設定** で **現在のインストールレベルプラン** までスクロールし、**Change Plan** を選択します。
2. 希望するインストールレベルのプランを選択します。
3. **Continue** を選択します。
4. 選択内容を確認して、**Update** を選択します。
5. インストールの更新が完了したら、**Done** を選択します。

<div id="delete-integration">
  #### 連携を削除
</div>

連携を削除すると、自動的に Vercel の Free プランにダウングレードされます。

連携を削除するには、次の手順に従います。

1. **設定** で **Delete \<YOUR\_PRODUCT>** までスクロールし、**Remove \<YOUR\_PRODUCT>** ボタンを選択します。
2. 連携スラッグとチームを入力し、**I acknowledge that this will remove my Auth0-connected account** を選択します。
3. **Remove \<YOUR\_PRODUCT>** を選択します。