Skip to main content
useUpdatePassword is a hook that calls the updatePassword method from the authProvider under the hood. It returns a mutation result from @tanstack/react-query. This hook automatically merges URL parameters with the mutation variables, making it useful for password reset flows where a token is passed via URL.

​
Usage

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

const { mutate: updatePassword } = useUpdatePassword();

updatePassword({
  password: "newPassword123",
  confirmPassword: "newPassword123",
});

​
Parameters

​
mutationOptions
UseMutationOptions
Options to configure the mutation from @tanstack/react-query.
​
mutationOptions.onSuccess
function
Callback function to be called on successful password update.
​
mutationOptions.onError
function
Callback function to be called on password update error.
​
mutationOptions.meta
object
Additional metadata to pass to the mutation.

​
Return Values

Returns a mutation result from @tanstack/react-query.
​
mutate
function
A function to trigger the password update mutation. Accepts new password data as a parameter.
​
mutateAsync
function
An async version of mutate that returns a Promise.
​
isPending
boolean
Indicates whether the password update mutation is in progress.
​
isSuccess
boolean
Indicates whether the password update mutation was successful.
​
isError
boolean
Indicates whether the password update mutation encountered an error.
​
data
AuthActionResponse
The response data from the password update mutation.
​
data.success
boolean
Indicates whether the password update was successful.
​
data.redirectTo
string
The URL to redirect to after successful password update.
​
data.error
Error | RefineError
Error object if password update failed.
​
data.successNotification
SuccessNotificationResponse
Notification message to display on successful password update.
​
error
Error | RefineError
Error object if the mutation failed.

​
Type Parameters

​
TVariables
object
default:"{}"
Type of the variables object passed to the password update mutation. This is the shape of the data you pass when calling the mutate function.

​
Examples

​
Basic Usage

import { useUpdatePassword } from "@refinedev/core";
import { Form, Input, Button } from "antd";

interface IUpdatePasswordForm {
  password: string;
  confirmPassword: string;
}

const UpdatePasswordPage = () => {
  const { mutate: updatePassword, isPending } = useUpdatePassword<IUpdatePasswordForm>();

  const onFinish = (values: IUpdatePasswordForm) => {
    updatePassword(values);
  };

  return (
    <Form onFinish={onFinish}>
      <Form.Item name="password" rules={[{ required: true, min: 8 }]}>
        <Input.Password placeholder="New Password" />
      </Form.Item>
      <Form.Item 
        name="confirmPassword" 
        rules={[
          { required: true },
          ({ getFieldValue }) => ({
            validator(_, value) {
              if (!value || getFieldValue('password') === value) {
                return Promise.resolve();
              }
              return Promise.reject(new Error('Passwords do not match'));
            },
          }),
        ]}
      >
        <Input.Password placeholder="Confirm Password" />
      </Form.Item>
      <Button type="primary" htmlType="submit" loading={isPending}>
        Update Password
      </Button>
    </Form>
  );
};

​
With URL Token

The hook automatically merges URL parameters (like reset tokens) with the mutation variables: 
import { useUpdatePassword } from "@refinedev/core";

// URL: /reset-password?token=abc123

const UpdatePasswordPage = () => {
  const { mutate: updatePassword } = useUpdatePassword();

  const handleSubmit = (values: { password: string }) => {
    // The token from URL params is automatically included
    updatePassword(values);
    // authProvider receives: { password: "newPass", token: "abc123" }
  };

  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      handleSubmit({ password: "newPassword123" });
    }}>
      <input type="password" name="password" />
      <button type="submit">Update Password</button>
    </form>
  );
};

​
With Custom Callbacks

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

const { mutate: updatePassword } = useUpdatePassword({
  mutationOptions: {
    onSuccess: (data) => {
      console.log("Password updated successfully", data);
    },
    onError: (error) => {
      console.error("Failed to update password", error);
    },
  },
});

updatePassword({
  password: "newPassword123",
  confirmPassword: "newPassword123",
});

​
With Async/Await

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

const UpdatePasswordPage = () => {
  const { mutateAsync: updatePassword } = useUpdatePassword();

  const handleSubmit = async (values: { password: string }) => {
    try {
      const result = await updatePassword(values);
      if (result.success) {
        console.log("Password updated, redirecting...");
      }
    } catch (error) {
      console.error("Failed to update password", error);
    }
  };

  return (
    <button onClick={() => handleSubmit({ password: "newPass" })}>
      Update Password
    </button>
  );
};

Build docs developers (and LLMs) love

Get started for freeTalk to us