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 👇🏻

http://localhost:3000/login

import { Refine } from "@pankod/refine-core";
import { AuthPage, Layout } from "@pankod/refine-antd";
import routerProvider from "@pankod/refine-react-router-v6";

import { authProvider } from "./authProvider";
import { DashboardPage } from "./pages/dashboard";

const App = () => {
    return (
        <Refine
            routerProvider={routerProvider}
            authProvider={authProvider}
            LoginPage={AuthPage}
            DashboardPage={DashboardPage}
            Layout={Layout}
            resources={[{ name: "posts" }]}
        />
    );
};

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 will be used as the default type of the <AuthPage> component. The login page will be used to log in to the system.

http://localhost:3000/login

import { Refine } from "@pankod/refine-core";
import { AuthPage, Layout } from "@pankod/refine-antd";
import routerProvider from "@pankod/refine-react-router-v6";

import { authProvider } from "./authProvider";
import { DashboardPage } from "./pages/dashboard";

const App = () => {
    return (
        <Refine
            routerProvider={routerProvider}
            authProvider={authProvider}
            LoginPage={AuthPage}
            DashboardPage={DashboardPage}
            Layout={Layout}
            resources={[{ name: "posts" }]}
        />
    );
};

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":

http://localhost:3000/register

import { Refine, useNavigation } from "@pankod/refine-core";
import { AuthPage, Layout } from "@pankod/refine-antd";
import routerProvider from "@pankod/refine-react-router-v6";

import { authProvider } from "./authProvider";
import { DashboardPage } from "./pages/dashboard";

const App = () => {
    return (
        <Refine
            authProvider={authProvider}
            routerProvider={{
                ...routerProvider,
                routes: [
                    {
                        path: "/register",
                        element: <AuthPage type="register" />,
                    },
                ],
            }}
            LoginPage={AuthPage}
            DashboardPage={DashboardPage}
            Layout={Layout}
            resources={[{ name: "posts" }]}
        />
    );
};

ForgotPassword

The forgotPassword type is a page that allows users to reset their passwords. You can use this page to reset your password.

http://localhost:3000/forgot-password

import { Refine, useNavigation } from "@pankod/refine-core";
import { AuthPage, Layout } from "@pankod/refine-antd";
import routerProvider from "@pankod/refine-react-router-v6";

import { authProvider } from "./authProvider";
import { DashboardPage } from "./pages/dashboard";

const App = () => {
    return (
        <Refine
            authProvider={authProvider}
            routerProvider={{
                ...routerProvider,
                routes: [
                    {
                        path: "/forgot-password",
                        element: <AuthPage type="forgotPassword" />,
                    },
                ],
            }}
            LoginPage={AuthPage}
            DashboardPage={DashboardPage}
            Layout={Layout}
            resources={[{ name: "posts" }]}
        />
    );
};

UpdatePassword

The updatePassword type is the page used to update the password of the user.

http://localhost:3000/update-password

import { Refine, useNavigation } from "@pankod/refine-core";
import { AuthPage, Layout } from "@pankod/refine-antd";
import routerProvider from "@pankod/refine-react-router-v6";

import { authProvider } from "./authProvider";
import { DashboardPage } from "./pages/dashboard";

const App = () => {
    return (
        <Refine
            authProvider={authProvider}
            routerProvider={{
                ...routerProvider,
                routes: [
                    {
                        path: "/update-password",
                        element: <AuthPage type="updatePassword" />,
                    },
                ],
            }}
            LoginPage={AuthPage}
            DashboardPage={DashboardPage}
            Layout={Layout}
            resources={[{ name: "posts" }]}
        />
    );
};

Props

`providers`

info

providers property is only available for types login and register.

providers property defines the list of providers used to handle login authentication. providers accepts an array of Provider type. Check out the Interface section for more information.

http://localhost:3000/login

import { Refine, useRouterContext, useNavigation } from "@pankod/refine-core";
import { AuthPage, Layout, Icons } from "@pankod/refine-antd";
import routerProvider from "@pankod/refine-react-router-v6";

import { authProvider } from "./authProvider";
import { DashboardPage } from "./pages/dashboard";

const { GoogleOutlined, GithubOutlined } = Icons;

const App = () => {
    return (
        <Refine
            authProvider={authProvider}
            routerProvider={routerProvider}
            LoginPage={() => (
                <AuthPage
                    providers={[
                        {
                            name: "google",
                            icon: <GoogleOutlined />,
                            label: "Sign in with Google",
                        },
                        {
                            name: "github",
                            icon: <GithubOutlined />,
                            label: "Sign in with GitHub",
                        },
                    ]}
                />
            )}
            DashboardPage={DashboardPage}
            Layout={Layout}
            resources={[{ name: "posts" }]}
        />
    );
};

`rememberMe`

info

rememberMe property is only available for type login.

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.

http://localhost:3000/login

import { Refine, useNavigation } from "@pankod/refine-core";
import { AuthPage, Layout, Form, Checkbox } from "@pankod/refine-antd";
import routerProvider from "@pankod/refine-react-router-v6";

import { authProvider } from "./authProvider";
import { DashboardPage } from "./pages/dashboard";

const App = () => {
    return (
        <Refine
            routerProvider={routerProvider}
            authProvider={authProvider}
            LoginPage={() => (
                <AuthPage
                    rememberMe={
                        <div
                            style={{
                                border: "1px dashed cornflowerblue",
                                padding: 3,
                            }}
                        >
                            <Form.Item
                                name="remember"
                                valuePropName="checked"
                                noStyle
                            >
                                <Checkbox>Custom remember me</Checkbox>
                            </Form.Item>
                        </div>
                    }
                />
            )}
            DashboardPage={DashboardPage}
            Layout={Layout}
            resources={[{ name: "posts" }]}
        />
    );
};

`loginLink`

info

loginLink property is only available for types register and forgotPassword.

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

http://localhost:3000/register

import { Refine, useRouterContext } from "@pankod/refine-core";
import { AuthPage, Layout } from "@pankod/refine-antd";
import routerProvider from "@pankod/refine-react-router-v6";

import { authProvider } from "./authProvider";
import { DashboardPage } from "./pages/dashboard";

const Auth = (props) => {
    const { Link } = useRouterContext();

    return (
        <AuthPage
            {...props}
            loginLink={
                <div
                    style={{
                        border: "1px dashed cornflowerblue",
                        padding: 3,
                    }}
                >
                    <Link to="/login">Login</Link>
                </div>
            }
        />
    );
};

const App = () => {
    return (
        <Refine
            authProvider={authProvider}
            routerProvider={{
                ...routerProvider,
                routes: [
                    {
                        path: "/register",
                        element: <Auth type="register" />,
                    },
                ],
            }}
            LoginPage={Auth}
            DashboardPage={DashboardPage}
            Layout={Layout}
            resources={[{ name: "posts" }]}
        />
    );
};

`registerLink`

info

registerLink property is only available for type login.

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

http://localhost:3000/login

import { Refine, useRouterContext } from "@pankod/refine-core";
import { AuthPage, Layout } from "@pankod/refine-antd";
import routerProvider from "@pankod/refine-react-router-v6";

import { authProvider } from "./authProvider";
import { DashboardPage } from "./pages/dashboard";

const Auth = (props) => {
    const { Link } = useRouterContext();

    return (
        <AuthPage
            {...props}
            registerLink={
                <div
                    style={{
                        border: "1px dashed cornflowerblue",
                        marginTop: 5,
                        padding: 5,
                    }}
                >
                    <Link to="/register">Register</Link>
                </div>
            }
        />
    );
};

const App = () => {
    return (
        <Refine
            authProvider={authProvider}
            routerProvider={{
                ...routerProvider,
                routes: [
                    { path: "/register", element: <Auth type="register" /> },
                ]
            }}
            LoginPage={Auth}
            DashboardPage={DashboardPage}
            Layout={Layout}
            resources={[{ name: "posts" }]}
        />
    );
};

`forgotPasswordLink`

info

forgotPasswordLink property is only available for type login.

forgotPasswordLink property defines the link to the forgot password page and also you can give a node to render. Default value is "/forgot-password".

http://localhost:3000/login

import { Refine, useRouterContext } from "@pankod/refine-core";
import { AuthPage, Layout } from "@pankod/refine-antd";
import routerProvider from "@pankod/refine-react-router-v6";

import { authProvider } from "./authProvider";
import { DashboardPage } from "./pages/dashboard";

const Auth = (props) => {
    const { Link } = useRouterContext();

    return (
        <AuthPage
            {...props}
            forgotPasswordLink={
                <div
                    style={{
                        border: "1px dashed cornflowerblue",
                        marginTop: 5,
                        padding: 5,
                    }}
                >
                    <Link to="/register">Forgot Password</Link>
                </div>
            }
        />
    );
};

const App = () => {
    return (
        <Refine
            authProvider={authProvider}
            routerProvider={{
                ...routerProvider,
                routes: [
                    { path: "/forgot-password", element: <Auth type="forgotPassword" /> },
                ]
            }}
            LoginPage={Auth}
            DashboardPage={DashboardPage}
            Layout={Layout}
            resources={[{ name: "posts" }]}
        />
    );
};

`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

http://localhost:3000/login

import { Refine, useNavigation } from "@pankod/refine-core";
import { AuthPage, Layout } from "@pankod/refine-antd";
import routerProvider from "@pankod/refine-react-router-v6";

import { authProvider } from "./authProvider";
import { DashboardPage } from "./pages/dashboard";

const App = () => {
    return (
        <Refine
            authProvider={authProvider}
            routerProvider={routerProvider}
            LoginPage={() => (
                <AuthPage
                    wrapperProps={{
                        style: {
                            background: "#331049",
                        },
                    }}
                />
            )}
            DashboardPage={DashboardPage}
            Layout={Layout}
            resources={[{ name: "posts" }]}
        />
    );
};

`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.

http://localhost:3000/login

import { Refine, useNavigation } from "@pankod/refine-core";
import { AuthPage, Layout } from "@pankod/refine-antd";
import routerProvider from "@pankod/refine-react-router-v6";

import { authProvider } from "./authProvider";
import { DashboardPage } from "./pages/dashboard";

const App = () => {
    return (
        <Refine
            routerProvider={routerProvider}
            authProvider={authProvider}
            LoginPage={() => (
                <AuthPage
                    contentProps={{
                        title: "Login",
                        headStyle: {
                            background: "cornflowerblue",
                            color: "white",
                        },
                        bodyStyle: {
                            background: "#673ab742",
                        },
                    }}
                />
            )}
            DashboardPage={DashboardPage}
            Layout={Layout}
            resources={[{ name: "posts" }]}
        />
    );
};

`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.

http://localhost:3000/login

import { Refine, useNavigation } from "@pankod/refine-core";
import { AuthPage, Layout } from "@pankod/refine-antd";
import routerProvider from "@pankod/refine-react-router-v6";

import { authProvider } from "./authProvider";
import { DashboardPage } from "./pages/dashboard";

const App = () => {
    return (
        <Refine
            routerProvider={routerProvider}
            authProvider={authProvider}
            LoginPage={() => (
                <AuthPage
                    formProps={{
                        initialValues: {
                            email: "demo@refine.dev",
                            password: "demo",
                        },
                        onFinish: (formValues) =>
                            alert(JSON.stringify(formValues, null, 2)),
                    }}
                />
            )}
            DashboardPage={DashboardPage}
            Layout={Layout}
            resources={[{ name: "posts" }]}
        />
    );
};

`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.

http://localhost:3000/login

import { Refine, useRouterContext } from "@pankod/refine-core";
import { AuthPage, Layout } from "@pankod/refine-antd";
import routerProvider from "@pankod/refine-react-router-v6";

import { authProvider } from "./authProvider";
import { DashboardPage } from "./pages/dashboard";

const App = () => {
    return (
        <Refine
            routerProvider={routerProvider}
            authProvider={authProvider}
            LoginPage={() => (
                <AuthPage
                    contentProps={{
                        style: {
                            width: "400px",
                        },
                    }}
                    renderContent={(content: React.ReactNode) => {
                        return (
                            <div
                                style={{
                                    display: "flex",
                                    flexDirection: "column",
                                    justifyContent: "center",
                                    alignItems: "center",
                                }}
                            >
                                <h1 style={{ color: "white" }}>Extra Header</h1>
                                {content}
                                <h1 style={{ color: "white" }}>Extra Footer</h1>
                            </div>
                        );
                    }}
                />
            )}
            DashboardPage={DashboardPage}
            Layout={Layout}
            resources={[{ name: "posts" }]}
        />
    );
};

API Reference

Properties

Property	Description	Type
type	Render `<AuthPage>` forms by `type` property.	`login` \| `register` \| `forgotPassword` \| `updatePassword`
providers	Render auth logins if `type` is `"login"`.	`IProvider[]`
registerLink	A custom node that will be rendered as a register link to the `<AuthPage>`.	`React.ReactNode`
loginLink	A custom node that will be rendered as a link to the `<AuthPage>`.	`React.ReactNode`
forgotPasswordLink	A custom node that will be rendered as a forgot password link to the `<AuthPage>`.	`React.ReactNode`
wrapperProps	Wrapper element props.	`WrapperProps`
contentProps	Content wrapper element props.	`CardProps`
formProps	Props for the form component.	`FormProps`
renderContent	Gives 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;
}

Usage​

Types​

Login​

Register​

ForgotPassword​

UpdatePassword​

Props​

providers​

rememberMe​

loginLink​

registerLink​

forgotPasswordLink​

wrapperProps​

contentProps​

formProps​

renderContent​

API Reference​

Properties​

Interface​

Usage

Types

Login

Register

ForgotPassword

UpdatePassword

Props

`providers`

`rememberMe`

`loginLink`

`registerLink`

`forgotPasswordLink`

`wrapperProps`

`contentProps`

`formProps`

`renderContent`

API Reference

Properties

Interface