OptionalincludeDevErrors?: booleanAn object of type UseErrorsResult, containing:
errors — the full error list of type ErrorsResult, with helpers:
errors.byType(type, filter?) — filter by error type and optionally by field.errors.byField(field, filter?) — filter by field and optionally by type.hasError — true if any error is currently present.dismiss(id) — remove a specific error by its ID.dismissAll() — clear all tracked errors.Typical usage is inside a form or screen component where you need to reactively display errors and provide ways to dismiss them:
import { useErrors } from "@auth0/auth0-acul-react";
export function SignupForm() {
const { errors, hasError, dismiss, dismissAll } = useErrors();
return (
<div>
{hasError && (
<div className="mb-4">
{errors.byType("auth0").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>
);
}
In addition to rendering messages, you can filter by field or type:
console.log(errors.byType('validation')); // all validation errors
console.log(errors.byType('validation', { field: 'username' })); // validation errors for field 'username'
console.log(errors.byField('username')); // all errors for field 'username'
console.log(errors.byField('username', { type: 'auth0' })); // auth0 errors for field 'username'
React hook for reading and managing errors in ACUL (Advanced Customization of Universal Login). With all validation and server-side errors. It groups errors into three types:
auth0— errors returned by Auth0 or your own backend.validation— errors from client-side validation (e.g., invalid form input).configuration— errors caused by incorrect integration or SDK misuse.