Define customized Logo on default Loginpage
Hi, how can i set a logo on default Loginpage. (I am using refine V4)
![No description](https://cdn.answeroverflow.com/1087704460924567582/image.png)
8 Replies
Hey @eliot0801! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:
----------------------
To set a custom logo on the default login page in refine, you can create a custom login page and use the
LoginPage
property in the <Refine>
component. Here's how you can do it:
1. Create a custom login page component (e.g., CustomLoginPage.tsx
) with your logo and the login form:
2. Import the CustomLoginPage
component in your App.tsx
file and set it as the LoginPage
property in the <Refine>
component:
Please note that the LoginPage
property is deprecated in the new routing system, and you should create a route for the login page instead. However, since you mentioned you're using refine V4, the above solution should work for you.
For more information on customizing the login page, you can refer to the Custom Login Page example (https://refine.dev/docs/examples/customization/customLogin).
----------------------<@244579825140891648> kapa.ai is still learning and improving, please let us how it did by reacting below
Hey @eliot0801 ,
You can use the
renderContent
property of the AuthPage component 💯
Doc: https://refine.dev/docs/api-reference/mui/components/mui-auth-page/#rendercontent
Example usage: https://github.com/refinedev/refine/blob/next/examples/finefoods-mui/src/pages/auth/index.tsx#L13probable-pink•2y ago
Now the Loginform got eliminated :/
![No description](https://cdn.answeroverflow.com/1087710084135653386/image.png)
Please carefully review the document and our example. I think you forgot to render {content}. https://github.com/refinedev/refine/blob/next/examples/finefoods-mui/src/pages/auth/index.tsx#L27
absent-sapphire•2y ago
is there any way you can put the logo inside of the content box? So that the logo is not outside of this container:
![No description](https://cdn.answeroverflow.com/1087721507272265738/image.png)
Hey,
Please wait for someone to help you instead of creating new posts for the same topics. Remember that the Refine Core team is providing you with free community support. We hope that you will pay attention to this so that we can manage this community support in a healthy and organized way. ❤️
Regarding your question, you can place the logo where you indicated by swizzling the AuthPage component.
https://refine.dev/docs/packages/documentation/cli/#swizzle
CLI | refine
refine CLI is a command line application that allows you to interact with your refine project and perform some tasks. This includes creating a new resource, managing updates, swizzle components, and runs your project (build, start, dev).
probable-pink•2y ago
Hey Ömer, yeah you are totally right. Thx you for your Support 🙂