Version: 4.xx.xx

3. Auth Pages

http://localhost:3000

window.__refineAuthStatus = false

const authProvider = {
  login: async () => {
    window.__refineAuthStatus = true
    return {
      success: true,
      redirectTo: '/',
    }
  },
  register: async () => {
    return {
      success: true,
    }
  },
  forgotPassword: async () => {
    return {
      success: true,
    }
  },
  updatePassword: async () => {
    return {
      success: true,
    }
  },
  logout: async () => {
    window.__refineAuthStatus = false
    return {
      success: true,
      redirectTo: '/',
    }
  },
  check: async () => {
    return {
      authenticated: window.__refineAuthStatus ? true : false,
      redirectTo: window.__refineAuthStatus ? undefined : '/login',
    }
  },
  onError: async (error) => {
    console.error(error)
    return { error }
  },
  getPermissions: async () => null,
  getIdentity: async () => null,
}

import { Refine, Authenticated, AuthPage } from '@refinedev/core'
import routerBindings, {
  NavigateToResource,
  CatchAllNavigate,
} from '@refinedev/react-router-v6'
import dataProvider from '@refinedev/simple-rest'
import { HeadlessInferencer } from '@refinedev/inferencer/headless'

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',
            show: '/blog-posts/show/:id',
            edit: '/blog-posts/edit/:id',
            create: '/blog-posts/create',
          },
        ]}
      >
        <Routes>
          <Route
            element={
              <Authenticated fallback={<CatchAllNavigate to="/login" />}>
                <Outlet />
              </Authenticated>
            }
          >
            <Route path="blog-posts">
              <Route index element={<HeadlessInferencer />} />
              <Route path="show/:id" element={<HeadlessInferencer />} />
              <Route path="edit/:id" element={<HeadlessInferencer />} />
              <Route path="create" element={<HeadlessInferencer />} />
            </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>
  )
}

In this section, we will learn how to create auth pages such as login, signup, forgot password and reset password using the <AuthPage/> component.

Refer to the <AuthPage/> documentation for more information &#8594

<AuthPage/> component provides auth pages for login, signup, forgot password and reset password. It also provides a way to customize theses pages with various props. So, <AuthPage/> is a quick starting point for creating auth pages.

Before using <AuthPage/> component, we need to create an auth provider because <AuthPage/> component uses the auth provider to perform auth operations. However, we have already created an auth provider in the previous section. So, we will use the same auth provider for this section.

Let's create the auth pages step by step.

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.

Open src/App.tsx file and import the <AuthPage/> component.
```
import { AuthPage } from '@refinedev/core'
```

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 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>
  )
}

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

Run the app and navigate to the /login page.

http://localhost:3000

setInitialRoutes(['/login'])

render(<App />)

Register Page

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.

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

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

Run the app and navigate to the /register page.

http://localhost:3000

setInitialRoutes(['/register'])

render(<App />)

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

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

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

Run the app and navigate to the /forgot-password page.

http://localhost:3000

setInitialRoutes(['/forgot-password'])

render(<App />)

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. After submitting the form, it sends the new password and confirm password to the auth provider's updatePassword method via useUpdatePassword hook.

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

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

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

http://localhost:3000

setInitialRoutes(['/update-password'])

render(<App />)

Customizing Auth Pages

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 &#8594

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.

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

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