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

> ACULクイックスタートを始める

# ACULクイックスタート

<Card title="Before you start">
  以下が必要です。

  * [ユニバーサルログイン](/docs//ja-jp/authenticate/login/auth0-universal-login)と[カスタムドメイン](/docs/ja-jp/customize/custom-domains)が構成されたAuth0開発テナント。
  * Auth0の[ファーストパーティアプリケーション](/docs/ja-jp/get-started/auth0-overview/create-applications#create-applications)。
  * Auth0テナントで[Identifier First認証](/docs//ja-jp/authenticate/login/auth0-universal-login/identifier-first)が有効になっていること。
  * [Node.js](http://Node.js) V22
  * 開発テナントに[Auth0 CLI](https://auth0.github.io/auth0-cli/)がインストール・設定済みであること。
</Card>

Auth0 CLIを使用すると、ユニバーサルログイン（ACUL）画面の高度なカスタマイズを実装しテストできます。認証画面（ログイン、サインアップ、パスワードレス、パスキー登録など）をWebアプリケーションに合わせて簡単にカスタマイズできます。

Auth0 CLIを使用してACULプロジェクトとカスタム`login_id`画面を作成するには、次の手順に従います。

## 1. ACULサンプルアプリケーションを初期化する

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Auth0 CLIを使用して開発テナントを構成していない場合は、`auth0 login`コマンドを使用してテナントを構成します。
</Callout>

プロジェクトをビルドする場所に移動し、次のコマンドを実行します。

```bash theme={null}
auth0 acul init "Your_App_Name"
```

1. \*\*React（とACUL React SDK）\*\*を選択します。
2. **login-id**画面を選択します。
3. 「**'npm install'を使用して必要な依存関係のインストールを続行しますか？**」で**y**と入力します。

Auth0 CLIは、指定されたアプリケーション名で新しいプロジェクトディレクトリを作成します。

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  **y**を選択して必要な依存関係をインストールしなかった場合は、プロジェクトディレクトリに移動して`npm install`コマンドを実行します。
</Callout>

## 2. （任意）プロジェクトにさらに画面を追加する

次のコマンドを実行して、プロジェクトの追加画面を選択します。

```bash theme={null}
auth0 acul screen add SCREEN_NAME 
```

## 3. ユニバーサルログインコンテキストインスペクターでログインID画面を起動する

ULコンテキストインスペクターを使用して、ログインID画面を起動します。

1. プロジェクトディレクトリに移動し、次のコマンドを実行します。

```bash theme={null}
auth0 acul dev
```

2. プロジェクトディレクトリを確認する
3. ローカルアセットを共有するポート（デフォルトではポート`55444`）を選択します。

ユニバーサルログインコンテキストインスペクターは、新しいブラウザのウィンドウを開きログインID画面を表示します。

## 4. サンプルのログインID画面を更新する

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Auth0 acul devコマンドは、ACUL画面を構築し、アセットをローカルでホストし、アセットディレクトリの更新を継続的に監視するため、ローカルで画面をテストできます。詳しくは、「\[Auth0 CLI acul]」([https://auth0.github.io/auth0-cli/auth0\_acul\_dev.html)コマンドのドキュメントをご覧ください。](https://auth0.github.io/auth0-cli/auth0_acul_dev.html\)コマンドのドキュメントをご覧ください。)
</Callout>

1. プロジェクトディレクトリで、`/src/index.css`ディレクトリを編集し、ロゴウィジェットをロゴURLで更新します。

`--ul-theme-widget-logo-url: "Your-Logo-URL";`

2. 変更を保存します。

ローカル開発サーバーは最新の変更で自動的に更新されます。

## 5. 認証画面のコンテキストデータをカスタマイズする

ユニバーサルログインコンテキストインスペクターを使用すると、デフォルトのコンテキストデータをカスタマイズして、テナント固有の構成に対して認証画面をテストできます。

1. 次の手順で、プロジェクト内の画面のモックコンテキストデータのローカルバージョンを作成します。

\*\*［JSONをダウンロード］\*\*アイコンを選択して、モックのコンテキストデータファイルをダウンロードします。

<Frame>
  <img src="https://mintcdn.com/docs-dev-actions-triggers-prototype/nRTYX19FsgfcTLla/docs/images/cdy7uua7fh8z/ACUL/ULContextInspectorDownload.png?fit=max&auto=format&n=nRTYX19FsgfcTLla&q=85&s=6d7f1286da9a282790e319d212427094" alt="Auth0 Dashboard ACUL page" width="547" height="239" data-path="docs/images/cdy7uua7fh8z/ACUL/ULContextInspectorDownload.png" />
</Frame>

2. ダウンロードしたファイルの名前を変更して`public/screens/{prompt}/{screen}`に移動し、プロジェクトディレクトリにある`public/manifest.json file`に追加します。

たとえば、ダウンロードした`login-id-login-id-context.json`ファイルの名前を`login-id.json`に変更し、`/public/screens/login-id/login-id.json`に移動します。

3. ユニバーサルログインコンテキストインスペクターの\*\*［データソース］**から**［ローカル開発］\*\*を選択して、画面のモックコンテキストのローカルバージョンを読み込みます。

詳しくは、「\[Auth0 CLI ACUL]」([https://auth0.github.io/auth0-cli/auth0\_acul\_dev.html)のドキュメントをご覧ください。](https://auth0.github.io/auth0-cli/auth0_acul_dev.html\)のドキュメントをご覧ください。)