xenogeneic-maroon•2y ago

Can't change title of AuthPage

I tried to change my login page title like this: <AuthPage type="login" title={<h2>Welcome to ...</h2>} formProps={{ initialValues: { email: "demo@refine.dev", password: "demodemo" }, }} /> That's how it says to do it in the doc. But, I received this error: TS2322: Type '{ type: "login"; title: Element; formProps: { initialValues: { email: string; password: string; }; }; }' is not assignable to type 'IntrinsicAttributes & AuthProps'. Property 'title' does not exist on type 'IntrinsicAttributes & { type?: "login" | undefined; providers?: OAuthProvider[] | undefined; loginLink?: ReactNode; registerLink?: ReactNode; forgotPasswordLink?: ReactNode; rememberMe?: ReactNode; } & { ...; } & { ...; }'. Is it normal?

6 Replies

kapa.ai•2y ago

Hey @jayp_digitalartist! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:

kapa.ai•2y ago

---------------------- It seems like you're trying to use the title prop directly on the <AuthPage> component, but the correct way to change the title is by using the contentProps prop. Here's an example of how to change the title for the Ant Design-based AuthPage:

const MyLoginPage = () => {  
 return (  
 <AuthPage  
   type="login"  
   contentProps={{  
     title: "Login",  
     headStyle: {  
       background: "cornflowerblue",  
       color: "white",  
     },  
     bodyStyle: {  
       background: "#673ab742",  
     },  
   }}  
 />  
 );  
};

const MyLoginPage = () => {  
 return (  
 <AuthPage  
   type="login"  
   contentProps={{  
     title: "Login",  
     headStyle: {  
       background: "cornflowerblue",  
       color: "white",  
     },  
     bodyStyle: {  
       background: "#673ab742",  
     },  
   }}  
 />  
 );  
};

In this example, the title prop is passed inside the contentProps object. You can modify your code accordingly to change the title of your login page. Source: antd-auth-page (https://refine.dev/docs/api-reference/antd/components/antd-auth-page) ----------------------

| refine

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

kapa.ai•2y ago

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

fascinating-indigo•2y ago

Hey @jayp_digitalartist, Which UI framework do you use?

xenogeneic-maroon•2y ago

React and Ant-design

fascinating-indigo•2y ago

You need to pass “title” prop in “contentProps” object