5.2. Auth Pages

This post examines how auth related actions are implemented in refine with the <Authpage /> component. We examine <AuthPage /> variants for login, register and forgotPassword methods of the auth provider object.

Auth Pages in refine​

refine provides a robust set of auth pages with <AuthPage /> components provided by the supplementary UI packages such as Material UI, Ant Design, Mantine, etc.

The <AuthPage /> component we have in use in our React admin panel app is provided by @refinedev/mui, which is refine's support package for Material UI. It comes with all required variations for login, register, forgot password pages that basically implement their respctive authProvider methods. The component used is the same <AuthPage /> component, but the UI and actions are characterized by the type prop passed to the component.

For example, the <AuthPage type="login" > implements useLogin() hook and shows only the login fields in the form.

Refer to the <AuthPage /> documentation for more information →

Login Page with <AuthPage type="login" />​

The login page is used to authenticate users. Logging in a user is carried out by the auth provider's login method, which is accessible via the useLogin() hook.

Our React admin panel app initialized by refine.new with Custom Auth option implements user login in the <Login /> component with the <AuthPage type="login" /> component. The <Login /> component looks like this:

import { AuthPage, ThemedTitleV2 } from "@refinedev/mui";
import { AppIcon } from "../../components/app-icon";

export const Login = () => {
    return (
        <AuthPage
            type="login"
            title={
                <ThemedTitleV2
                    collapsed={false}
                    text="refine Project"
                    icon={<AppIcon />}
                />
            }
            formProps={{
                defaultValues: {
                    email: "demo@refine.dev",
                    password: "demodemo",
                },
            }}
        />
    );
};

This is a simple login page that allows an email / password login. The <AuthPage type="login" /> component provides all the form fields, UI features and login functionality for a user to login. The corresponding UI for the above <Login /> looks like this:

The <AuthPage type="login" /> internally implements the useLogin() hook to access and invoke the authProvider.login method to sign a user in.

Refer to the login section in the <AuthPage /> documentation for more information →

Signup Page with <AuthPage type="register" />​

The signup / register page is used to register a user to our React admin panel app. Registering a user is carried out by the authProvider.register method, which is accessible via the useRegister() hook.

Our app implements user registration in the <Register /> component with the <AuthPage type="register" /> component. The <Register /> component looks like this:

import { AuthPage, ThemedTitleV2 } from "@refinedev/mui";
import { AppIcon } from "../../components/app-icon";

export const Register = () => {
    return (
        <AuthPage
            type="register"
            title={
                <ThemedTitleV2
                    collapsed={false}
                    text="refine Project"
                    icon={<AppIcon />}
                />
            }
        />
    );
};

This is a simple user sign up page that allows users to sign up with an email and password. The <AuthPage type="register" /> component provides necessary form fields, UI features and sign up functionality to register a user with our app. The corresponding UI for the above <Register /> component looks like this:

The <AuthPage type="register" /> uses the useRegister() hook to access and invoke the authProvider.register method to sign a user up.

Refer to the Register section in the <AuthPage /> documentation for more information →

Password Resetting with <AuthPage type="forgotPassword" />​

The forgot password page is used to reset a password. Password resetting is carried out by the authProvider.forgotPassword method, which is accessible via the useForgotPassword() hook.

Our app implements resetting password in the <ForgotPassword /> component with the <AuthPage type="forgotPassword" /> variant. The <ForgotPassword /> component looks like this:

import { AuthPage, ThemedTitleV2 } from "@refinedev/mui";
import { AppIcon } from "../../components/app-icon";

export const ForgotPassword = () => {
    return (
        <AuthPage
            type="forgotPassword"
            title={
                <ThemedTitleV2
                    collapsed={false}
                    text="refine Project"
                    icon={<AppIcon />}
                />
            }
        />
    );
};

This is a simple password reset page that allows users to renew their password with their email. The <AuthPage type="forgotPassword" /> component provides necessary form fields, UI features and reset logic for renewing a user's password. The corresponding UI for the above <ForgotPassword /> component looks like this:

The <AuthPage type="forgotPassword" /> uses the useForgotPassword() hook to access and invoke the authProvider.forgotPassword method to set a new password.

Refer to the forgot password section in the <AuthPage /> documentation for more information →