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 theuseLogin
hook. - Register page with type
register
which renders a register form and works with theuseRegister
hook. - Forgot password page with type
forgotPassword
which renders a forgot password form and works with theuseForgotPassword
hook. - Update password page with type
updatePassword
which renders a update password form and works with theuseUpdatePassword
hook.
Now we've refactored our application with Material UI, 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/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:
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.
import { Refine, Authenticated } from "@refinedev/core"; import routerProvider, { NavigateToResource } from "@refinedev/react-router-v6"; import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom"; 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> ); }