Skip to main content
RefineTutorial

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 Material UI.

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

Using <AuthPage /> Component​

Now let's update our <Login /> component to use the <AuthPage /> from @refinedev/mui 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/mui";

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

Now logout and try to login again. You will see the new login page with the Material UI 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,
  • Using @refinedev/react-hook-form to manage forms,
  • Handling notifications in Refine with Material UI'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";

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

import {
  RefineThemes,
  ThemedLayoutV2,
  ThemedTitleV2,
  RefineSnackbarProvider,
  useNotificationProvider,
} from "@refinedev/mui";

import CssBaseline from "@mui/material/CssBaseline";
import GlobalStyles from "@mui/material/GlobalStyles";
import { ThemeProvider } from "@mui/material/styles";

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";

export default function App(): JSX.Element {
  return (
    <BrowserRouter>
      <ThemeProvider theme={RefineThemes.Blue}>
        <CssBaseline />
        <GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
        <RefineSnackbarProvider>
          <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>
        </RefineSnackbarProvider>
      </ThemeProvider>
    </BrowserRouter>
  );
}
installing dependencies
installing dependencies