Auth
Ready to use authentication forms.
Props
Auth Props
| Prop | Type | Default | Description |
|---|---|---|---|
| backLink | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | Back to log in | Back to log in link |
| children | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | The child component | |
| context | object | ||
| criteriaMode | CriteriaMode | ||
| defaultView | ViewType | login | The default view to show. |
| 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 | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | Render custom elements under the submit button | |
| forgotLink | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | Forgot password? | The forgot password link |
| formRef | type ONLY_FOR_FORMAT =
| ((
instance: UseFormReturn<any, object> | null,
) => void | (() => VoidOrUndefinedOnly))
| RefObject<UseFormReturn<any, object>> | The Hook Form state ref. | |
| loginLink | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | 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
keepIsValidating: 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 | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | Sign up | Customize the signup link under the log in form. |
| title | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | The form title | |
| translations | Partial<{ signup: string signupSubmit: string; signupSuccess: string; signupSuccessDescription: string; login: string; loginSubmit: string; magicLinkSuccess: string; magicLinkSuccessDescription: string; ... 21 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?