Argument of type 'firebase.default.auth.Auth' is not assignable to parameter in react-firebase-hooks useAuthState

Question

Hi I am trying to use firebase.auth() as the parameter of useAuthState in typescript and it is giving me an error. Please be nice I am new to this.

Type 'Auth' is missing the following properties from type 'Auth': beforeAuthStateChanged, authStateReadyts(2345)

import firebase from "firebase/compat/app";

import "firebase/auth";

import { useAuthState } from "react-firebase-hooks/auth";

const auth = firebase.auth();

const [user] = useAuthState(auth);

"firebase": "^10.7.2",
"react-firebase-hooks": "^5.1.1"

I have tried searching the error on google, but didnt get anything useful. Any help would be appreciated. Thanks!

Answer 1

This is often due to version mismatches or import paths.
First, check that you're importing auth correctly:

import { getAuth } from "firebase/auth";
const auth = getAuth();

Second, Update Firebase and react-firebase-hooks: (useAuthState hook in [email protected] might have compatibility issues with Firebase v10. Upgrade to the latest compatible versions)

npm install firebase@latest react-firebase-hooks@latest

If the above solutins don't work immediately, you may temporarily suppress the error with type casting. However, prioritize long-term compatiblity by using the correct imports and versions.

const [user] = useAuthState(auth as any);