<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
<AuthPage> component can be used like this:
import { Refine, AuthPage, useNavigation } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import { authProvider } from "./authProvider";
import { DashboardPage } from "pages/dashboard";
const App = () => {
return (
<Refine
routerProvider={{
...routerProvider,
routes: [
{ path: "/login", element: <AuthPage type="login" /> },
{ path: "/register", element: <AuthPage type="register" /> },
{ path: "/forgot-password", element: <AuthPage type="forgotPassword" /> },
],
}}
authProvider={authProvider}
LoginPage={AuthPage}
DashboardPage={DashboardPage}
resources={[
{
name: "posts",
},
]}
/>
);
};
Types
<AuthPage> component has the following types:
"login" - a type of the login page and default type."register" - type of the registration page."forgotPassword" - type of the forgot password page."updatePassword" - type of the update password page.
Login
You can use the following props for the <AuthPage> component when the type is "login":
import { Refine, AuthPage } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import { authProvider } from "./authProvider";
import { DashboardPage } from "./pages/dashboard";
const App = () => {
return (
<Refine
authProvider={authProvider}
routerProvider={{
...routerProvider,
routes: [
{ path: "/login", element: <AuthPage /> }
],
}}
LoginPage={AuthPage}
DashboardPage={DashboardPage}
resources={[
name: "posts",
]}
/>
);
};
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":
import { Refine, AuthPage } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import { authProvider } from "./authProvider";
import { DashboardPage } from "./pages/dashboard";
const App = () => {
return (
<Refine
authProvider={authProvider}
routerProvider={{
...routerProvider,
routes: [
{ path: "/login", element: <AuthPage /> },
{ path: "/register", element: <AuthPage type="register" /> }
],
}}
LoginPage={AuthPage}
DashboardPage={DashboardPage}
resources={[
name: "posts",
]}
/>
);
};
ForgotPassword
The forgotPassword type is a page that allows users to reset their passwords. You can use this page to reset your password.
import { Refine, useNavigation, AuthPage } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import { authProvider } from "./authProvider";
import { DashboardPage } from "./pages/dashboard";
const App = () => {
return (
<Refine
authProvider={authProvider}
routerProvider={{
...routerProvider,
routes: [
{
path: "/forgot-password",
element: <AuthPage type="forgotPassword" />,
},
],
}}
LoginPage={AuthPage}
DashboardPage={DashboardPage}
resources={[{ name: "posts" }]}
/>
);
};
UpdatePassword
The updatePassword type is the page used to update the password of the user.
import { Refine, useNavigation, AuthPage } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import { authProvider } from "./authProvider";
import { DashboardPage } from "./pages/dashboard";
const App = () => {
return (
<Refine
authProvider={authProvider}
routerProvider={{
...routerProvider,
routes: [
{
path: "/update-password",
element: <AuthPage type="updatePassword" />,
},
],
}}
LoginPage={AuthPage}
DashboardPage={DashboardPage}
resources={[{ name: "posts" }]}
/>
);
};
Props
providers
providers property is only available for types login and register.
providers property defines the list of providers used to handle login authentication. providers accepts an array of Provider type. Check out the Interface section for more information.
import {
Refine,
useRouterContext,
useNavigation,
AuthPage,
} from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import { authProvider } from "./authProvider";
import { DashboardPage } from "./pages/dashboard";
const LoginPage = () => {
return (
<AuthPage
providers={[
{
name: "github",
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path d="M12 0a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2.2c-3.3.7-4-1.4-4-1.4-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2 0 1.9 1.2 1.9 1.2 1 1.8 2.8 1.3 3.4 1 .2-.8.5-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.3-3.1-.1-.4-.6-1.6.1-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0C17.3 4.7 18.3 5 18.3 5c.7 1.6.2 2.9.1 3.2.8.8 1.3 1.9 1.3 3.2 0 4.6-2.9 5.6-5.5 5.9.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 0z" />
</svg>
),
label: "Sign in with GitHub",
},
{
name: "google",
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="#4285F4"
d="m23.7 12.3-.1-2.3H12.3v4.5h6.4a5.6 5.6 0 0 1-2.4 3.6v3h3.9c2.2-2.1 3.5-5.2 3.5-8.8Z"
/>
<path
fill="#34A853"
d="M12.3 24c3.2 0 6-1 7.9-3l-3.9-3a7.2 7.2 0 0 1-10.8-3.7h-4v3c2 4 6 6.7 10.8 6.7Z"
/>
<path
fill="#FBBC05"
d="M5.5 14.3a7 7 0 0 1 0-4.6v-3h-4a11.9 11.9 0 0 0 0 10.7l4-3.1Z"
/>
<path
fill="#EA4335"
d="M12.3 4.8c1.7 0 3.3.6 4.6 1.8L20.3 3A12 12 0 0 0 1.6 6.6l4 3.1c.9-2.8 3.5-5 6.7-5Z"
/>
</svg>
),
label: "Sign in with Google",
},
]}
/>
);
};
const App = () => {
return (
<Refine
authProvider={authProvider}
routerProvider={routerProvider}
LoginPage={LoginPage}
DashboardPage={DashboardPage}
resources={[{ name: "posts" }]}
/>
);
};
rememberMe
rememberMe property is only available for type login.
rememberMe property defines to render your own remember me component or you can pass false to don't render it.
import { Refine, useNavigation, AuthPage } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import { authProvider } from "./authProvider";
import { DashboardPage } from "./pages/dashboard";
const App = () => {
return (
<Refine
routerProvider={routerProvider}
authProvider={authProvider}
LoginPage={() => (
<AuthPage
rememberMe={
<div
style={{
border: "1px dashed cornflowerblue",
padding: 3,
}}
>
<input name="CustomRememberMe" type="checkbox" />{" "}
Custom remember me
</div>
}
/>
)}
DashboardPage={DashboardPage}
resources={[{ name: "posts" }]}
/>
);
};
loginLink
loginLink property is only available for types register and forgotPassword.
loginLink property defines the link to the login page and also you can give a node to render. Default value is "/login".
import { Refine, useRouterContext, AuthPage } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import { authProvider } from "./authProvider";
import { DashboardPage } from "./pages/dashboard";
const Auth = (props) => {
const { Link } = useRouterContext();
return (
<AuthPage
{...props}
loginLink={
<div
style={{
border: "1px dashed cornflowerblue",
padding: 3,
}}
>
<Link to="/login">Login</Link>
</div>
}
/>
);
};
const App = () => {
return (
<Refine
authProvider={authProvider}
routerProvider={{
...routerProvider,
routes: [
{
path: "/register",
element: <Auth type="register" />,
},
],
}}
LoginPage={Auth}
DashboardPage={DashboardPage}
resources={[{ name: "posts" }]}
/>
);
};
registerLink
registerLink property is only available for type login.
registerLink property defines the link to the registration page and also you can give a node to render. Default value is "/register".
import { Refine, useRouterContext, AuthPage } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import { authProvider } from "./authProvider";
import { DashboardPage } from "./pages/dashboard";
const Auth = (props) => {
const { Link } = useRouterContext();
return (
<AuthPage
{...props}
registerLink={
<div
style={{
border: "1px dashed cornflowerblue",
marginTop: 5,
padding: 5,
}}
>
<Link to="/register">Register</Link>
</div>
}
/>
);
};
const App = () => {
return (
<Refine
authProvider={authProvider}
routerProvider={{
...routerProvider,
routes: [
{ path: "/register", element: <Auth type="register" /> },
],
}}
LoginPage={Auth}
DashboardPage={DashboardPage}
resources={[{ name: "posts" }]}
/>
);
};
forgotPasswordLink
forgotPasswordLink property is only available for type login.
forgotPasswordLink property defines the link to the forgot password page and also you can give a node to render. Default value is "/forgot-password".
import { Refine, useRouterContext, AuthPage } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import { authProvider } from "./authProvider";
import { DashboardPage } from "./pages/dashboard";
const Auth = (props) => {
const { Link } = useRouterContext();
return (
<AuthPage
{...props}
forgotPasswordLink={
<div
style={{
border: "1px dashed cornflowerblue",
marginTop: 5,
padding: 5,
}}
>
<Link to="/forgot-password">Forgot Password</Link>
</div>
}
/>
);
};
const App = () => {
return (
<Refine
authProvider={authProvider}
routerProvider={{
...routerProvider,
routes: [
{
path: "/forgot-password",
element: <Auth type="forgotPassword" />,
},
],
}}
LoginPage={Auth}
DashboardPage={DashboardPage}
resources={[{ name: "posts" }]}
/>
);
};
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
import { Refine, useNavigation, AuthPage } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import { authProvider } from "./authProvider";
import { DashboardPage } from "./pages/dashboard";
const App = () => {
return (
<Refine
authProvider={authProvider}
routerProvider={routerProvider}
LoginPage={() => (
<AuthPage
wrapperProps={{
style: {
background:
"linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
position: "absolute",
top: "0px",
right: "0px",
bottom: "0px",
left: "0px",
},
}}
/>
)}
DashboardPage={DashboardPage}
resources={[{ name: "posts" }]}
/>
);
};
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.
import { Refine, useNavigation, AuthPage } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import { authProvider } from "./authProvider";
import { DashboardPage } from "./pages/dashboard";
const App = () => {
return (
<Refine
routerProvider={routerProvider}
authProvider={authProvider}
LoginPage={() => (
<AuthPage
contentProps={{
style: {
background:
"linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
},
}}
/>
)}
DashboardPage={DashboardPage}
resources={[{ name: "posts" }]}
/>
);
};
formProps uses for passing props to the form component.
import { Refine, useNavigation, AuthPage } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import { authProvider } from "./authProvider";
import { DashboardPage } from "./pages/dashboard";
const App = () => {
return (
<Refine
routerProvider={routerProvider}
authProvider={authProvider}
LoginPage={() => (
<AuthPage
formProps={{
onSubmit: (e: any) => {
e.preventDefault();
const email = e.target.email.value;
const password = e.target.password.value;
alert(
JSON.stringify({
email,
password,
}),
);
},
}}
/>
)}
DashboardPage={DashboardPage}
resources={[{ name: "posts" }]}
/>
);
};
renderContent
renderContent uses to render the form content. You can use this property to render your own content or renderContent gives you default content you can use to add some extra elements to the content.
import { Refine, useRouterContext, AuthPage } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import { authProvider } from "./authProvider";
import { DashboardPage } from "./pages/dashboard";
const App = () => {
return (
<Refine
routerProvider={routerProvider}
authProvider={authProvider}
LoginPage={() => (
<AuthPage
contentProps={{
style: {
width: "400px",
},
}}
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>
);
}}
/>
)}
DashboardPage={DashboardPage}
resources={[{ name: "posts" }]}
/>
);
};
API Reference
Properties
Interface
interface OAuthProvider {
name: string;
icon?: React.ReactNode;
label?: string;
}