> ## 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.

> サンプルプロジェクトをスキャフォールディングし、テナントにデプロイして、最初のカスタムログイン画面をレンダリングすることで、Auth0 Advanced Customizations for Universal Login を始めましょう。

# ACUL Quickstart

<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) V22
  * 開発用テナント用に設定済みの [Auth0 CLI](https://auth0.github.io/auth0-cli/)
</Card>

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

以下の手順に従って、ACUL プロジェクトと、Auth0 CLI を使用したカスタム `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. ローカル assets を共有するポートを選択します。デフォルトはポート `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 の画面をビルドし、assets をローカルでホストして、assets ディレクトリへの更新を継続的に監視することで、画面をローカルでテストできるようにします。詳しくは、[Auth0 CLI acul](https://auth0.github.io/auth0-cli/auth0_acul_dev.html) コマンドのドキュメントを参照してください。
</Callout>

1. プロジェクトのディレクトリで、`/src/index.css` を編集し、ロゴ widget をご自身のロゴ 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/translations/mMSz-RNYLuOm2GmQ/docs/images/cdy7uua7fh8z/ACUL/ULContextInspectorDownload.png?fit=max&auto=format&n=mMSz-RNYLuOm2GmQ&q=85&s=b4b206e8dc882316712860b31b556db3" 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 file` に追加します。

たとえば、ダウンロードした `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) のドキュメントを参照してください。