provincial-silver•5mo ago

How can I add other form fields on Auth Pages?

Can someone help. How can I add other fields on Auth Pages. At the moment it only has options for email and password what if one needs more. Would I have to use the render component and do it from scratch or there is some prop for that?

| Refine

component from Refine is an authentication page that can be used to login, register, forgot password, and update password.

2 Replies

kapa.ai•5mo ago

Hi @black-raven. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Currently, Refine's <AuthPage /> component for Ant Design does not support adding additional fields directly through props. However, you can customize the form content and title using the renderContent prop. This prop allows you to render your own content or change the default content and title. Here's an example of how you can use the renderContent prop:

import { AuthPage } from "@refinedev/antd";  

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

import { AuthPage } from "@refinedev/antd";  

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

In this example, the renderContent prop is used to render the form content and title. You can modify this function to add your own fields to the form. If you need to make more extensive changes to the <AuthPage /> component, you can use the Refine CLI's swizzle feature (https://refine.dev/docs/packages/list-of-packages/) to customize the component according to your needs. This was suggested by a contributor in a Github issue (https://github.com/refinedev/refine/issues/3418) related to the <AuthPage /> component. Please note that after form submission, the corresponding method of the authProvider will be called with the form values. You will need to handle the additional fields in these methods. For example, if you add a new field to the login form, you will need to handle this field in the login method of the authProvider. Here's an example of how the login method of the authProvider can be defined:

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",  
 },  
 };  
 },  
};

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",  
 },  
 };  
 },  
};

You can find more information about the <AuthPage /> component in the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/components/auth-page). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@473322677042413580> kapa.ai is still learning and improving, please let us know how it did by reacting below