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

ACUL を使用して任意のコンポーネントライブラリを追加し、Universal Login のプロンプト画面をカスタマイズします。

始める前に

以下が必要です。

• Universal Login と カスタムドメイン が設定された Auth0 開発テナント
• Auth0 の First Party Application
• Auth0 テナントで Identifier First Authentication を有効にしておくこと
• Node.js V22+
• 既存のテナントに対して認証済みの Auth0 CLI
• ACUL Quickstart ガイドを確認しておくこと

ACUL を使うと、任意のコンポーネントライブラリを使用して Universal Login のプロンプト画面をカスタマイズできます。以下の例では、再利用可能なコンポーネントライブラリである Shadcn と、Auth0 の login-passwordless-email-code 画面を使用します。この例では、デフォルトの OTP 入力を Shadcn の InputOTP コンポーネントに置き換えます。

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

auth0 acul init <Your-App-Name>

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

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

auth0 acul dev

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

npx shadcn-ui@latest init

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

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

npx shadcn-ui@latest add input-otp

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

// 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 を使って画面をローカルで実行し、新しいコンポーネントを確認します:

auth0 acul dev -s  login-passwordless-email-code

8. ローカルの開発環境をテストテナントに接続して、実際の認証フローで新しい画面を試します。

auth0 acul dev --connected --screen login-passwordless-email-code

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

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

auth0 test login