Authentication

Now our application is ready to use with layouts, views and notifications. Only thing left unstyled is the /login page. Refine provides <AuthPage /> components which works with Refine's auth hooks and uses the UI elements from the Ant Design.

<AuthPage /> component supports multiple views such as:

Login page with type login which renders a login form with links to the other auth pages such as forgot password and sign up and works with the useLogin hook.
Register page with type register which renders a register form and works with the useRegister hook.
Forgot password page with type forgotPassword which renders a forgot password form and works with the useForgotPassword hook.
Update password page with type updatePassword which renders a update password form and works with the useUpdatePassword hook.

Now we've refactored our application with Ant Design, we only have one thing left to do: handle notifications. Refine triggers notification in various scenarios, such as when a record is created, updated, or deleted, when there is an error from your data provider or your auth provider. It's important to provide feedback to the user when interacting with the application.

Using `<AuthPage />` Component

Now let's update our <Login /> component to use the <AuthPage /> from @refinedev/antd package. This component will provide a consistent look and feel with the rest of the application.

Update your src/pages/login.tsx file by adding the following lines:

src/pages/login.tsx

import React from "react";
import { AuthPage } from "@refinedev/antd";

export const Login = () => {
  return (
    <AuthPage
      type="login"
      formProps={{
        initialValues: {
          email: "demo@demo.com",
          password: "demodemo",
        },
      }}
    />
  );
};

Now logout and try to login again. You will see the new login page with the Ant Design components.

Summary

In this unit, we've covered the following topics:

How Refine deals with the UI libraries,
Using layouts and views to create complex UIs,
Using tailored hooks and components to manage tables, forms, buttons and fields,
Handling notifications in Refine with Ant Design's notification system,
Handling authentication pages with Refine's prebuilt <AuthPage /> components.

In the next unit, we'll learn about the additional tools and packages that Refine provides to make the developer experience even better.

Was this helpful?

import { Refine, Authenticated } from "@refinedev/core";
import routerProvider, { NavigateToResource } from "@refinedev/react-router-v6";
import {
  ThemedLayoutV2,
  ThemedTitleV2,
  useNotificationProvider,
} from "@refinedev/antd";

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

import { ConfigProvider, App as AntdApp } from "antd";

import { dataProvider } from "./providers/data-provider";
import { authProvider } from "./providers/auth-provider";

import { ShowProduct } from "./pages/products/show";
import { EditProduct } from "./pages/products/edit";
import { ListProducts } from "./pages/products/list";
import { CreateProduct } from "./pages/products/create";

import { Login } from "./pages/login";

import "antd/dist/reset.css";

export default function App(): JSX.Element {
  return (
    <BrowserRouter>
      <ConfigProvider>
        <AntdApp>
          <Refine
            dataProvider={dataProvider}
            authProvider={authProvider}
            routerProvider={routerProvider}
            notificationProvider={useNotificationProvider}
            resources={[
              {
                name: "protected-products",
                list: "/products",
                show: "/products/:id",
                edit: "/products/:id/edit",
                create: "/products/create",
                meta: { label: "Products" },
              },
            ]}
          >
            <Routes>
              <Route
                element={
                  <Authenticated
                    key="authenticated-routes"
                    redirectOnFail="/login"
                  >
                    <ThemedLayoutV2
                      Title={(props) => (
                        <ThemedTitleV2 {...props} text="Awesome Project" />
                      )}
                    >
                      <Outlet />
                    </ThemedLayoutV2>
                  </Authenticated>
                }
              >
                <Route
                  index
                  element={<NavigateToResource resource="protected-products" />}
                />
                <Route path="/products">
                  <Route index element={<ListProducts />} />
                  <Route path=":id" element={<ShowProduct />} />
                  <Route path=":id/edit" element={<EditProduct />} />
                  <Route path="create" element={<CreateProduct />} />
                </Route>
              </Route>
              <Route
                element={
                  <Authenticated key="auth-pages" fallback={<Outlet />}>
                    <NavigateToResource resource="protected-products" />
                  </Authenticated>
                }
              >
                <Route path="/login" element={<Login />} />
              </Route>
            </Routes>
          </Refine>
        </AntdApp>
      </ConfigProvider>
    </BrowserRouter>
  );
}

installing dependencies

Using <AuthPage /> Component​

Summary​

Using `<AuthPage />` Component

Summary