<AuthPage />

<AuthPage> component from Refine for Chakra UI contains authentication pages that can be used to login, register, forgot password and update password.

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

Good to know:

You can swizzle this component to customize it with the Refine CLI

Usage

The <AuthPage> component can be used like this:

localhost:3000/login

import { AuthPage, ThemedLayoutV2, RefineThemes } from "@refinedev/chakra-ui";
import { Authenticated, Refine } from "@refinedev/core";
import routerProvider, {
  CatchAllNavigate,
  NavigateToResource,
} from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";

import { ChakraProvider } from "@chakra-ui/react";

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

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

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

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.

localhost:3000/login

import { Authenticated, Refine } from "@refinedev/core";
import routerProvider, {
  CatchAllNavigate,
  NavigateToResource,
} from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";

import { AuthPage, ThemedLayoutV2, RefineThemes } from "@refinedev/chakra-ui";

import { ChakraProvider } from "@chakra-ui/react";

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

import { authProvider } from "./authProvider";

import { DashboardPage } from "pages/dashboard";

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

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

src/authProvider.ts

import { AuthProvider } from "@refinedev/core";

const authProvider: AuthProvider = {
  // --
  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/register

import { Authenticated, Refine } from "@refinedev/core";
import routerProvider, {
  CatchAllNavigate,
  NavigateToResource,
} from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";

import { AuthPage, ThemedLayoutV2, RefineThemes } from "@refinedev/chakra-ui";

import { ChakraProvider } from "@chakra-ui/react";

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

import { authProvider } from "./authProvider";

import { DashboardPage } from "pages/dashboard";

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

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

src/authProvider.ts

import { AuthProvider } from "@refinedev/core";

const authProvider: AuthProvider = {
  // --
  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 { Authenticated, Refine } from "@refinedev/core";
import routerProvider, {
  CatchAllNavigate,
  NavigateToResource,
} from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";

import { AuthPage, ThemedLayoutV2, RefineThemes } from "@refinedev/chakra-ui";

import { ChakraProvider } from "@chakra-ui/react";

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

import { authProvider } from "./authProvider";

import { DashboardPage } from "pages/dashboard";

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

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

src/authProvider.ts

import { AuthProvider } from "@refinedev/core";

const authProvider: AuthProvider = {
  // --
  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 { Authenticated, Refine } from "@refinedev/core";
import routerProvider, {
  CatchAllNavigate,
  NavigateToResource,
} from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";

import { AuthPage, ThemedLayoutV2, RefineThemes } from "@refinedev/chakra-ui";

import { ChakraProvider } from "@chakra-ui/react";

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

import { authProvider } from "./authProvider";

import { DashboardPage } from "pages/dashboard";

const App = () => {
  return (
    <BrowserRouter>
      <ChakraProvider theme={RefineThemes.Blue}>
        <Refine
          dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
          routerProvider={routerProvider}
          authProvider={authProvider}
        >
          <Routes>
            <Route
              element={
                <Authenticated fallback={<CatchAllNavigate to="/login" />}>
                  <ThemedLayoutV2>
                    <Outlet />
                  </ThemedLayoutV2>
                </Authenticated>
              }
            >
              <Route index element={<DashboardPage />} />
            </Route>
            <Route
              element={
                <Authenticated fallback={<Outlet />}>
                  <NavigateToResource />
                </Authenticated>
              }
            >
              <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>
      </ChakraProvider>
    </BrowserRouter>
  );
};

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

src/authProvider.ts

import { AuthProvider } from "@refinedev/core";

const authProvider: AuthProvider = {
  // --
  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

hideForm

When you set hideForm to true, the form will be hidden. You can use this property to show only providers.

const MyLoginPage = () => {
  return (
    <AuthPage
      type="login" // or "register"
      hideForm={true}
      providers={[
        {
          name: "google",
          icon: GoogleIcon,
          label: "Sign in with Google",
        },
        {
          name: "github",
          icon: GithubIcon,
          label: "Sign in with GitHub",
        },
      ]}
    />
  );
};

providers

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. This property is only available for types login and register.

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

rememberMe

rememberMe property defines to render your own remember me component or you can pass false to don't render it. This property is only available for type login.

const MyLoginPage = () => {
  return <AuthPage rememberMe={<Checkbox>Remember Me</Checkbox>} />;
};

loginLink

loginLink property defines the link to the login page and also you can give a node to render. Default value is "/login". This property is only available for types register and forgotPassword.

const MyRegisterPage = () => {
  return (
    <AuthPage
      type="register"
      loginLink={
        <Box mb="3" bg="gray.200">
          <Link to="/login">Login</Link>
        </Box>
      }
    />
  );
};

registerLink

registerLink property defines the link to the registration page and also you can give a node to render. Default value is "/register". This property is only available for type login.

const MyLoginPage = () => {
  return (
    <AuthPage
      type="login"
      registerLink={
        <Box mb="3" bg="gray.200">
          <Link to="/register">Register</Link>
        </Box>
      }
    />
  );
};

forgotPasswordLink

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

const MyLoginPage = () => {
  return (
    <AuthPage
      type="login"
      forgotPasswordLink={
        <Box mb="3" bg="gray.200">
          <Link to="/register">Forgot Password</Link>
        </Box>
      }
    />
  );
};

wrapperProps

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
      wrapperProps={{
        bg: "tomato",
      }}
    />
  );
};

contentProps

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
      contentProps={{
        bg: "tomato",
      }}
    />
  );
};

formProps

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 onSubmit function is changed.

const MyLoginPage = () => {
  return (
    <AuthPage
      formProps={{
        defaultValues: {
          email: "test@mail.com",
        },
        onSubmit: (e: any) => {
          e.preventDefault();
          console.log("e", e.target.email.value);

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

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

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 } from "@refinedev/chakra-ui";

const MyLoginPage = () => {
  return <AuthPage type="login" title={<h1>My Title</h1>} />;
};

Or you can customize the title with ThemedTitle component.

import { AuthPage, ThemedTitle } from "@refinedev/chakra-ui";

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 title. You can use this property to render your own content or renderContent gives you default content and title you can use to add some extra elements to the content.

import { Box, Heading } from "@chakra-ui/react";
import { AuthPage } from "@refinedev/chakra-ui";

const MyLoginPage = () => {
  return (
    <AuthPage
      contentProps={{
        style: {
          width: "400px",
        },
      }}
      renderContent={(content: React.ReactNode, title: React.ReactNode) => {
        return (
          <Box
            bg="white"
            borderRadius="md"
            px="5"
            display="flex"
            flexDirection="column"
            justifyContent="center"
            alignItems="center"
          >
            <Heading color="white">Extra Header</Heading>
            {content}
            <Heading color="white">Extra Footer</Heading>
          </Box>
        );
      }}
    />
  );
};

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.	`BoxProps`
contentProps	Content wrapper element props.	`BoxProps`
formProps	Props for the form component.	[`FormPropsType`]
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 OAuthProvider {
  name: string;
  icon?: React.ReactNode;
  label?: string;
}

import { UseFormProps } from "@refinedev/react-hook-form";

interface FormPropsType extends UseFormProps {
  onSubmit?: (values: any) => void;
}

Usage​

Types​

Login​

Register​

ForgotPassword​

UpdatePassword​

Props​

hideForm​

providers​

rememberMe​

loginLink​

registerLink​

forgotPasswordLink​

wrapperProps​

contentProps​

formProps​

title​

renderContent​

API Reference​

Properties​

Interface​

Usage

Types

Login

Register

ForgotPassword

UpdatePassword

Props

hideForm

providers

rememberMe

loginLink

registerLink

forgotPasswordLink

wrapperProps

contentProps

formProps

title

renderContent

API Reference

Properties

Interface