Define customized Logo on default Loginpage

Hi, how can i set a logo on default Loginpage. (I am using refine V4)

8 Replies

kapa.ai•17mo ago

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:

import React from "react";
import { useLogin } from "@refinedev/core";
import { Form, Input, Button } from "antd";

type LoginVariables = {
  username: string;
  password: string;
};

export const CustomLoginPage = () => {
  const { mutate: login } = useLogin<LoginVariables>();

  const onSubmit = (values: LoginVariables) => {
    login(values);
  };

  return (
    <div>
      <img src="your-logo-url" alt="Your Logo" />
      <Form onFinish={onSubmit}>
        <Form.Item
          name="username"
          rules={[{ required: true, message: "Please input your username!" }]}
        >
          <Input placeholder="Username" />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[{ required: true, message: "Please input your password!" }]}
        >
          <Input.Password placeholder="Password" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            Log in
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

import React from "react";
import { useLogin } from "@refinedev/core";
import { Form, Input, Button } from "antd";

type LoginVariables = {
  username: string;
  password: string;
};

export const CustomLoginPage = () => {
  const { mutate: login } = useLogin<LoginVariables>();

  const onSubmit = (values: LoginVariables) => {
    login(values);
  };

  return (
    <div>
      <img src="your-logo-url" alt="Your Logo" />
      <Form onFinish={onSubmit}>
        <Form.Item
          name="username"
          rules={[{ required: true, message: "Please input your username!" }]}
        >
          <Input placeholder="Username" />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[{ required: true, message: "Please input your password!" }]}
        >
          <Input.Password placeholder="Password" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            Log in
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

2. Import the CustomLoginPage component in your App.tsx file and set it as the LoginPage property in the <Refine> component:

import { CustomLoginPage } from "./CustomLoginPage";

const App: React.FC = () => (
  <Refine
    // ...
    LoginPage={CustomLoginPage}
  />
);

import { CustomLoginPage } from "./CustomLoginPage";

const App: React.FC = () => (
  <Refine
    // ...
    LoginPage={CustomLoginPage}
  />
);

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). ----------------------

kapa.ai•17mo ago

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

Omer•17mo ago

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#L13

xenial-black•17mo ago

Now the Loginform got eliminated :/

Omer•17mo ago

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

xenial-black•17mo 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:

Omer•17mo ago

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).

xenial-black•17mo ago

Hey Ömer, yeah you are totally right. Thx you for your Support 🙂