メインコンテンツへスキップ
​
useErrors(options)
ACUL (Advanced Customization of Universal Login) におけるエラーを読み取り、管理するための React フックです。 すべてのバリデーションエラーとサーバー側エラーを対象とし、エラーを次の 3 種類に分類します:
  • server — Auth0 または独自バックエンドから返されるエラー。
  • client — クライアント側バリデーションによるエラー (例: 無効なフォーム入力)。
  • developer — 誤った統合や SDK の誤用によって発生するエラー。

​
Returns

UseErrorsResultUseErrorsResult 型のオブジェクトで、次を含みます:
  • errors — ErrorsResult 型のすべてのエラー一覧で、次のヘルパーを持ちます:
    • errors.byKind(kind, filter?) — エラーの種類でフィルターし、必要に応じてフィールドでもフィルターします。
    • errors.byField(field, filter?) — フィールドでフィルターし、必要に応じて種類でもフィルターします。
  • hasError — 現在エラーが 1 つでもある場合は true。
  • dismiss(id) — 指定した ID のエラーを削除します。
  • dismissAll() — 追跡中のエラーをすべてクリアします。
一般的な利用シーンは、エラーをリアクティブに表示し、それらを解消する手段を提供する必要があるフォームや画面コンポーネント内です。

​
Supported Screens

  • useErrors フックは、すべての ACUL 画面で利用できます。
Example
import { useErrors } from "@auth0/auth0-acul-react";

export function SignupForm() {
  const { errors, hasError, dismiss, dismissAll } = useErrors();

  return (
    <div>
      {hasError && (
        <div className="mb-4">
          {errors.byKind("server").map(err => (
            <div key={err.id} className="text-red-600">
              {err.message}
              <button onClick={() => dismiss(err.id)}>Dismiss</button>
            </div>
          ))}
        </div>
      )}

      <button onClick={dismissAll}>Clear All Errors</button>
    </div>
  );
}
メッセージをレンダリングすることに加えて、フィールドや種類でフィルターすることもできます:
console.log(errors.byKind('client')); // すべての client エラー
console.log(errors.byKind('client', { field: 'username' })); // field 'username' に対する client エラー
console.log(errors.byField('username')); // field 'username' に対するすべてのエラー
console.log(errors.byField('username', { kind: 'server' })); // field 'username' に対する server エラー