wee-brown
wee-brown11mo 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
kapa.ai11mo 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
kapa.ai11mo ago
<@619821870841200640> kapa.ai is still learning and improving, please let us how it did by reacting below
afraid-scarlet
afraid-scarlet11mo ago
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).
wee-brown
wee-brown11mo ago
Thanks