useSignInWithEmailAndPasswordMutation

The useSignInWithEmailAndPasswordMutation hook is designed to handle user sign-ins using Firebase Authentication with email and password. It integrates Firebase's signInWithEmailAndPassword method with TanStack Query’s mutation lifecycle for easy state management and error handling.

Features

• Firebase Authentication Integration: Simplifies signing in with email and password using Firebase's signInWithEmailAndPassword 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 { useSignInWithEmailAndPasswordMutation } from "./useSignInWithEmailAndPasswordMutation";

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

  const handleSignIn = () => {
    const email = "user@example.com";
    const password = "password123";
    mutate({ email, password }); // Trigger the sign-in mutation
  };

  return (
    <div>
      {isPending && <p>Signing in...</p>}
      {isSuccess && <p>Signed in as {data?.user.email}</p>}
      {isError && <p>Error: {error?.message}</p>}

      <button onClick={handleSignIn} disabled={isPending}>
        Sign In
      </button>
    </div>
  );
}

API Reference

useSignInWithEmailAndPasswordMutation(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({ email, password }): Function to trigger the sign-in mutation with the provided email and password.

mutate({ email: string, password: string }): void;

• 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 contains the UserCredential object if the mutation was successful.

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