foreign-sapphire•6mo ago

CustomLoginLogo

hello, can i customize the login page <AuthPage> with my custom logo and color without altering the authentication from the provider.

3 Replies

kapa.ai•6mo ago

Hi @Drick. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can customize the login page <AuthPage> with your custom logo and color without altering the authentication from the provider. Refine allows you to change the default title and logo of the <AuthPage> component. Here is an example of how you can do it:

import { AuthPage, ThemedTitleV2 } from "@refinedev/antd";  
  
const MyLoginPage = () => {  
 return (  
 <AuthPage  
 type="login"  
 title={  
 <ThemedTitleV2  
 title="My Title"  
 icon={<img src="Your Logo URL" />}  
 />  
 }  
 />  
 );  
};

import { AuthPage, ThemedTitleV2 } from "@refinedev/antd";  
  
const MyLoginPage = () => {  
 return (  
 <AuthPage  
 type="login"  
 title={  
 <ThemedTitleV2  
 title="My Title"  
 icon={<img src="Your Logo URL" />}  
 />  
 }  
 />  
 );  
};

In the above code, replace "Your Logo URL" with the URL of your custom logo. You can also replace "My Title" with the title you want to display on the login page. This example uses Ant Design, but you can do the same with other UI libraries supported by Refine, such as Mantine, Material-UI, and Chakra UI. For more details, you can refer to the following documentation: - Ant Design (https://refine.dev/docs/ui-integrations/ant-design/components/auth-page#title) - Mantine (https://refine.dev/docs/ui-integrations/mantine/components/auth-page#title) - Material-UI (https://refine.dev/docs/ui-integrations/material-ui/components/auth-page#title) - Chakra UI (https://refine.dev/docs/ui-integrations/chakra-ui/components/auth-page#title) Please note that the color customization will depend on the UI library you are using. You may need to refer to the respective UI library's documentation for more details on how to customize colors. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

foreign-sapphire•6mo ago

Thank you kapa, let me try it