3. Auth Pages

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.

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

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

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

   import { Refine, AuthPage } from "@pankod/refine-core";
   import dataProvider from "@pankod/refine-simple-rest";
   import routerProvider from "@pankod/refine-react-router-v6";
   
   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 (
       <Refine
         dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
         authProvider={authProvider}
         routerProvider={{
           ...routerProvider,
           routes: [{ path: "/login", element: <AuthPage /> }],
         }}
         resources={[
           {
             name: "blog_posts",
             list: BlogPostList,
             edit: BlogPostEdit,
             show: BlogPostShow,
             create: BlogPostCreate,
           },
         ]}
       />
     );
   };
   

   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 }) => {
           ...
       },
       ...
   };
   

3. Run the app and navigate to the /login page.

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

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.

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

   import { Refine, AuthPage } from "@pankod/refine-core";
   import dataProvider from "@pankod/refine-simple-rest";
   import routerProvider from "@pankod/refine-react-router-v6";
   
   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 (
       <Refine
         dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
         authProvider={authProvider}
         routerProvider={{
           ...routerProvider,
           routes: [
             { path: "/login", element: <AuthPage /> },
             {
               path: "/register",
               element: <AuthPage type="register" />,
             },
           ],
         }}
         dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
         resources={[
           {
             name: "blog_posts",
             list: BlogPostList,
             edit: BlogPostEdit,
             show: BlogPostShow,
             create: BlogPostCreate,
           },
         ]}
       />
     );
   };
   

   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 }) => {
           ...
       },
       ...
   };
   

2. Run the app and navigate to the /register 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.

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

   import { Refine, AuthPage } from "@pankod/refine-core";
   import dataProvider from "@pankod/refine-simple-rest";
   import routerProvider from "@pankod/refine-react-router-v6";
   
   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 (
       <Refine
         dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
         authProvider={authProvider}
         routerProvider={{
           ...routerProvider,
           routes: [
             { path: "/login", element: <AuthPage /> },
             {
               path: "/register",
               element: <AuthPage type="register" />,
             },
             {
               path: "/forgot-password",
               element: <AuthPage type="forgotPassword" />,
             },
           ],
         }}
         resources={[
           {
             name: "blog_posts",
             list: BlogPostList,
             edit: BlogPostEdit,
             show: BlogPostShow,
             create: BlogPostCreate,
           },
         ]}
       />
     );
   };
   

   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 }) => {
           ...
       },
       ...
   };
   

2. Run the app and navigate to the /forgot-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.

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

   import { Refine, AuthPage } from "@pankod/refine-core";
   import dataProvider from "@pankod/refine-simple-rest";
   import routerProvider from "@pankod/refine-react-router-v6";
   
   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 (
       <Refine
         dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
         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")}
         resources={[
           {
             name: "blog_posts",
             list: BlogPostList,
             edit: BlogPostEdit,
             show: BlogPostShow,
             create: BlogPostCreate,
           },
         ]}
       />
     );
   };
   

   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 }) => {
           ...
       },
       ...
   };
   

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

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.

1. Run the following command in the project directory.

   npm run refine swizzle
   

2. Select the @pankod/refine-core package.

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

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