> ## Documentation Index
> Fetch the complete documentation index at: https://docs-dev-docs-event-stream-action-templates.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Vercelと統合する

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

## 概要

新規または既存のAuth0インスタンスをVercelプロジェクトに接続し、[Auth0統合](https://vercel.com/integrations/auth0)を使用してアプリのセキュリティ、拡張性、およびカスタマイズを拡張します。この統合は、無駄のない合理的な顧客のIDアプローチをアプリに直接実装できるようにします。

この新しい統合を使用すると、VercelプロジェクトにIDフローを構築してカスタマイズすることができます。アプリを素早く安全に立ち上げて稼働させるために、この統合は以下を行います。

* Vercelで運用環境をセットアップして、数回のクリックでAuth0テナントと統合できるようにします。
* Vercelプロジェクトと接続するアプリケーションをAuth0テナント内に自動的に作成します。
* Auth0の資格情報をVercelにあらかじめ組み込んで、プロセス中に手動で行ういくつかの手順をスキップできるようにします。

### 前提条件

Auth0をVercelプロジェクトに統合し始める前に、以下をセットアップする必要があります。

* 統合したいプロジェクトのあるVercelアカウント。Vercelアカウントをまだ持っていない場合には、まず[Vercelアカウントを作成](https://vercel.com/signup)してください。
* 最新版の[Auth0 Next.js SDK](https://auth0.com/docs/quickstart/webapp/nextjs#install-the-auth0-next-js-sdk)を使用したNext.jsアプリケーション

## Vercel統合を追加する

既存のVercelプロジェクトにAuth0統合を追加するには、以下を行います。

1. [Auth0統合ページ](https://vercel.com/integrations/auth0)に移動します。

2. インストールウィンドウが開いたら、Auth0統合をインストールしたいVercelチームとプロジェクトを選択します。

   <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
     現在は、一度に1つのプロジェクトへの統合しか提供していません。 **［All projects（すべてのプロジェクト）］** を選択すると、プロジェクトの選択画面がワークフローの後半まで先送りされます。
   </Callout>

3. **［Install（インストール）］** を選択し、Auth0の統合ポータルにインストールを進めます。

4. 正しいAuth0アカウントでログインしていて、正しいテナントのダッシュボードに統合していることを確認します。

   <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
     Auth0にログインするか、 **または** 、正しいAuth0アカウントでログインしていて、正しいテナントのダッシュボードに統合していることを確認します。

     * テナントが選択されていない場合は、テナントの作成画面にリダイレクトされます。
     * 新しいテナントを作成する場合は、標準のオンボーディング手順に従います。
     * Auth0を初めて使う場合は、そこでAuth0アカウントを作成します。
   </Callout>

5. **［Accept（承認する）］** を選択します。

6. 次に、Auth0と統合したいVercelプロジェクトを選択し、 **［Continue（続行）］** を選択します。

7. アプリケーションの選択を確認してから、 **［Continue（続行）］** を選択します。

8. これで、Auth0統合がVercelプロジェクトに追加されました。インストール済の統合を確認するには、プロジェクトの概要ページで **［Integrations（統合）］** タブに移動します。プロジェクトにインストール済の統合としてAuth0が表示されます。

## Vercel統合を管理する

Auth0統合をVercelプロジェクトに統合したら、Vercelでアプリケーションダッシュボートを使って管理することができます。

### Vercelから管理する

Vercelダッシュボートを使ってAuth0のアプリケーションを管理するには、プロジェクトの **［Integration（統合）］** タブでAuth0統合を選択します。

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  環境変数は、運用ドメインでのみ構成できます。
</Callout>

#### アクセスを管理する

Vercelのアプリケーションにある特定のプロジェクトへの統合アクセスを管理するには、 **［Manage Access（アクセスの管理）］** を選択します。これにより、Auth0統合に対してプロジェクトレベルでアクセスを制限できるようになります。

#### 統合を削除する

Auth0統合をアンインストールするには、 **［Remove integration（統合の削除）］** を選択します。アプリケーションとそれに関連するすべての設定が<Tooltip data-tooltip-id="react-containers-DefinitionTooltip-0" href="/docs/ja-jp/glossary?term=auth0-dashboard" tip="Auth0 Dashboard: サービスを構成するためのAuth0の主製品。" cta="用語集の表示">Auth0 Dashboard</Tooltip>から削除されます。この処理は元に戻せません。削除した場合には、アプリケーションをインストールし直す必要があります。

### Auth0 Dashboardから管理する

Auth0統合をVercelプロジェクトに追加すると、[Auth0 Dashboard](https://manage.auth0.com/)によって新しいアプリケーションが作成され、CIAMワークフローの管理とカスタマイズが実行できるようになります。

1. [Auth0 Dashboard](https://manage.auth0.com/)に移動します。

2. **［Applications（アプリケーション）］>［Applications（アプリケーション）］> \[Vercelのアプリケーション]** を選択します。

3. **［Settings（設定）］>［Application URIs（アプリケーションURL）］** でVercelのアプリケーションURIを確認します。

   <Frame>
     <img src="https://mintcdn.com/docs-dev-docs-event-stream-action-templates/V-g8sIA_dMysRiDH/docs/images/ja-jp/cdy7uua7fh8z/62UwXZPwqrjYly0rkXawYb/eeba64de4252bd3222b3eaf61af5537e/2025-01-23_15-03-01.png?fit=max&auto=format&n=V-g8sIA_dMysRiDH&q=85&s=973040ab0ec054bee93399c1c39a8df1" alt="null" width="1954" height="2116" data-path="docs/images/ja-jp/cdy7uua7fh8z/62UwXZPwqrjYly0rkXawYb/eeba64de4252bd3222b3eaf61af5537e/2025-01-23_15-03-01.png" />
   </Frame>

4. これで、他のアプリケーションと同様に、このアプリケーションをAuth0 Dashboardでカスタマイズや変更することができます。