modify login page using username and password from @refinedev/antd

how do i achive this? my backend is not using email and password, but username and password.

2 Replies

Hi @Dapa. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can achieve this by creating a custom login page using the useLogin hook provided by Refine. Here's an example of how you can do this:

import { useLogin } from "@refinedev/core";  
import { Form } from "antd";  
  
type LoginVariables = {  
 username: string;  
 password: string;  
};  
  
export const LoginPage = () => {  
 const { mutate: login } = useLogin<LoginVariables>();  
  
 const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {  
 event.preventDefault();  
  
 login({  
 username: event.currentTarget.username.value,  
 password: event.currentTarget.password.value,  
 });  
 };  
  
 return (  
 <Form  
 // ...  
 onFinish={onSubmit}  
 >  
 {/* ... */}  
 </Form>  
 );  
};

import { useLogin } from "@refinedev/core";  
import { Form } from "antd";  
  
type LoginVariables = {  
 username: string;  
 password: string;  
};  
  
export const LoginPage = () => {  
 const { mutate: login } = useLogin<LoginVariables>();  
  
 const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {  
 event.preventDefault();  
  
 login({  
 username: event.currentTarget.username.value,  
 password: event.currentTarget.password.value,  
 });  
 };  
  
 return (  
 <Form  
 // ...  
 onFinish={onSubmit}  
 >  
 {/* ... */}  
 </Form>  
 );  
};

In this example, useLogin is used to create a custom login form that accepts a username and password. The mutate function from useLogin is used to send the login request. You can replace the form fields with your own to match your backend's requirements (source (https://refine.dev/docs/authentication/hooks/use-login#usage)). Alternatively, you can customize the AuthPage component using the refine-cli swizzle feature. This allows you to modify the component's code directly in your project without touching the node_modules. Here's how you can do it: 1. Run the following command in the project directory:

npm run refine swizzle

npm run refine swizzle

2. Select the @refinedev/core package. 3. Select the AuthPage component. After swizzling the auth pages, you can customize the auth pages by editing the files in the src/components/pages/auth folder (source (https://refine.dev/docs/tutorial/understanding-authprovider/headless/auth-pages#customizing-auth-pages)). Remember to replace the email field with a username field in the login form. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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