Skip to main content
Version: 3.xx.xx

<AuthPage>

<AuthPage> component from refine 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 this:

Types​

<AuthPage> component has the following types:

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

Login​

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

registerLink property defines the link to the registration page and also you can give a node to render.

forgotPasswordLink property defines the link to the forgot password page and also you can a give node to render.

backLink property defines the render ReactNode that will be used as a back link and also you can give a node to render.

submitButton​

submitButton render your custom ReactNode to submit the form. Also, you can reach form values with the onClick property and use your own logic to submit the form.

providers​

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

info

If you want to use providers then you need to handle your provider name to use social authentication in thelogin method from authProvider that will be used to handle authentication. providerName is the name of the selected provider from your list of providers.

const authProvider: AuthProvider = {
...
login: ({ providerName }) => {
if (providerName === "github") {
window.location.href = "https://example.com/auth/github"; // your github auth url
return Promise.resolve(false);
}
}
}

Register​

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

loginLink property defines the link to the login page and also you can give a node to render.

backLink property defines the render ReactNode that will be used as a back link and also you can give a node to render.

submitButton​

submitButton render your custom ReactNode to submit the form. Also, you can reach form values with the onClick property and use your own logic to submit the form.

Reset Password​

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

backLink property defines the render ReactNode that will be used as a back link and also you can give a node to render.

submitButton​

submitButton render your custom ReactNode to submit the form. Also, you can reach form values with the onClick property and use your own logic to submit the form.

Update Password​

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

backLink property defines the render ReactNode that will be used as a back link and also you can give a node to render.

submitButton​

submitButton render your custom ReactNode to submit the form. Also, you can reach form values with the onClick property and use your own logic to submit the form.

API Reference​

Properties​

PropertyDescriptionType
typeRender <AuthPage> forms by type property.login | register | forgotPassword | updatePassword
registerLinkCustom node that will be rendered as a register link to the <AuthPage>.React.ReactNode
loginLinkCustom node that will be rendered as a link to the <AuthPage>.React.ReactNode
forgotPasswordLinkCustom node that will be rendered as a forgot password link to the <AuthPage>.React.ReactNode
updatePasswordLinkCustom node that will be rendered as a update password link to the <AuthPage>.React.ReactNode
submitButtonCustom node that will be used to submit form.React.ReactNode
backLinkCustom node that will be displayed as a back link.React.ReactNode
providersRender social logins if type is "login".IProvider[]

Interface​

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