Auth
Ready to use authentication forms.
Props#
Auth Props#
Prop | Type | Default | Description |
---|---|---|---|
backLink | type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| PromiseLikeOfReactNode | Back to log in | Back to log in link |
children | type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| PromiseLikeOfReactNode | The child component | |
context | object | ||
criteriaMode | CriteriaMode | ||
delayError | number | ||
disabled | boolean | ||
dividerLabel | string | or continue with | Label for the divider between oath and the form |
errors | FieldErrors<any> | ||
fieldResolver | FieldResolver | The field resolver, used to resolve the fields from schemas. | |
fields | DefaultFieldOverrides | Field overrides | |
footer | type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| PromiseLikeOfReactNode | Render custom elements under the submit button | |
forgotLink | type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| PromiseLikeOfReactNode | Forgot password? | The forgot password link |
formRef | RefObject<UseFormReturn<any, object>> | The Hook Form state ref. | |
loginLink | type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| PromiseLikeOfReactNode | Log in | Customize the login link under the sign up form. |
mode | "onBlur" | "onChange" | "onSubmit" | "all" | "onTouched" | ||
onChange | WatchObserver<any> | Triggers when any of the field change. | |
onError | (view: ViewType, error: Error) => void | Called when a login or signup request fails. | |
onSuccess | (view: ViewType, data: any) => void | Called when a login or signup request succeeds. | |
onViewChange | (view: ViewType) => void | Called when the view changes. | |
progressive | boolean | ||
providerLabel | string | Continue with | Label for the provider buttons |
providers | AvailableProviders | The OAuth providers that are supported. | |
redirectUrl | string | ((view: RedirectViews) => string | undefined) | The redirect URL after succesful login This will only redirect if implemented in the auth provider. | |
resetOptions | Partial<{
keepDirtyValues: boolean
keepErrors: boolean
keepDirty: boolean
keepValues: boolean
keepDefaultValues: boolean
keepIsSubmitted: boolean
keepIsSubmitSuccessful: boolean
keepTouched: boolean
keepIsValid: boolean
keepSubmitCount: boolean
}> | ||
resolver | Resolver<any, object> | ||
reValidateMode | "onBlur" | "onChange" | "onSubmit" | ||
schema | any | The form schema. | |
shouldFocusError | boolean | ||
shouldUnregister | boolean | ||
shouldUseNativeValidation | boolean | ||
signupLink | type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| PromiseLikeOfReactNode | Sign up | Customize the signup link under the log in form. |
title | type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| PromiseLikeOfReactNode | The form title | |
translations | Partial<{ signup: string signupSubmit: string; signupSuccess: string; signupSuccessDescription: string; login: string; loginSubmit: string; magicLinkSuccess: string; magicLinkSuccessDescription: string; ... 19 more ...; confirmPassword: string; }> | Internationalization options for the auth form. | |
type | AuthTypeEnum | The authentication type, magiclink or password | |
values | any | ||
view | ViewType | Sets the visible authentication form. Supported views are: - login - signup - forgot_password - update_password - otp |
Was this helpful?