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

> ACUL とカスタムコンポーネントライブラリを統合する方法を学びます

# カスタムコンポーネントライブラリを統合する

<Card title="開始前の準備">
  必要なもの:

  * [Universal Login](/ja/docs/authenticate/login/auth0-universal-login) と [カスタムドメイン](/ja/docs/customize/custom-domains) が設定された Auth0 開発用テナント
  * Auth0 の [First Party Application](/ja/docs/get-started/auth0-overview/create-applications#create-applications)
  * Auth0 テナントで [Identifier First Authentication](/ja/docs/authenticate/login/auth0-universal-login/identifier-first) を有効にする
  * [Node.js](http://Node.js) V22+
  * [既存のテナントに認証済み](https://github.com/auth0/auth0-cli?tab=readme-ov-file#authenticating-to-your-tenant) の [Auth0 CLI Tool](https://github.com/auth0/auth0-cli)
  * [ACUL Quickstart ガイド](/ja/docs/customize/login-pages/advanced-customizations/quickstart)を確認すること
</Card>

ACUL を使用すると、任意のコンポーネントライブラリを使って Universal Login のプロンプト画面をカスタマイズできます。以下の例では、再利用可能なコンポーネントライブラリである [Shadcn](https://ui.shadcn.com/docs) と、Auth0 の `login-passwordless-email-code` 画面を使用します。この例では、デフォルトの OTP 入力を Shadcn の [InputOTP](https://ui.shadcn.com/docs/components/input-otp) コンポーネントに置き換えます。

1. Auth0 CLI Tool を使用して ACUL プロジェクトを作成します。

```bash theme={null}
auth0 acul init <Your-App-Name>
```

`login-passwordless-email-code` 画面を選択します

2. 画面の更新内容を編集して確認するには、ACUL のローカル開発サーバーを起動します。

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

3. プロジェクトのルートディレクトリで Shadcn を初期化します。

```bash theme={null}
npx shadcn-ui@latest init
```

4. CLI のプロンプトに従って、プロジェクトの設定を格納する `components.json` ファイルと `src/lib/utils.ts` ファイルを作成します。

5. コンポーネントのファイルを `src/components/ui/input-otp.tsx` に追加します。

```bash theme={null}
npx shadcn-ui@latest add input-otp
```

6. コンポーネントを組み込みます。
   a. `src/screens/login-passwordless-email-code/components/IdentifierForm.tsx` に移動して、ファイルを開きます。
   b. InputOTP コンポーネントをインポートし、既存の入力フィールドを置き換えます。あわせて、OTP コードの state を管理し、適切な SDK フックを使用する必要があります。

```bash theme={null}
// IdentifierForm.tsx 内
import { useState } from 'react';
import { useEmailOtpChallenge } from '@auth0/auth0-acul-react'; 
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
} from '@/components/ui/input-otp'; // ShadCN からインポート

// ... コンポーネント内
const { submit } = useEmailOtpChallenge(); 
const [otp, setOtp] = useState('');

const handleSubmit = (e) => {
  e.preventDefault();
  submit({ code: otp }); // code を指定して submit メソッドを呼び出す
};

return (
  <form onSubmit={handleSubmit}>
    {/* ... その他の UI 要素 ... */}
    <InputOTP maxLength={6} value={otp} onChange={setOtp}>
      <InputOTPGroup>
        <InputOTPSlot index={0} />
        <InputOTPSlot index={1} />
        <InputOTPSlot index={2} />
        <InputOTPSlot index={3} />
        <InputOTPSlot index={4} />
        <InputOTPSlot index={5} />
      </InputOTPGroup>
    </InputOTP>
    <Button type="submit">Verify Code</Button>
  </form>
);
```

7. ACUL Context Inspector を使用して画面をローカルで実行し、新しいコンポーネントを確認します。

```bash theme={null}
auth0 acul dev -s  login-passwordless-email-code
```

8. ライブの認証フローで新しい画面を試せるように、ローカル開発環境をテストテナントに接続します。

```bash theme={null}
auth0 acul dev --connected --screen login-passwordless-email-code
```

9. 画面の指示に従ってローカルアセットをビルドし、ローカル開発サーバーを起動して、テナントの ACUL 設定を更新します。

10. パスワードレス認証フローをテストします。

```bash theme={null}
auth0 test login
```