rare-sapphire•13mo ago

Auth page type register

When using mantine, is there any way to add other inputs to the auth page type=register besides email and password, like users phone number, or i have to create my own form from scratch to do this?

4 Replies

kapa.ai•13mo ago

Hi @asdf6428. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. The extracts provided do not mention the use of Mantine with Refine or the ability to add additional input fields to the AuthPage component. However, Refine does provide a way to create a custom registration page using the useRegister hook, which allows you to define your own form fields. Here's an example of how you can use the useRegister hook to create a custom registration form:

import { useRegister } from "@refinedev/core";  
  
type RegisterVariables = {  
 email: string;  
 password: string;  
};  
  
export const RegisterPage = () => {  
 const { mutate: register } = useRegister<RegisterVariables>();  
  
 const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {  
 e.preventDefault();  
  
 const values = {  
 email: e.currentTarget.email.value,  
 password: e.currentTarget.password.value,  
 };  
  
 register(values);  
 };  
  
 return (  
 <form onSubmit={onSubmit}>  
 <label>Email</label>  
 <input name="email" value="test@refine.com" />  
 <label>Password</label>  
 <input name="password" value="refine" />  
 <button type="submit">Submit</button>  
 </form>  
 );  
};

import { useRegister } from "@refinedev/core";  
  
type RegisterVariables = {  
 email: string;  
 password: string;  
};  
  
export const RegisterPage = () => {  
 const { mutate: register } = useRegister<RegisterVariables>();  
  
 const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {  
 e.preventDefault();  
  
 const values = {  
 email: e.currentTarget.email.value,  
 password: e.currentTarget.password.value,  
 };  
  
 register(values);  
 };  
  
 return (  
 <form onSubmit={onSubmit}>  
 <label>Email</label>  
 <input name="email" value="test@refine.com" />  
 <label>Password</label>  
 <input name="password" value="refine" />  
 <button type="submit">Submit</button>  
 </form>  
 );  
};

Source (https://refine.dev/docs/api-reference/core/hooks/authentication/useRegister) You can modify this example to include additional fields as needed. For more detailed information, you may want to refer to the Refine documentation (https://refine.dev/docs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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

rare-sapphire•13mo ago

You can use swizzle 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).

rare-sapphire•13mo ago

Thanks