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

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

# ACUL クイックスタート

<Card title="開始する前に">
  必要なもの:

  * [Universal Login](/docs/ja-JP/authenticate/login/auth0-universal-login) と [カスタムドメイン](/docs/ja-JP/customize/custom-domains) が設定された Auth0 の開発テナント。
  * Auth0 の [First Party Application](/docs/ja-JP/get-started/auth0-overview/create-applications#create-applications)。
  * Auth0 テナントで有効化された [Identifier First Authentication](/docs/ja-JP/authenticate/login/auth0-universal-login/identifier-first)。
  * [Node.js](http://Node.js) バージョン 22
  * 開発テナント用にインストールおよび設定された [Auth0 CLI](https://auth0.github.io/auth0-cli/)。
</Card>

Auth0 CLI を使用すると、Advanced Customization for Universal Login (ACUL) の画面を実装およびテストできます。これにより、ログイン、サインアップ、パスワードレス、パスキー登録などの認証画面を、Web アプリケーションにぴったり合わせてカスタマイズできます。

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

<div id="1-initialize-an-acul-sample-application">
  ## 1. ACUL サンプルアプリケーションを初期化する
</div>

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

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

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

1. **React (with ACUL React SDK)** を選択します。
2. **login-id** 画面を選択します。
3. **Would you like to proceed with installing the required dependencies using 'npm install'?** と表示されたら、**y** を入力します。

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

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  必要な依存関係のインストールを実行するよう求められた際に **y** を入力しなかった場合は、プロジェクトディレクトリに移動して `npm install` コマンドを実行してください。
</Callout>

<div id="2-optional-add-additional-screens-to-your-project">
  ## 2. （任意）プロジェクトに含める追加の画面を選択する
</div>

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

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

<div id="3-launch-the-login-id-screen-with-universal-login-context-inspector">
  ## 3. Universal Login Context Inspector を使って Login ID 画面を起動する
</div>

UL context inspector を使用して Login ID 画面を起動します。

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

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

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

Universal Login Context Inspector が新しいブラウザーウィンドウで Login Id 画面を開きます。

<div id="4-update-the-sample-login-id-screen">
  ## 4. サンプルの Login ID 画面を更新する
</div>

<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) コマンドのドキュメントを参照してください。
</Callout>

1. プロジェクトディレクトリで `/src/index.css` ファイルを編集し、ロゴウィジェットを自分のロゴの URL に更新します：

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

2. 変更を保存します。

ローカルの開発サーバーは、最新の変更を自動的に反映して更新されます。

<div id="5-customize-the-context-data-for-your-authentication-screens">
  ## 5. 認証画面用のコンテキストデータをカスタマイズする
</div>

Universal Login Context Inspector を使用すると、デフォルトのコンテキストデータをカスタマイズして、テナント固有の設定に対して認証画面をテストできます。

1. プロジェクト内の特定の画面用に、モックコンテキストデータのローカル版を作成します。

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

<Frame>
  <img src="https://mintcdn.com/generaltranslationinc/IhLUvTv5J5eZ1VeH/docs/images/cdy7uua7fh8z/ACUL/ULContextInspectorDownload.png?fit=max&auto=format&n=IhLUvTv5J5eZ1VeH&q=85&s=1be3faea5d2abebf1ce74ffec22981cd" alt="Auth0 Dashboard の ACUL ページ" width="547" height="239" data-path="docs/images/cdy7uua7fh8z/ACUL/ULContextInspectorDownload.png" />
</Frame>

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

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

3. Universal Login Context Inspector の **Data source** から **Local Development** を選択して、その画面用のモックコンテキストのローカル版を読み込みます。

詳細については、[Auth0 CLI ACUL](https://auth0.github.io/auth0-cli/auth0_acul_dev.html) のドキュメントを参照してください。