useForgotPassword is a hook that calls the forgotPassword method from the authProvider under the hood. It returns a mutation result from @tanstack/react-query.
Usage
import { useForgotPassword } from "@refinedev/core";
const { mutate: forgotPassword } = useForgotPassword();
forgotPassword({
email: "[email protected]",
});
Parameters
Options to configure the mutation from @tanstack/react-query.mutationOptions.onSuccess
Callback function to be called on successful password reset request.
Callback function to be called on password reset error.
Additional metadata to pass to the mutation.
Return Values
Returns a mutation result from @tanstack/react-query.
A function to trigger the password reset mutation. Accepts user credentials (typically email) as a parameter.
An async version of mutate that returns a Promise.
Indicates whether the password reset mutation is in progress.
Indicates whether the password reset mutation was successful.
Indicates whether the password reset mutation encountered an error.
The response data from the password reset mutation.Indicates whether the password reset request was successful.
The URL to redirect to after successful password reset request.
Error object if password reset failed.
data.successNotification
SuccessNotificationResponse
Notification message to display on successful password reset request.
Error object if the mutation failed.
Type Parameters
Type of the variables object passed to the password reset mutation. This is the shape of the data you pass when calling the mutate function.
Examples
Basic Usage
import { useForgotPassword } from "@refinedev/core";
import { Form, Input, Button } from "antd";
interface IForgotPasswordForm {
email: string;
}
const ForgotPasswordPage = () => {
const { mutate: forgotPassword, isPending } = useForgotPassword<IForgotPasswordForm>();
const onFinish = (values: IForgotPasswordForm) => {
forgotPassword(values);
};
return (
<Form onFinish={onFinish}>
<Form.Item name="email" rules={[{ required: true, type: "email" }]}>
<Input placeholder="Email" />
</Form.Item>
<Button type="primary" htmlType="submit" loading={isPending}>
Reset Password
</Button>
</Form>
);
};
With Custom Callbacks
import { useForgotPassword } from "@refinedev/core";
const { mutate: forgotPassword } = useForgotPassword({
mutationOptions: {
onSuccess: (data) => {
console.log("Password reset email sent", data);
},
onError: (error) => {
console.error("Password reset failed", error);
},
},
});
forgotPassword({
email: "[email protected]",
});
With Async/Await
import { useForgotPassword } from "@refinedev/core";
const ForgotPasswordPage = () => {
const { mutateAsync: forgotPassword } = useForgotPassword();
const handleSubmit = async (email: string) => {
try {
const result = await forgotPassword({ email });
if (result.success) {
console.log("Check your email for reset instructions");
}
} catch (error) {
console.error("Failed to send reset email", error);
}
};
return (
<button onClick={() => handleSubmit("[email protected]")}>
Reset Password
</button>
);
};