3. Auth Pages
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 →
<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
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 "@pankod/refine-chakra-ui";
Add the
<AuthPage/>
component to theroutes
prop of therouterProvider
prop of the<Refine/>
component.import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";
import {
ChakraProvider,
ErrorComponent,
Layout,
refineTheme,
ReadyPage,
useNotificationProvider,
AuthPage,
} from "@pankod/refine-chakra-ui";
import { ChakraUIInferencer } from "@pankod/refine-inferencer/chakra-ui";
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 (
<ChakraProvider theme={refineTheme}>
<Refine
notificationProvider={notificationProvider()}
routerProvider={{
...routerProvider,
routes: [{ path: "/login", element: <AuthPage /> }],
}}
dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
Layout={Layout}
ReadyPage={ReadyPage}
catchAll={<ErrorComponent />}
resources={[
{
name: "blog_posts",
list: BlogPostList,
edit: BlogPostEdit,
show: BlogPostShow,
create: BlogPostCreate,
},
]}
/>
</ChakraProvider>
);
};By default,
<AuthPage>
component renders the login page. So, we don't need to pass any props to the<AuthPage/>
component.NOTEWhen 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.
You can also use the LoginPage
prop of the <Refine/>
component to render the login page.
<Refine
authProvider={authProvider}
routerProvider={routerProvider}
...
LoginPage={AuthPage}
/>
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.
Open
src/App.tsx
file and add the<AuthPage/>
component to theroutes
prop of therouterProvider
prop of the<Refine/>
component.import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";
import {
ChakraProvider,
ErrorComponent,
Layout,
refineTheme,
ReadyPage,
useNotificationProvider,
AuthPage,
} from "@pankod/refine-chakra-ui";
import { ChakraUIInferencer } from "@pankod/refine-inferencer/chakra-ui";
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 (
<ChakraProvider theme={refineTheme}>
<Refine
notificationProvider={notificationProvider()}
routerProvider={{
...routerProvider,
routes: [
{ path: "/login", element: <AuthPage /> },
{
path: "/register",
element: <AuthPage type="register" />,
},
],
}}
dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
Layout={Layout}
ReadyPage={ReadyPage}
catchAll={<ErrorComponent />}
resources={[
{
name: "blog_posts",
list: BlogPostList,
edit: BlogPostEdit,
show: BlogPostShow,
create: BlogPostCreate,
},
]}
/>
</ChakraProvider>
);
};We need to pass the
type
prop to the<AuthPage/>
component to render the register page.NOTEWhen 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.
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.
Open
src/App.tsx
file and add the<AuthPage/>
component to theroutes
prop of therouterProvider
prop of the<Refine/>
component.import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";
import {
ChakraProvider,
ErrorComponent,
Layout,
refineTheme,
ReadyPage,
useNotificationProvider,
AuthPage,
} from "@pankod/refine-chakra-ui";
import { ChakraUIInferencer } from "@pankod/refine-inferencer/chakra-ui";
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 (
<ChakraProvider theme={refineTheme}>
<Refine
notificationProvider={notificationProvider()}
routerProvider={{
...routerProvider,
routes: [
{ path: "/login", element: <AuthPage /> },
{
path: "/register",
element: <AuthPage type="register" />,
},
{
path: "/forgot-password",
element: <AuthPage type="forgotPassword" />,
},
],
}}
dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
Layout={Layout}
ReadyPage={ReadyPage}
catchAll={<ErrorComponent />}
resources={[
{
name: "blog_posts",
list: BlogPostList,
edit: BlogPostEdit,
show: BlogPostShow,
create: BlogPostCreate,
},
]}
/>
</ChakraProvider>
);
};We need to pass the
forgotPassword
prop to the<AuthPage/>
component to render the forgot password page.NOTEWhen 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.
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.
Open
src/App.tsx
file and add the<AuthPage/>
component to theroutes
prop of therouterProvider
prop of the<Refine/>
component.import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";
import {
ChakraProvider,
ErrorComponent,
Layout,
refineTheme,
ReadyPage,
useNotificationProvider,
AuthPage,
} from "@pankod/refine-chakra-ui";
import { ChakraUIInferencer } from "@pankod/refine-inferencer/chakra-ui";
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 (
<ChakraProvider theme={refineTheme}>
<Refine
notificationProvider={notificationProvider()}
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")}
Layout={Layout}
ReadyPage={ReadyPage}
catchAll={<ErrorComponent />}
resources={[
{
name: "blog_posts",
list: BlogPostList,
edit: BlogPostEdit,
show: BlogPostShow,
create: BlogPostCreate,
},
]}
/>
</ChakraProvider>
);
};We need to pass the
updatePassword
prop to the<AuthPage/>
component to render the update password page.NOTEWhen 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.
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 →
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
@pankod/refine-chakra-ui
package.? Which package do you want to swizzle?
UI Framework
❯ @pankod/refine-chakra-uiSelect 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.