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.

It will allow us to easily create and customize them with various props. Though we do need to have an auth provider to use it, since we already created one in the previous section, we will just use that.

For more information, refer to the <AuthPage/> documentation →

Login page is used for authenticating the users. It provides a basic form to enter email, password and remember, which it sends to auth provider’s login method via the useLogin hook.

To implement the page, open src/App.tsx file and import the <AuthPage/> component.

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

Then place the <AuthPage/> component to the respective route inside your router.

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

import { BlogPostList } from "pages/blog-posts/list";

import { authProvider } from "./authProvider";

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

const App = () => {
  return (
    <BrowserRouter>
      <Refine
        authProvider={authProvider}
        routerProvider={routerBindings}
        dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
        resources={[
          {
            name: "blog_posts",
            list: "/blog-posts",
          },
        ]}
      >
        <Routes>
          <Route
            element={
              <Authenticated fallback={<CatchAllNavigate to="/login" />}>
                <Outlet />
              </Authenticated>
            }
          >
            <Route index element={<NavigateToResource resource="blog_posts" />} />
            <Route path="blog-posts">
              <Route index element={<BlogPostList />} />
            </Route>
          </Route>
          <Route
            element={
              <Authenticated fallback={<Outlet />}>
                <NavigateToResource />
              </Authenticated>
            }
          >
            <Route path="/login" element={<AuthPage type="login" />} />
          </Route>
        </Routes>
      </Refine>
    </BrowserRouter>
  );
};

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

NOTE

Email, password and remember are passed to the auth provider's login method like below upon login:

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

Finally, run the app and navigate to the /login page.

localhost:3000/login

Register Page

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

To implement the page, place the <AuthPage/> component to the respective route inside your router.

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

import { BlogPostList } from "pages/blog-posts/list";

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

import { authProvider } from "./authProvider";

const App = () => {
  return (
    <BrowserRouter>
      <Refine
        authProvider={authProvider}
        routerProvider={routerBindings}
        dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
        resources={[
          {
            name: "blog_posts",
            list: "/blog-posts",
          },
        ]}
      >
        <Routes>
          <Route
            element={
              <Authenticated fallback={<CatchAllNavigate to="/login" />}>
                <Outlet />
              </Authenticated>
            }
          >
            <Route index element={<NavigateToResource resource="blog_posts" />} />
            <Route path="blog-posts">
              <Route index element={<BlogPostList />} />
            </Route>
          </Route>
          <Route
            element={
              <Authenticated fallback={<Outlet />}>
                <NavigateToResource />
              </Authenticated>
            }
          >
            <Route path="/login" element={<AuthPage type="login" />} />
            <Route path="/register" element={<AuthPage type="register" />} />
          </Route>
        </Routes>
      </Refine>
    </BrowserRouter>
  );
};

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

NOTE

Email and password are passed to the auth provider's register method like below:

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

Then run the app and navigate to the /register page.

localhost:3000/register

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, which it sends to the auth provider's forgotPassword method via the useForgotPassword hook.

To implement the page, place the <AuthPage/> component to the respective route inside your router:

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

import { BlogPostList } from "pages/blog-posts/list";

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

import { authProvider } from "./authProvider";

const App = () => {
  return (
    <BrowserRouter>
      <Refine
        authProvider={authProvider}
        routerProvider={routerBindings}
        dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
        resources={[
          {
            name: "blog_posts",
            list: "/blog-posts",
          },
        ]}
      >
        <Routes>
          <Route
            element={
              <Authenticated fallback={<CatchAllNavigate to="/login" />}>
                <Outlet />
              </Authenticated>
            }
          >
            <Route index element={<NavigateToResource resource="blog_posts" />} />
            <Route path="blog-posts">
              <Route index element={<BlogPostList />} />
            </Route>
          </Route>
          <Route
            element={
              <Authenticated fallback={<Outlet />}>
                <NavigateToResource />
              </Authenticated>
            }
          >
            <Route path="/login" element={<AuthPage type="login" />} />
            <Route path="/register" element={<AuthPage type="register" />} />
            <Route path="/forgot-password" element={<AuthPage type="forgotPassword" />} />
          </Route>
        </Routes>
      </Refine>
    </BrowserRouter>
  );
};

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

NOTE

The email is passed to the auth provider's forgotPassword method like below:


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

Then run the app and navigate to the /forgot-password page.

localhost:3000/forgot-password

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, which it sends to the auth provider's updatePassword method via useUpdatePassword hook.

To implement this page, place the <AuthPage/> component to the respective route inside your router:

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

import { BlogPostList } from "pages/blog-posts/list";

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

import { authProvider } from "./authProvider";

const App = () => {
  return (
    <BrowserRouter>
      <Refine
        authProvider={authProvider}
        routerProvider={routerBindings}
        dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
        resources={[
          {
            name: "blog_posts",
            list: "/blog-posts",
          },
        ]}
      >
        <Routes>
          <Route
            element={
              <Authenticated fallback={<CatchAllNavigate to="/login" />}>
                <Outlet />
              </Authenticated>
            }
          >
            <Route index element={<NavigateToResource resource="blog_posts" />} />
            <Route path="blog-posts">
              <Route index element={<BlogPostList />} />
            </Route>
          </Route>
          <Route
            element={
              <Authenticated fallback={<Outlet />}>
                <NavigateToResource />
              </Authenticated>
            }
          >
            <Route path="/login" element={<AuthPage type="login" />} />
            <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>
  );
};

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

NOTE

The new password and confirm password are passed to the auth provider's updatePassword method like below:

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

Then run the app and navigate to the /update-password page.

localhost:3000/update-password

Customizing Auth Pages

You can use refine-cli to swizzle the auth pages and customize them:

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

Select the @refinedev/core package.

    ? Which package do you want to swizzle?
    UI Framework
    ❯  @refinedev/core

Select the AuthPage component:

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

After swizzling the auth pages, you should see a 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.

TIP

You can also customize the auth pages by using the <AuthPage> component's props.

For more information, refer to the component props section of the <AuthPage/> documentation →

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