<AuthPage>
<AuthPage>
component from refine for Ant Design contains authentication pages that can be used for the login, register, forgot password, and update password actions.
Before using <AuthPage>
component you need to add authProvider that will be used to handle authentication.
You can swizzle this component to customize it with the refine CLI
Usage
The <AuthPage>
component can be used like this:
Types
The <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
- a 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.
After form submission, the login
method of the authProvider
will be called with the form values.
import { AuthBindings } from "@refinedev/core";
const authProvider: AuthBindings = {
// --
login: async ({ email, password, remember, providerName }) => {
// You can handle the login process according to your needs.
// If the process is successful.
return {
success: true,
};
return {
success: false,
error: {
name: "Login Error",
message: "Invalid email or password",
},
};
},
// --
};
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"
:
After form submission, the register
method of the authProvider
will be called with the form values.
import { AuthBindings } from "@refinedev/core";
const authProvider: AuthBindings = {
// --
register: async ({ email, password, providerName }) => {
// You can handle the register process according to your needs.
// If the process is successful.
return {
success: true,
};
return {
success: false,
error: {
name: "Register Error",
message: "Invalid email or password",
},
};
},
// --
};
ForgotPassword
The forgotPassword
type is a page that allows users to reset their passwords. You can use this page to reset your password.
After form submission, the forgotPassword
method of the authProvider
will be called with the form values.
import { AuthBindings } from "@refinedev/core";
const authProvider: AuthBindings = {
// --
forgotPassword: async ({ email }) => {
// You can handle the reset password process according to your needs.
// If the process is successful.
return {
success: true,
};
return {
success: false,
error: {
name: "Register Error",
message: "Invalid email",
},
};
},
// --
};
UpdatePassword
The updatePassword
type is the page used to update the password of the user.
After form submission, the updatePassword
method of the authProvider
will be called with the form values.
import { AuthBindings } from "@refinedev/core";
const authProvider: AuthBindings = {
// --
updatePassword: async ({ password, confirmPassword }) => {
// You can handle the update password process according to your needs.
// If the process is successful.
return {
success: true,
};
return {
success: false,
error: {
name: "Login Error",
message: "Invalid email or password",
},
};
},
// --
};
Props
providers
The providers
property is only available for types login
and register
.
The providers
property defines the list of providers used to handle login authentication. providers
accepts an array of Provider
type.
const MyLoginPage = () => {
return (
<AuthPage
type="login"
providers={[
{
name: "google",
icon: GoogleIcon,
label: "Sign in with Google",
},
{
name: "github",
icon: GithubIcon,
label: "Sign in with GitHub",
},
]}
/>
);
};
For more information, refer to the Interface section →
rememberMe
The rememberMe
property is only available for type login
.
The rememberMe
property defines to render your custom <RememberMe>
component or you can pass false
to don't render it.
You have to wrap your custom <RememberMe>
component with the Form.Item
component from Ant Design and pass the name
prop to it then you can access its value from the formProps
onFinish
function with formValues
.
const MyLoginPage = () => {
return (
<AuthPage
type="login"
rememberMe={
<div
style={{
border: "1px dashed cornflowerblue",
padding: 3,
}}
>
<Form.Item name="remember" valuePropName="checked" noStyle>
<Checkbox>Custom remember me</Checkbox>
</Form.Item>
</div>
}
/>
);
};
loginLink
The loginLink
property is only available for types register
and forgotPassword
.
The loginLink
property defines the link to the login page and also you can give a node to render. The default value is "/login"
.
const MyRegisterPage = () => {
return (
<AuthPage
type="register"
loginLink={
<div
style={{
border: "1px dashed cornflowerblue",
padding: 3,
}}
>
<Link to="/login">Login</Link>
</div>
}
/>
);
};
registerLink
The registerLink
property is only available for type login
.
The registerLink
property defines the link to the registration page and also you can give a node to render. The default value is "/register"
.
const MyLoginPage = () => {
return (
<AuthPage
type="login"
registerLink={
<div
style={{
border: "1px dashed cornflowerblue",
marginTop: 5,
padding: 5,
}}
>
<Link to="/register">Register</Link>
</div>
}
/>
);
};
forgotPasswordLink
The forgotPasswordLink
property is only available for type login
.
The forgotPasswordLink
property defines the link to the forgot password page and also you can give a node to render. Its default value is "/forgot-password"
.
const MyLoginPage = () => {
return (
<AuthPage
type="login"
forgotPasswordLink={
<div
style={{
border: "1px dashed cornflowerblue",
marginTop: 5,
padding: 5,
}}
>
<Link to="/forgot-password">Forgot Password</Link>
</div>
}
/>
);
};
wrapperProps
The wrapperProps
is used for passing props to the wrapper component. In the example below you can see that the background color is changed with wrapperProps
const MyLoginPage = () => {
return (
<AuthPage
type="login"
wrapperProps={{
style: {
background: "#331049",
},
}}
/>
);
};
contentProps
The contentProps
is used 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
.
const MyLoginPage = () => {
return (
<AuthPage
type="login"
contentProps={{
title: "Login",
headStyle: {
background: "cornflowerblue",
color: "white",
},
bodyStyle: {
background: "#673ab742",
},
}}
/>
);
};
formProps
The formProps
is used 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.
const MyLoginPage = () => {
return (
<AuthPage
type="login"
formProps={{
initialValues: {
email: "demo@refine.dev",
password: "demo",
},
onFinish: (formValues) =>
alert(JSON.stringify(formValues, null, 2)),
}}
/>
);
};
title
By default, AuthPage
uses text with icon on top of page. You can use this property to change the default title.
- Default text is: refine Project
- Default icon is: refine Logo
import { AuthPage, ThemedTitle} from "@refinedev/antd";
const MyLoginPage = () => {
return <AuthPage type="login" title={<h1>My Title</h1>} />;
};
Or you can customize the title with the ThemedTitle
component.
import { AuthPage } from "@refinedev/antd";
const MyLoginPage = () => {
return (
<AuthPage
type="login"
title={
<ThemedTitleV2
title="My Title"
icon={<img src="https://refine.dev/img/logo.png" />}
/>
}
/>
);
};
renderContent
renderContent
is used to render the form content and the title. You can use this property to render your own content, or change the default content and title that it gives you.
import { AuthPage } from "@refinedev/antd";
const MyLoginPage = () => {
return (
<AuthPage
type="login"
renderContent={(
content: React.ReactNode,
title: React.ReactNode,
) => {
return (
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
}}
>
{title}
<h1 style={{ color: "white" }}>Extra Header</h1>
{content}
<h1 style={{ color: "white" }}>Extra Footer</h1>
</div>
);
}}
/>
);
};
FAQ
How can I remove the default title and logo ?
You can use the renderContent
property to remove the default title and logo.
import { AuthPage } from "@refinedev/antd";
const MyLoginPage = () => {
return (
<AuthPage
type="login"
renderContent={(
content: React.ReactNode,
title: React.ReactNode, // not return
) => {
return content;
}}
/>
);
};
Or you can give false
to the title
property to remove the default title.
import { AuthPage } from "@refinedev/antd";
const MyLoginPage = () => {
return (
<AuthPage
type="login"
title={false}
/>
);
};
API Reference
Properties
Interface
interface OAuthProvider {
name: string;
icon?: React.ReactNode;
label?: string;
}