Skip to main content
👀 Interested in the latest enterprise backend features of refine? 👉 Join now and get early access!
Documentation
Version: 4.xx.xx
Source Code

<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​

The <AuthPage> component can be used like this:

localhost:3000/login
import { Refine, AuthPage, Authenticated } from "@refinedev/core";
import dataProvider from "@refinedev/simple-rest";
import routerProvider, { CatchAllNavigate } from "@refinedev/react-router-v6";

import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";

import { authProvider } from "./authProvider";

import { DashboardPage } from "pages/dashboard";

const App = () => {
    return (
        <BrowserRouter>
            <Refine
                dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
                routerProvider={routerProvider}
                authProvider={authProvider}
            >
                <Routes>
                    <Route
                        element={
                            <Authenticated
                                fallback={<CatchAllNavigate to="/login" />}
                            >
                                <Outlet />
                            </Authenticated>
                        }
                    >
                        <Route index element={<DashboardPage />} />
                    </Route>
                    <Route element={<Authenticated fallback={<Outlet />} />}>
                        <Route path="/login" element={<AuthPage />} />
                    </Route>
                </Routes>
            </Refine>
        </BrowserRouter>
    );
};

Types​

The <AuthPage> component has the following types:

Login​

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

localhost:3000/login
import { Refine, AuthPage, Authenticated } from "@refinedev/core";
import dataProvider from "@refinedev/simple-rest";
import routerProvider, { CatchAllNavigate } from "@refinedev/react-router-v6";

import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";

import { authProvider } from "./authProvider";

import { DashboardPage } from "pages/dashboard";

const App = () => {
    return (
        <BrowserRouter>
            <Refine
                dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
                routerProvider={routerProvider}
                authProvider={authProvider}
            >
                <Routes>
                    <Route
                        element={
                            <Authenticated
                                fallback={<CatchAllNavigate to="/login" />}
                            >
                                <Outlet />
                            </Authenticated>
                        }
                    >
                        <Route index element={<DashboardPage />} />
                    </Route>
                    <Route element={<Authenticated fallback={<Outlet />} />}>
                        <Route path="/login" element={<AuthPage />} />
                    </Route>
                </Routes>
            </Refine>
        </BrowserRouter>
    );
};

After form submission, the login method of the authProvider will be called with the form values.

src/authProvider.ts
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":

localhost:3000/login
import { Refine, AuthPage, Authenticated } from "@refinedev/core";
import dataProvider from "@refinedev/simple-rest";
import routerProvider, { CatchAllNavigate } from "@refinedev/react-router-v6";

import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";

import { authProvider } from "./authProvider";

import { DashboardPage } from "pages/dashboard";

const App = () => {
    return (
        <BrowserRouter>
            <Refine
                dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
                routerProvider={routerProvider}
                authProvider={authProvider}
            >
                <Routes>
                    <Route
                        element={
                            <Authenticated
                                fallback={<CatchAllNavigate to="/login" />}
                            >
                                <Outlet />
                            </Authenticated>
                        }
                    >
                        <Route index element={<DashboardPage />} />
                    </Route>
                    <Route element={<Authenticated fallback={<Outlet />} />}>
                        <Route path="/login" element={<AuthPage />} />
                        <Route
                            path="/register"
                            element={<AuthPage type="register" />}
                        />
                    </Route>
                </Routes>
            </Refine>
        </BrowserRouter>
    );
};

After form submission, the register method of the authProvider will be called with the form values.

src/authProvider.ts
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.

localhost:3000/forgot-password
import { Refine, AuthPage, Authenticated } from "@refinedev/core";
import dataProvider from "@refinedev/simple-rest";
import routerProvider, { CatchAllNavigate } from "@refinedev/react-router-v6";

import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";

import { authProvider } from "./authProvider";

import { DashboardPage } from "pages/dashboard";

const App = () => {
    return (
        <BrowserRouter>
            <Refine
                dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
                routerProvider={routerProvider}
                authProvider={authProvider}
            >
                <Routes>
                    <Route
                        element={
                            <Authenticated
                                fallback={<CatchAllNavigate to="/login" />}
                            >
                                <Outlet />
                            </Authenticated>
                        }
                    >
                        <Route index element={<DashboardPage />} />
                    </Route>
                    <Route element={<Authenticated fallback={<Outlet />} />}>
                        <Route path="/login" element={<AuthPage />} />
                        <Route
                            path="/register"
                            element={<AuthPage type="register" />}
                        />
                        <Route
                            path="/forgot-password"
                            element={<AuthPage type="forgotPassword" />}
                        />
                    </Route>
                </Routes>
            </Refine>
        </BrowserRouter>
    );
};

After form submission, the forgotPassword method of the authProvider will be called with the form values.

src/authProvider.ts
import { AuthBindings } from "@refinedev/core";

const authProvider: AuthBindings = {
    // --
    forgotPassword: async ({ email }) => {
        // You can handle the reset password process according to your needs.

        // If process is successful.
        return {
            success: true,
        };

        return {
            success: false,
            error: {
                name: "Forgot Password Error",
                message: "Invalid email or password",
            },
        };
    },
    // --
};

UpdatePassword​

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

localhost:3000/update-password
import { Refine, AuthPage, Authenticated } from "@refinedev/core";
import dataProvider from "@refinedev/simple-rest";
import routerProvider, { CatchAllNavigate } from "@refinedev/react-router-v6";

import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";

import { authProvider } from "./authProvider";

import { DashboardPage } from "pages/dashboard";

const App = () => {
    return (
        <BrowserRouter>
            <Refine
                dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
                routerProvider={routerProvider}
                authProvider={authProvider}
            >
                <Routes>
                    <Route
                        element={
                            <Authenticated
                                fallback={<CatchAllNavigate to="/login" />}
                            >
                                <Outlet />
                            </Authenticated>
                        }
                    >
                        <Route index element={<DashboardPage />} />
                    </Route>
                    <Route element={<Authenticated fallback={<Outlet />} />}>
                        <Route path="/login" element={<AuthPage />} />
                        <Route
                            path="/register"
                            element={<AuthPage type="register" />}
                        />
                        <Route
                            path="/forgot-password"
                            element={<AuthPage type="forgotPassword" />}
                        />
                        <Route
                            path="/update-password"
                            element={<AuthPage type="updatePassword" />}
                        />
                    </Route>
                </Routes>
            </Refine>
        </BrowserRouter>
    );
};

After form submission, the updatePassword method of the authProvider will be called with the form values.

src/authProvider.ts
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: "Update Password Error",
                message: "Invalid email or password",
            },
        };
    },
    // --
};

Props​

providers​

INFORMATION

providers property is only available for login and register types.

providers property defines the list of providers used to handle login authentication. providers accepts an array of Provider type.

const LoginPage = () => {
    return (
        <AuthPage
            providers={[
                {
                    name: "github",
                    icon: <svg>{/* ... */}</svg>,
                    label: "Sign in with GitHub",
                },
                {
                    name: "google",
                    icon: <svg>{/* ... */}</svg>,
                    label: "Sign in with Google",
                },
            ]}
        />
    );
};

For more information, refer to the Interface section down below

rememberMe​

INFORMATION

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.

const LoginPage = () => {
    return (
        <AuthPage
            type="login"
            rememberMe={
                <div
                    style={{
                        border: "1px dashed cornflowerblue",
                        padding: 3,
                    }}
                >
                    <input name="CustomRememberMe" type="checkbox" /> Custom
                    remember me
                </div>
            }
        />
    );
};
INFORMATION

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. 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>
            }
        />
    );
};
INFORMATION

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. 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>
            }
        />
    );
};
INFORMATION

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. The 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​

wrapperProps uses 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:
                        "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
                    position: "absolute",
                    top: "0px",
                    right: "0px",
                    bottom: "0px",
                    left: "0px",
                },
            }}
        />
    );
};

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.

const MyLoginPage = () => {
    return (
        <AuthPage
            type="login"
            contentProps={{
                style: {
                    background:
                        "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
                },
            }}
        />
    );
};

formProps​

formProps uses for passing props to the form component.

const MyLoginPage = () => {
    return (
        <AuthPage
            type="login"
            formProps={{
                onSubmit: (e: any) => {
                    e.preventDefault();

                    const email = e.target.email.value;
                    const password = e.target.password.value;

                    alert(
                        JSON.stringify({
                            email,
                            password,
                        }),
                    );
                },
            }}
        />
    );
};

renderContent​

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

const MyLoginPage = () => {
    return (
        <AuthPage
            type="login"
            renderContent={(content: React.ReactNode) => {
                return (
                    <div
                        style={{
                            display: "flex",
                            flexDirection: "column",
                            justifyContent: "center",
                            alignItems: "center",
                        }}
                    >
                        <h1>Extra Header</h1>
                        {content}
                        <h2>Extra Footer</h2>
                    </div>
                );
            }}
        />
    );
};

API Reference​

Properties​

Interface​

interface OAuthProvider {
    name: string;
    icon?: React.ReactNode;
    label?: string;
}
Last updated on Jul 19, 2023 by Yıldıray Ünlü
Previous
useMenu
Next
<Refine>