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

> 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://github.com/auth0/auth0-cli)が[既存のテナントに認証済み](https://github.com/auth0/auth0-cli?tab=readme-ov-file#authenticating-to-your-tenant)であること。
  * [ACULクイックスタートガイド](/docs/ja-jp/customize/login-pages/advanced-customizations/quickstart)を確認すること。
</Card>

ACULでは、お好みのコンポーネントライブラリを使用してユニバーサルログインのプロンプト画面をカスタマイズできます。以下の例では、再利用可能なコンポーネントライブラリである[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ツールを使用して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コードの状態を管理し、適切なSDKフックを使用する必要があります。

```bash theme={null}
// In IdentifierForm.tsx
import { useState } from 'react';
import { useEmailOtpChallenge } from '@auth0/auth0-acul-react'; 
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
} from '@/components/ui/input-otp'; // Import from ShadCN

// ... inside your component
const { submit } = useEmailOtpChallenge(); 
const [otp, setOtp] = useState('');

const handleSubmit = (e) => {
  e.preventDefault();
  submit({ code: otp }); // Call the submit method with the code
};

return (
  <form onSubmit={handleSubmit}>
    {/* ... other UI elements ... */}
    <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コンテキストインスペクターを使用してローカルで画面を実行します。

```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
```