メインコンテンツへスキップ

開始する前に

次のものが必要です:
ACUL を使用すると、お好みのコンポーネントライブラリを使って Universal Login のプロンプト画面をカスタマイズできます。次の例では、再利用可能なコンポーネントライブラリである Shadcn と Auth0 の login-passwordless-email-code 画面を使用します。この例では、デフォルトの One-Time Password（OTP）用入力フィールドを、Shadcn の InputOTP コンポーネントに置き換えます。
  1. Auth0 CLI ツールを使用して ACUL プロジェクトを作成します。
auth0 acul init <Your-App-Name>
login-passwordless-email-code 画面を選択します。
  1. 画面の変更を編集・確認できるように、ACUL のローカル開発サーバーを起動します。
auth0 acul dev
  1. プロジェクトのルートで Shadcn を初期化します。
npx shadcn-ui@latest init
  1. CLI のプロンプトに従って、プロジェクト用の設定を格納する components.json ファイルと、src/lib/utils.ts ファイルを作成します。
  2. コンポーネントファイルを src/components/ui/input-otp.tsx に追加します。 
npx shadcn-ui@latest add input-otp
  1. コンポーネントを組み込みます: a. src/screens/login-passwordless-email-code/components/IdentifierForm.tsx に移動し、ファイルを開きます。 b. InputOTP コンポーネントをインポートし、既存の入力フィールドを置き換えます。OTP コードの state を管理し、適切なソフトウェア開発キット (SDK) のフックを使用します。
// 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 }); // コードを指定して submit メソッドを呼び出す
};

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>
);
  1. ACUL Context Inspector を使用して画面をローカルで実行し、新しいコンポーネントを確認します。
auth0 acul dev -s  login-passwordless-email-code
  1. ローカルの開発環境をテストテナントに接続し、新しい画面を実際の認証フローで試します:
auth0 acul dev --connected --screen login-passwordless-email-code
  1. 画面の指示に従ってローカルアセットをビルドし、ローカル開発サーバーを起動し、テナント上の ACUL 設定を更新します。
  2. パスワードレス認証フローをテストします。 
auth0 test login