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:
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:
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:
----------------------<@303537787628552192> kapa.ai is still learning and improving, please let us know how it did by reacting below