Refine, Customize login page, use user-id instead of email

Question

we've created a refine project and we want to connect it with our oauth2 service, our auth provider has userId:password logic instead of email:password combo, we tried customizing AuthPage but it does'nt have such customization capability, it just can set header footer or change style of the page. like this:

import { Link } from "react-router-dom";
import { AuthPage } from "@refinedev/mui";

const LoginPage: React.FC = () => {
  return (
    <AuthPage
      type="login"
      rememberMe={
        <div
          style={{
            border: "1px dashed cornflowerblue",
            padding: 3,
          }}
        >
          <input name="CustomRememberMe" type="checkbox" /> remember me
        </div>
      }
      registerLink={
        <div
          style={{
            border: "1px dashed cornflowerblue",
            marginTop: 5,
            padding: 5,
          }}
        >
          <Link to="/register">Register</Link>
        </div>
      }
      forgotPasswordLink={
        <div
          style={{
            border: "1px dashed cornflowerblue",
            marginTop: 5,
            padding: 5,
          }}
        >
          <Link to="/forgot-password">Forgot Password</Link>
        </div>
      }
      wrapperProps={{
        style: {
          background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
          position: "absolute",
          top: "0px",
          right: "0px",
          bottom: "0px",
          left: "0px",
        },
      }}
      contentProps={{
        style: {
          background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
        },
      }}
      renderContent={(content: React.ReactNode) => {
        return (
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <h1>Header</h1>
            {content}
            <h2>Footer</h2>
          </div>
        );
      }}
    />
  );
};

export default LoginPage;

How can I customize my login page more and use userId instead of email

Answer 1

The solution is using swizzle utility

1. run this command: npm run refine -- swizzle
2. choose @refinedev/mui
3. then choose AuthPage to swizzle
4. now your customizable component is ready in src/components/pages/auth/components, navigate to this location and check files
5. add a new interface named LoginFormTypes in login.tsx file and remove duplicate type reference from imports of @refinedev/core with the same name in imports section like this:

export interface LoginFormTypes {
  userID?: string; // or any field you like
  password?: string;
  remember?: boolean;
  providerName?: string;
  redirectPath?: string;
}

6. scroll down to Content element and replace TextFields and do your customizations
7. replace AuthPage import from App.tsx with this:

import { AuthPage } from "./components/pages/auth";