Skip to main content
Version: 3.xx.xx

<AuthPage>

<AuthPage> component from refine for ant design contains authentication pages that can be used to login, register, forgot password and update password.

Before using <AuthPage> component you need to add authProvider that will be used to handle authentication.

Usage​

<AuthPage> component can be used like below πŸ‘‡πŸ»

Types​

<AuthPage> component has the following types:

  • login - a type of login page and default type.
  • register - a type of registration page.
  • forgotPassword - a type of forgot password page.
  • updatePassword - type of update password page.

Login​

login will be used as the default type of the <AuthPage> component. The login page will be used to log in to the system.

You can use the following props for the <AuthPage> component when the type is "login":

Default​

registerLink property defines the link to the registration page and also you can give a node to render. Default value is "/register".

providers​

providers property defines the list of providers used to handle login authentication.

rememberMe​

rememberMe property defines to render your own remember me component or you can pass false to don't render it.

info

You have to wrap your remember me component with Form.Item component from antd and pass the name prop to it then you can access its value from the formProps onFinish function with formValues.

wrapperProps​

wrapperProps uses for passing props to the wrapper component. In the example below you can see that the background color is changed with wrapperProps

contentProps​

contentProps uses for passing props to the content component which is the card component. In the example below you can see that the title, header and content styles are changed with contentProps.

formProps​

formProps uses for passing props to the form component. In the example below you can see that the initialValues are changed with formProps and also the onFinish function is changed.

renderContent​

renderContent uses to render the form content. You can use this property to render your own content or renderContent gives you default content you can use to add some extra elements to the content.

Register​

The register page will be used to register new users. You can use the following props for the <AuthPage> component when the type is "register":

Default​

loginLink property defines the link to the login page and also you can give a node to render. Default value is "/login".

wrapperProps​

wrapperProps uses for passing props to the wrapper component. In the example below you can see that the background color is changed with wrapperProps

contentProps​

contentProps uses for passing props to the content component which is the form component. In the example below you can see that the title, header and content styles are changed with contentProps.

formProps​

formProps uses for passing props to the form component. In the example below you can see that the initialValues are changed with formProps and also the onFinish function is changed.

renderContent​

renderContent uses to render the form content. You can use this property to render your own content or renderContent gives you default content you can use to add some extra elements to the content.

Forgot Password​

The forgot Password Page is a page that allows users to reset their passwords. You can use this page to reset your password.

Default​

loginLink property defines the link to the login page and also you can give a node to render. Default value is "/login".

wrapperProps​

wrapperProps uses for passing props to the wrapper component. In the example below you can see that the background color is changed with wrapperProps

contentProps​

contentProps uses for passing props to the content component which is the form component. In the example below you can see that the title, header and content styles are changed with contentProps.

formProps​

formProps uses for passing props to the form component. In the example below you can see that the initialValues are changed with formProps and also the onFinish function is changed.

renderContent​

renderContent uses to render the form content. You can use this property to render your own content or renderContent gives you default content you can use to add some extra elements to the content.

Update Password​

The update Password page is used to update the password of the user.

Default​

wrapperProps​

wrapperProps uses for passing props to the wrapper component. In the example below you can see that the background color is changed with wrapperProps

contentProps​

contentProps uses for passing props to the content component which is the form component. In the example below you can see that the title, header and content styles are changed with contentProps.

formProps​

formProps uses for passing props to the form component. In the example below you can see that the initialValues are changed with formProps and also the onFinish function is changed.

renderContent​

renderContent uses to render the form content. You can use this property to render your own content or renderContent gives you default content you can use to add some extra elements to the content.

API Reference​

Properties​

PropertyDescriptionType
typeRender <AuthPage> forms by type property.login | register | forgotPassword | updatePassword
providersRender auth logins if type is "login".IProvider[]
registerLinkA custom node that will be rendered as a register link to the <AuthPage>.React.ReactNode
loginLinkA custom node that will be rendered as a link to the <AuthPage>.React.ReactNode
forgotPasswordLinkA custom node that will be rendered as a forgot password link to the <AuthPage>.React.ReactNode
wrapperPropsWrapper element props.WrapperProps
contentPropsContent wrapper element props.CardProps
formPropsProps for the form component.FormProps
renderContentGives you default content you can use it to add some extra elements to the content.function(content: React.ReactNode) => React.ReactNode

Interface​

interface IProvider {
name: string;
icon?: React.ReactNode;
label?: string;
}