3. Auth Pages

In this section, we will learn how to create auth pages such as login, signup, forgot password and reset password using the <AuthPage/> component.

Refer to the <AuthPage/> documentation for more information →

<AuthPage/> component provides auth pages for login, signup, forgot password and reset password. It also provides a way to customize theses pages with various props. So, <AuthPage/> is a quick starting point for creating auth pages.

Before using <AuthPage/> component, we need to create an auth provider because <AuthPage/> component uses the auth provider to perform auth operations. However, we have already created an auth provider in the previous section. So, we will use the same auth provider for this section.

Let's create the auth pages step by step.

Login page is used to authenticate users. It provides a basic form to enter email, password and remember. After submitting the form, it sends the email, password and remember to the auth provider's login method via useLogin hook.

Open src/App.tsx file and import the <AuthPage/> component.

import { AuthPage } from "@pankod/refine-mantine";

Add the <AuthPage/> component to the routes prop of the routerProvider prop of the <Refine/> component.

import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";
import {
  MantineProvider,
  Global,
  NotificationsProvider,
  useNotificationProvider,
  LightTheme,
  Layout,
  ReadyPage,
  ErrorComponent,
  AuthPage,
} from "@pankod/refine-mantine";

import { BlogPostList } from "pages/blog-posts/list";
import { BlogPostEdit } from "pages/blog-posts/edit";
import { BlogPostShow } from "pages/blog-posts/show";
import { BlogPostCreate } from "pages/blog-posts/create";

import { authProvider } from "./authProvider";

const App = () => {
  return (
    <MantineProvider theme={LightTheme} withNormalizeCSS withGlobalStyles>
      <Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
      <NotificationsProvider position="top-right">
        <Refine
          authProvider={authProvider}
          routerProvider={{
            ...routerProvider,
            routes: [{ path: "/login", element: <AuthPage /> }],
          }}
          dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
          notificationProvider={useNotificationProvider}
          ReadyPage={ReadyPage}
          catchAll={<ErrorComponent />}
          Layout={Layout}
          resources={[
            {
              name: "blog_posts",
              list: BlogPostList,
              edit: BlogPostEdit,
              show: BlogPostShow,
              create: BlogPostCreate,
            },
          ]}
        />
      </NotificationsProvider>
    </MantineProvider>
  );
};

By default, <AuthPage> component renders the login page. So, we don't need to pass any props to the <AuthPage/> component.

NOTE

When the user submits the login form, it passes the email, password and remember to the auth provider's login method like below:

const authProvider = {
    login: ({ email, password, remember }) => {
        ...
    },
    ...
};

Run the app and navigate to the /login page.

localhost:3000/login

Live previews only work with the latest documentation.

TIP

You can also use the LoginPage prop of the <Refine/> component to render the login page.

<Refine
    authProvider={authProvider}
    routerProvider={routerProvider}
    ...
    LoginPage={AuthPage}
/>

Refer to the <Refine/> documentation for more information →

Register Page

Register page is used to register new users. It provides a basic form to enter email and password. After submitting the form, it sends the email and password to the auth provider's register method via useRegister hook.

Open src/App.tsx file and add the <AuthPage/> component to the routes prop of the routerProvider prop of the <Refine/> component.

import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";
import {
  MantineProvider,
  Global,
  NotificationsProvider,
  useNotificationProvider,
  LightTheme,
  Layout,
  ReadyPage,
  ErrorComponent,
  AuthPage,
} from "@pankod/refine-mantine";

import { BlogPostList } from "pages/blog-posts/list";
import { BlogPostEdit } from "pages/blog-posts/edit";
import { BlogPostShow } from "pages/blog-posts/show";
import { BlogPostCreate } from "pages/blog-posts/create";

import { authProvider } from "./authProvider";

const App = () => {
  return (
    <MantineProvider theme={LightTheme} withNormalizeCSS withGlobalStyles>
      <Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
      <NotificationsProvider position="top-right">
        <Refine
          authProvider={authProvider}
          routerProvider={{
            ...routerProvider,
            routes: [
              { path: "/login", element: <AuthPage /> },
              {
                path: "/register",
                element: <AuthPage type="register" />,
              },
            ],
          }}
          dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
          notificationProvider={useNotificationProvider}
          ReadyPage={ReadyPage}
          catchAll={<ErrorComponent />}
          Layout={Layout}
          resources={[
            {
              name: "blog_posts",
              list: BlogPostList,
              edit: BlogPostEdit,
              show: BlogPostShow,
              create: BlogPostCreate,
            },
          ]}
        />
      </NotificationsProvider>
    </MantineProvider>
  );
};

We need to pass the type prop to the <AuthPage/> component to render the register page.

NOTE

When the user submits the register form, it passes the email and password to the auth provider's register method like below:

const authProvider = {
    register: ({ email, password }) => {
        ...
    },
    ...
};

Run the app and navigate to the /register page.

localhost:3000/register

Live previews only work with the latest documentation.

Forgot Password Page

Forgot password page is used to send a reset password link to the user's email. It provides a basic form to enter email. After submitting the form, it sends the email to the auth provider's forgotPassword method via useForgotPassword hook.

Open src/App.tsx file and add the <AuthPage/> component to the routes prop of the routerProvider prop of the <Refine/> component.

import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";
import {
  MantineProvider,
  Global,
  NotificationsProvider,
  useNotificationProvider,
  LightTheme,
  Layout,
  ReadyPage,
  ErrorComponent,
  AuthPage,
} from "@pankod/refine-mantine";

import { BlogPostList } from "pages/blog-posts/list";
import { BlogPostEdit } from "pages/blog-posts/edit";
import { BlogPostShow } from "pages/blog-posts/show";
import { BlogPostCreate } from "pages/blog-posts/create";

import { authProvider } from "./authProvider";

const App = () => {
  return (
    <MantineProvider theme={LightTheme} withNormalizeCSS withGlobalStyles>
      <Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
      <NotificationsProvider position="top-right">
        <Refine
          authProvider={authProvider}
          routerProvider={{
            ...routerProvider,
            routes: [
              { path: "/login", element: <AuthPage /> },
              {
                path: "/register",
                element: <AuthPage type="register" />,
              },
              {
                path: "/forgot-password",
                element: <AuthPage type="forgotPassword" />,
              },
            ],
          }}
          dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
          notificationProvider={useNotificationProvider}
          ReadyPage={ReadyPage}
          catchAll={<ErrorComponent />}
          Layout={Layout}
          resources={[
            {
              name: "blog_posts",
              list: BlogPostList,
              edit: BlogPostEdit,
              show: BlogPostShow,
              create: BlogPostCreate,
            },
          ]}
        />
      </NotificationsProvider>
    </MantineProvider>
  );
};

We need to pass the forgotPassword prop to the <AuthPage/> component to render the forgot password page.

NOTE

When the user submits the forgot password form, it passes the email to the auth provider's forgotPassword method like below:


const authProvider = {
    forgotPassword: ({ email }) => {
        ...
    },
    ...
};

Run the app and navigate to the /forgot-password page.

localhost:3000/forgot-password

Live previews only work with the latest documentation.

Update Password Page

Update password page is used to update the user's password. It provides a basic form to enter new password and confirm password. After submitting the form, it sends the new password and confirm password to the auth provider's updatePassword method via useUpdatePassword hook.

Open src/App.tsx file and add the <AuthPage/> component to the routes prop of the routerProvider prop of the <Refine/> component.

import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";
import {
  MantineProvider,
  Global,
  NotificationsProvider,
  useNotificationProvider,
  LightTheme,
  Layout,
  ReadyPage,
  ErrorComponent,
  AuthPage,
} from "@pankod/refine-mantine";

import { BlogPostList } from "pages/blog-posts/list";
import { BlogPostEdit } from "pages/blog-posts/edit";
import { BlogPostShow } from "pages/blog-posts/show";
import { BlogPostCreate } from "pages/blog-posts/create";

import { authProvider } from "./authProvider";

const App = () => {
  return (
    <MantineProvider theme={LightTheme} withNormalizeCSS withGlobalStyles>
      <Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
      <NotificationsProvider position="top-right">
        <Refine
          authProvider={authProvider}
          routerProvider={{
            ...routerProvider,
            routes: [
              { path: "/login", element: <AuthPage /> },
              {
                path: "/register",
                element: <AuthPage type="register" />,
              },
              {
                path: "/forgot-password",
                element: <AuthPage type="forgotPassword" />,
              },
              {
                path: "/update-password",
                element: <AuthPage type="updatePassword" />,
              },
            ],
          }}
          dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
          notificationProvider={useNotificationProvider}
          ReadyPage={ReadyPage}
          catchAll={<ErrorComponent />}
          Layout={Layout}
          resources={[
            {
              name: "blog_posts",
              list: BlogPostList,
              edit: BlogPostEdit,
              show: BlogPostShow,
              create: BlogPostCreate,
            },
          ]}
        />
      </NotificationsProvider>
    </MantineProvider>
  );
};

We need to pass the updatePassword prop to the <AuthPage/> component to render the update password page.

NOTE

When the user submits the update password form, it passes the new password and confirm password to the auth provider's updatePassword method like below:

const authProvider = {
    updatePassword: ({ password, confirmPassword }) => {
        ...
    },
    ...
};

Run the app and navigate to the /update-password page.

localhost:3000/update-password

Live previews only work with the latest documentation.

Customizing Auth Pages

You can customize the auth pages by using the <AuthPage/> component's props. Also, you can use refine-cli to swizzle the auth pages.

Refer to the <AuthPage/> component's props to customize the auth pages →

When you swizzle the auth pages, default auth pages will be copied to the components/pages/auth folder. You can customize the auth pages as you want by editing the files.

Let's customize the auth pages.

Run the following command in the project directory.
```
npm run refine swizzle
```

Select the @pankod/refine-mantine package.

    ? Which package do you want to swizzle?
    UI Framework
    ❯  @pankod/refine-mantine

Select the AuthPage component.

    ? Which component do you want to swizzle?
    Pages
       ErrorPage
    ❯  AuthPage

After swizzling the auth pages, you will show the success message like below.

    Successfully swizzled AuthPage

    Files created:
    - src/components/pages/auth/index.tsx
    - src/components/pages/auth/components/forgotPassword.tsx
    - src/components/pages/auth/components/login.tsx
    - src/components/pages/auth/components/register.tsx
    - src/components/pages/auth/components/updatePassword.tsx
    - src/components/pages/auth/components/index.tsx
    - src/components/pages/auth/components/styles.ts
    ...

Now, you can customize the auth pages by editing the files in the src/components/pages/auth folder.

Checklist

I understood how to use AuthPage component to render auth pages.

I understood how to customize auth pages.

Login Page​

Register Page​

Forgot Password Page​

Update Password Page​

Customizing Auth Pages​

Checklist

Login Page

Register Page

Forgot Password Page

Update Password Page

Customizing Auth Pages