useRegister is a hook that calls the register method from the authProvider under the hood. It returns a mutation result from @tanstack/react-query.
Usage
import { useRegister } from "@refinedev/core";
const { mutate: register } = useRegister();
register({
email: "[email protected]",
password: "123456",
});
Parameters
Options to configure the mutation from @tanstack/react-query.mutationOptions.onSuccess
Callback function to be called on successful registration.
Callback function to be called on registration error.
Additional metadata to pass to the mutation.
Return Values
Returns a mutation result from @tanstack/react-query.
A function to trigger the registration mutation. Accepts registration credentials as a parameter.
An async version of mutate that returns a Promise.
Indicates whether the registration mutation is in progress.
Indicates whether the registration mutation was successful.
Indicates whether the registration mutation encountered an error.
The response data from the registration mutation.Indicates whether the registration was successful.
The URL to redirect to after successful registration.
Error object if registration failed.
data.successNotification
SuccessNotificationResponse
Notification message to display on successful registration.
Error object if the mutation failed.
Type Parameters
Type of the variables object passed to the registration mutation. This is the shape of the data you pass when calling the mutate function.
Examples
Basic Usage
import { useRegister } from "@refinedev/core";
import { Form, Input, Button } from "antd";
interface IRegisterForm {
email: string;
password: string;
}
const RegisterPage = () => {
const { mutate: register, isPending } = useRegister<IRegisterForm>();
const onFinish = (values: IRegisterForm) => {
register(values);
};
return (
<Form onFinish={onFinish}>
<Form.Item name="email" rules={[{ required: true }]}>
<Input placeholder="Email" />
</Form.Item>
<Form.Item name="password" rules={[{ required: true }]}>
<Input type="password" placeholder="Password" />
</Form.Item>
<Button type="primary" htmlType="submit" loading={isPending}>
Sign up
</Button>
</Form>
);
};
With Custom Callbacks
import { useRegister } from "@refinedev/core";
const { mutate: register } = useRegister({
mutationOptions: {
onSuccess: (data) => {
console.log("Registration successful", data);
},
onError: (error) => {
console.error("Registration failed", error);
},
},
});
register({
email: "[email protected]",
password: "123456",
});
With Additional Fields
import { useRegister } from "@refinedev/core";
interface IRegisterForm {
email: string;
password: string;
name: string;
confirmPassword: string;
}
const { mutate: register } = useRegister<IRegisterForm>();
register({
email: "[email protected]",
password: "123456",
name: "John Doe",
confirmPassword: "123456",
});