How to add extra fields to the registration page?

I would like to add a firstname, lastname and phone number field to the registration page, how can I do this?

6 Replies

Hi @BlackBearFTW. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To add extra fields to the registration page in Refine, you can create a custom registration page using the useRegister hook. This hook allows you to define your own form fields and pass them as parameters to the register method. Here's a basic example of how you can add firstname, lastname, and phone fields to your registration form:

import { useRegister } from "@refinedev/core";  

type RegisterVariables = {  
  email: string;  
  password: string;  
  firstname: string;
  lastname: string;
  phone: 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,  
      firstname: e.currentTarget.firstname.value,
      lastname: e.currentTarget.lastname.value,
      phone: e.currentTarget.phone.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" />  
      <label>First Name</label>  
      <input name="firstname" value="John" />  
      <label>Last Name</label>  
      <input name="lastname" value="Doe" />  
      <label>Phone</label>  
      <input name="phone" value="1234567890" />  
      <button type="submit">Submit</button>  
    </form>  
  );  
};

import { useRegister } from "@refinedev/core";  

type RegisterVariables = {  
  email: string;  
  password: string;  
  firstname: string;
  lastname: string;
  phone: 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,  
      firstname: e.currentTarget.firstname.value,
      lastname: e.currentTarget.lastname.value,
      phone: e.currentTarget.phone.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" />  
      <label>First Name</label>  
      <input name="firstname" value="John" />  
      <label>Last Name</label>  
      <input name="lastname" value="Doe" />  
      <label>Phone</label>  
      <input name="phone" value="1234567890" />  
      <button type="submit">Submit</button>  
    </form>  
  );  
};

In this example, RegisterVariables is a type that defines the shape of the data that the register method expects. The useRegister hook is then used to get the register function, which is used to submit the form data. The onSubmit function is called when the form is submitted. It prevents the default form submission behavior, gets the form values, and then calls the register function with those values. Each input field in the form corresponds to a field in the RegisterVariables type. The name prop of each input field matches the name of the corresponding field in RegisterVariables. Please note that this is a basic example and doesn't include any form validation or error handling. You might want to add those in a real-world application. For more information, you can refer to the useRegister documentation (https://refine.dev/docs/authentication/hooks/use-register#usage). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

xenial-black•6mo ago

@kapa.ai what if I want to use AuthPage

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The <AuthPage /> component provided by Refine is a ready-to-use component that includes fields for email and password. It's designed to be used for login, register, forgot password, and update password actions. However, it doesn't support adding custom fields directly. If you want to add custom fields like firstname, lastname, and phone to the registration page while using <AuthPage />, you would need to customize the <AuthPage /> component. This process is known as "swizzling". Swizzling allows you to override the default behavior of a component. You can use the Refine CLI to swizzle the <AuthPage /> component, and then modify the swizzled component to include your custom fields. However, please note that swizzling should be done carefully, as it might make it harder to update Refine in the future. Also, the swizzled component might not work correctly if it relies on internal Refine APIs that change in future updates. Unfortunately, the provided extracts do not include specific instructions or examples on how to swizzle the <AuthPage /> component and add custom fields to it. For more detailed instructions, you might want to refer to the Refine documentation (https://refine.dev/docs) or ask for help in the Refine community. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

xenial-black•6mo ago

Core team?