<AuthPage />

<AuthPage> component from Refine contains authentication pages that can be used to login, register, forgot password, and update password.

Before using <AuthPage> component you need to add authProvider that will be used to handle authentication.

Usage

The <AuthPage> component can be used like this:

localhost:3000/login

import { Refine, AuthPage, Authenticated } from "@refinedev/core";
import dataProvider from "@refinedev/simple-rest";
import routerProvider, { CatchAllNavigate } from "@refinedev/react-router";

import { BrowserRouter, Routes, Route, Outlet } from "react-router";

import { authProvider } from "./authProvider";

import { DashboardPage } from "pages/dashboard";

const App = () => {
  return (
    <BrowserRouter>
      <Refine
        dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
        routerProvider={routerProvider}
        authProvider={authProvider}
      >
        <Routes>
          <Route
            element={
              <Authenticated fallback={<CatchAllNavigate to="/login" />}>
                <Outlet />
              </Authenticated>
            }
          >
            <Route index element={<DashboardPage />} />
          </Route>
          <Route element={<Authenticated fallback={<Outlet />} />}>
            <Route path="/login" element={<AuthPage />} />
          </Route>
        </Routes>
      </Refine>
    </BrowserRouter>
  );
};

Types

The <AuthPage> component has the following types:

login - a type of login page and default type.
register - a type of registration page.
forgotPassword - a type of forgot password page.
updatePassword - a type of update password page.

You can use the following props for the <AuthPage> component when the type is "login":

localhost:3000/login

import { Refine, AuthPage, Authenticated } from "@refinedev/core";
import dataProvider from "@refinedev/simple-rest";
import routerProvider, { CatchAllNavigate } from "@refinedev/react-router";

import { BrowserRouter, Routes, Route, Outlet } from "react-router";

import { authProvider } from "./authProvider";

import { DashboardPage } from "pages/dashboard";

const App = () => {
  return (
    <BrowserRouter>
      <Refine
        dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
        routerProvider={routerProvider}
        authProvider={authProvider}
      >
        <Routes>
          <Route
            element={
              <Authenticated fallback={<CatchAllNavigate to="/login" />}>
                <Outlet />
              </Authenticated>
            }
          >
            <Route index element={<DashboardPage />} />
          </Route>
          <Route element={<Authenticated fallback={<Outlet />} />}>
            <Route path="/login" element={<AuthPage />} />
          </Route>
        </Routes>
      </Refine>
    </BrowserRouter>
  );
};

After form submission, the login method of the authProvider will be called with the form values.

src/authProvider.ts

import { AuthProvider } from "@refinedev/core";

const authProvider: AuthProvider = {
  // --
  login: async ({ email, password, remember, providerName }) => {
    // You can handle the login process according to your needs.

    // If the process is successful.
    return {
      success: true,
    };

    return {
      success: false,
      error: {
        name: "Login Error",
        message: "Invalid email or password",
      },
    };
  },
  // --
};

Register

The register page will be used to register new users. You can use the following props for the <AuthPage> component when the type is "register":

localhost:3000/login

import { Refine, AuthPage, Authenticated } from "@refinedev/core";
import dataProvider from "@refinedev/simple-rest";
import routerProvider, { CatchAllNavigate } from "@refinedev/react-router";

import { BrowserRouter, Routes, Route, Outlet } from "react-router";

import { authProvider } from "./authProvider";

import { DashboardPage } from "pages/dashboard";

const App = () => {
  return (
    <BrowserRouter>
      <Refine
        dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
        routerProvider={routerProvider}
        authProvider={authProvider}
      >
        <Routes>
          <Route
            element={
              <Authenticated fallback={<CatchAllNavigate to="/login" />}>
                <Outlet />
              </Authenticated>
            }
          >
            <Route index element={<DashboardPage />} />
          </Route>
          <Route element={<Authenticated fallback={<Outlet />} />}>
            <Route path="/login" element={<AuthPage />} />
            <Route path="/register" element={<AuthPage type="register" />} />
          </Route>
        </Routes>
      </Refine>
    </BrowserRouter>
  );
};

After form submission, the register method of the authProvider will be called with the form values.

src/authProvider.ts

import { AuthProvider } from "@refinedev/core";

const authProvider: AuthProvider = {
  // --
  register: async ({ email, password, providerName }) => {
    // You can handle the register process according to your needs.

    // If the process is successful.
    return {
      success: true,
    };

    return {
      success: false,
      error: {
        name: "Register Error",
        message: "Invalid email or password",
      },
    };
  },
  // --
};

ForgotPassword

The forgotPassword type is a page that allows users to reset their passwords. You can use this page to reset your password.

localhost:3000/forgot-password

import { Refine, AuthPage, Authenticated } from "@refinedev/core";
import dataProvider from "@refinedev/simple-rest";
import routerProvider, { CatchAllNavigate } from "@refinedev/react-router";

import { BrowserRouter, Routes, Route, Outlet } from "react-router";

import { authProvider } from "./authProvider";

import { DashboardPage } from "pages/dashboard";

const App = () => {
  return (
    <BrowserRouter>
      <Refine
        dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
        routerProvider={routerProvider}
        authProvider={authProvider}
      >
        <Routes>
          <Route
            element={
              <Authenticated fallback={<CatchAllNavigate to="/login" />}>
                <Outlet />
              </Authenticated>
            }
          >
            <Route index element={<DashboardPage />} />
          </Route>
          <Route element={<Authenticated fallback={<Outlet />} />}>
            <Route path="/login" element={<AuthPage />} />
            <Route path="/register" element={<AuthPage type="register" />} />
            <Route
              path="/forgot-password"
              element={<AuthPage type="forgotPassword" />}
            />
          </Route>
        </Routes>
      </Refine>
    </BrowserRouter>
  );
};

After form submission, the forgotPassword method of the authProvider will be called with the form values.

src/authProvider.ts

import { AuthProvider } from "@refinedev/core";

const authProvider: AuthProvider = {
  // --
  forgotPassword: async ({ email }) => {
    // You can handle the reset password process according to your needs.

    // If process is successful.
    return {
      success: true,
    };

    return {
      success: false,
      error: {
        name: "Forgot Password Error",
        message: "Invalid email or password",
      },
    };
  },
  // --
};

UpdatePassword

The updatePassword type is the page used to update the password of the user.

localhost:3000/update-password

import { Refine, AuthPage, Authenticated } from "@refinedev/core";
import dataProvider from "@refinedev/simple-rest";
import routerProvider, { CatchAllNavigate } from "@refinedev/react-router";

import { BrowserRouter, Routes, Route, Outlet } from "react-router";

import { authProvider } from "./authProvider";

import { DashboardPage } from "pages/dashboard";

const App = () => {
  return (
    <BrowserRouter>
      <Refine
        dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
        routerProvider={routerProvider}
        authProvider={authProvider}
      >
        <Routes>
          <Route
            element={
              <Authenticated fallback={<CatchAllNavigate to="/login" />}>
                <Outlet />
              </Authenticated>
            }
          >
            <Route index element={<DashboardPage />} />
          </Route>
          <Route element={<Authenticated fallback={<Outlet />} />}>
            <Route path="/login" element={<AuthPage />} />
            <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>
  );
};

After form submission, the updatePassword method of the authProvider will be called with the form values.

src/authProvider.ts

import { AuthProvider } from "@refinedev/core";

const authProvider: AuthProvider = {
  // --
  updatePassword: async ({ password, confirmPassword }) => {
    // You can handle the update password process according to your needs.

    // If the process is successful.
    return {
      success: true,
    };

    return {
      success: false,
      error: {
        name: "Update Password Error",
        message: "Invalid email or password",
      },
    };
  },
  // --
};

Props

hideForm

When you set hideForm to true, the form will be hidden. You can use this property to show only providers.

const MyLoginPage = () => {
  return (
    <AuthPage
      type="login" // or "register"
      hideForm={true}
      providers={[
        {
          name: "google",
          icon: GoogleIcon,
          label: "Sign in with Google",
        },
        {
          name: "github",
          icon: GithubIcon,
          label: "Sign in with GitHub",
        },
      ]}
    />
  );
};

providers

providers property defines the list of providers used to handle login authentication. providers accepts an array of Provider type. This property is only available for login and register types.

const LoginPage = () => {
  return (
    <AuthPage
      providers={[
        {
          name: "github",
          icon: <svg>{/* ... */}</svg>,
          label: "Sign in with GitHub",
        },
        {
          name: "google",
          icon: <svg>{/* ... */}</svg>,
          label: "Sign in with Google",
        },
      ]}
    />
  );
};

For more information, refer to the Interface section down below

rememberMe

rememberMe property defines to render your own remember me component or you can pass false to don't render it. This property is only available for login type.

const LoginPage = () => {
  return (
    <AuthPage
      type="login"
      rememberMe={
        <div
          style={{
            border: "1px dashed cornflowerblue",
            padding: 3,
          }}
        >
          <input name="CustomRememberMe" type="checkbox" /> Custom remember me
        </div>
      }
    />
  );
};

loginLink

loginLink property defines the link to the login page and also you can give a node to render. The default value is "/login". This property is only available for register and forgotPassword types.

const MyRegisterPage = () => {
  return (
    <AuthPage
      type="register"
      loginLink={
        <div
          style={{
            border: "1px dashed cornflowerblue",
            padding: 3,
          }}
        >
          <Link to="/login">Login</Link>
        </div>
      }
    />
  );
};

registerLink

registerLink property defines the link to the registration page and also you can give a node to render. The default value is "/register". This property is only available for login type.

const MyLoginPage = () => {
  return (
    <AuthPage
      type="login"
      registerLink={
        <div
          style={{
            border: "1px dashed cornflowerblue",
            marginTop: 5,
            padding: 5,
          }}
        >
          <Link to="/register">Register</Link>
        </div>
      }
    />
  );
};

forgotPasswordLink

forgotPasswordLink property defines the link to the forgot password page and also you can give a node to render. The default value is "/forgot-password". This property is only available for login type.

const MyLoginPage = () => {
  return (
    <AuthPage
      type="login"
      forgotPasswordLink={
        <div
          style={{
            border: "1px dashed cornflowerblue",
            marginTop: 5,
            padding: 5,
          }}
        >
          <Link to="/forgot-password">Forgot Password</Link>
        </div>
      }
    />
  );
};

wrapperProps

wrapperProps uses for passing props to the wrapper component. In the example below you can see that the background color is changed with wrapperProps

const MyLoginPage = () => {
  return (
    <AuthPage
      type="login"
      wrapperProps={{
        style: {
          background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
          position: "absolute",
          top: "0px",
          right: "0px",
          bottom: "0px",
          left: "0px",
        },
      }}
    />
  );
};

contentProps

contentProps uses for passing props to the content component which is the card component. In the example below you can see that the title, header, and content styles are changed with contentProps.

const MyLoginPage = () => {
  return (
    <AuthPage
      type="login"
      contentProps={{
        style: {
          background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
        },
      }}
    />
  );
};

formProps

formProps uses for passing props to the form component.

const MyLoginPage = () => {
  return (
    <AuthPage
      type="login"
      formProps={{
        onSubmit: (e: any) => {
          e.preventDefault();

          const email = e.target.email.value;
          const password = e.target.password.value;

          alert(
            JSON.stringify({
              email,
              password,
            }),
          );
        },
      }}
    />
  );
};

renderContent

renderContent is used to render the form content. You can use this property to render your own content. renderContent gives you default content you can use to add some extra elements to the content.

const MyLoginPage = () => {
  return (
    <AuthPage
      type="login"
      renderContent={(content: React.ReactNode) => {
        return (
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <h1>Extra Header</h1>
            {content}
            <h2>Extra Footer</h2>
          </div>
        );
      }}
    />
  );
};

mutationVariables

mutationVariables is used to pass additional variables to the authProvider methods.

const MyLoginPage = () => {
  return (
    <AuthPage
      type="login" // all other types are also supported.
      mutationVariables={{
        foo: "bar",
        xyz: "abc",
      }}
    />
  );
};

// all mutation methods are supported.
const authProvider = {
  login: async ({ foo, xyz, ...otherProps }) => {
    console.log(foo); // bar
    console.log(xyz); // abc
    // ...
  },
  register: async ({ foo, xyz, ...otherProps }) => {
    console.log(foo); // bar
    console.log(xyz); // abc
    // ...
  },
  // ...
};

API Reference

Properties

Property	Type	Description	Default
type	`"login" \| "register" \| "forgotPassword" \| "updatePassword"`	The type of the auth page. The type of the auth page. The type of the auth page. The type of the auth page.	"login"
providers	`OAuthProvider`	Providers array for login with third party auth services. Providers array for login with third party auth services.
registerLink	`ReactNode`	Render a redirect to register page button node. If set to false, register button will not be rendered.	`"/register"`
forgotPasswordLink	`ReactNode`	Render a redirect to forgot password page button node. If set to false, forgot password button will not be rendered.	`"/forgot-password"`
rememberMe	`ReactNode`	Render a remember me button node. If set to false, remember me button will not be rendered.
hideForm	`boolean`	Can be used to hide the form components Can be used to hide the form components
wrapperProps	`DivPropsType`	The props that will be passed to the wrapper component.
contentProps	`DivPropsType`	The props that will be passed to the content component.
renderContent	`((content: ReactNode, title: ReactNode) => ReactNode)`	This method gives you the ability to render a custom content node.
formProps	`FormPropsType`	Can be used to pass additional properties for the `Form`
title	`ReactNode`	Can be used to pass `Title`
mutationVariables	`Record<string, any>`	Can be used to pass additional variables to the mutation. This is useful when you need to pass other variables to the authProvider.
loginLink	`ReactNode`	Render a redirect to login page button node. If set to false, login button will not be rendered. render a redirect to login page button node. If set to false, login button will not be rendered.	`"/login"`

Interface

interface OAuthProvider {
  name: string;
  icon?: React.ReactNode;
  label?: string;
}

Usage​

Types​

Login​

Register​

ForgotPassword​

UpdatePassword​

Props​

hideForm​

providers​

rememberMe​

loginLink​

registerLink​

forgotPasswordLink​

wrapperProps​

contentProps​

formProps​

renderContent​

mutationVariables​

API Reference​

Properties​

Interface​

Usage

Types

Login

Register

ForgotPassword

UpdatePassword

Props

hideForm

providers

rememberMe

loginLink

registerLink

forgotPasswordLink

wrapperProps

contentProps

formProps

renderContent

mutationVariables

API Reference

Properties

Interface