<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:
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.
Login
You can use the following props for the <AuthPage>
component when the type is "login"
:
After form submission, the login
method of the authProvider
will be called with the form values.
import { AuthBindings } from "@refinedev/core";
const authProvider: AuthBindings = {
// --
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"
:
After form submission, the register
method of the authProvider
will be called with the form values.
import { AuthBindings } from "@refinedev/core";
const authProvider: AuthBindings = {
// --
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.
After form submission, the forgotPassword
method of the authProvider
will be called with the form values.
import { AuthBindings } from "@refinedev/core";
const authProvider: AuthBindings = {
// --
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.
After form submission, the updatePassword
method of the authProvider
will be called with the form values.
import { AuthBindings } from "@refinedev/core";
const authProvider: AuthBindings = {
// --
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
providers
providers
property is only available for login
and register
types.
providers
property defines the list of providers used to handle login authentication. providers
accepts an array of Provider
type.
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 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.
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 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. The default value is "/login"
.
const MyRegisterPage = () => {
return (
<AuthPage
type="register"
loginLink={
<div
style={{
border: "1px dashed cornflowerblue",
padding: 3,
}}
>
<Link to="/login">Login</Link>
</div>
}
/>
);
};
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. The default value is "/register"
.
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 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. The default value is "/forgot-password"
.
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>
);
}}
/>
);
};
API Reference
Properties
Interface
interface OAuthProvider {
name: string;
icon?: React.ReactNode;
label?: string;
}