useVerifyPasswordResetCodeMutation

The useVerifyPasswordResetCodeMutation hook is designed to verify a password reset code sent by Firebase Authentication. It integrates Firebase's verifyPasswordResetCode method with TanStack Query’s mutation lifecycle, providing state management and error handling for the password reset process.

Features

• Firebase Authentication Integration: Simplifies verifying a password reset code using Firebase's verifyPasswordResetCode method.
• Built-in State Management: Tracks the mutation lifecycle (idle, loading, success, error).
• Customizable Callbacks: Supports onSuccess, onError, and other TanStack Query mutation options.
• Type-Safe Handling: Ensures type safety with TanStack Query and Firebase types.

Installation

Ensure you have the necessary Firebase, TanStack Query and TanStack Query Firebase packages installed:

npm install firebase @tanstack/react-query @tanstack-query-firebase/react

Usage

import { useVerifyPasswordResetCodeMutation } from "./useVerifyPasswordResetCodeMutation";

function VerifyResetCodeComponent() {
  const { mutate, isPending, isSuccess, isError, error, data } = useVerifyPasswordResetCodeMutation(auth);

  const handleVerifyResetCode = async (code) => {
    try {
      await mutate(code); // Trigger the verify reset code mutation
    } catch (error) {
      console.error("Error verifying reset code:", error);
    }
  };

  return (
    <div>
      {isLoading && <p>Verifying reset code...</p>}
      {isSuccess && <p>Reset code verified! Email: {data}</p>}
      {isError && <p>Error: {error?.message}</p>}

      <button onClick={() => handleVerifyResetCode("reset-code-here")} disabled={isLoading}>
        Verify Reset Code
      </button>
    </div>
  );
}

API Reference

useVerifyPasswordResetCodeMutation(auth, options?)

Parameters

• auth: The Firebase Auth instance used to manage authentication.
• options (optional):
  An object for customizing the mutation behavior. Accepts all options supported by TanStack Query's useMutation, such as:
  • onSuccess: Callback fired when the mutation succeeds.
  • onError: Callback fired when the mutation fails.
  • onSettled: Callback fired after the mutation finishes, regardless of success or failure.

For a full list of supported options, see the TanStack Query useMutation documentation

Returns

The hook returns the following properties, provided by TanStack Query's useMutation:

• mutate(code: string): Function to trigger the password reset code verification mutation with the provided code.

mutate(code: string): Promise<string>;

• isPending: Boolean indicating if the mutation is in progress (alias for isLoading).

• isSuccess: Boolean indicating if the mutation has successfully completed.

• isError: Boolean indicating if the mutation has failed.

• error: The error object, if the mutation failed.

• data: The result of the mutation, which is typically the user's email after successful verification.

For a complete list of returned properties, see the official TanStack Query useMutation documentation.