TypeError: _fire__WEBPACK_IMPORTED_MODULE_1__.default.auth is not a function

I am a beginner at React.js. I was following a tutorial to make a login authentication. I am getting this error (TypeError: fire__WEBPACK_IMPORTED_MODULE_1_.default.auth is not a function) from this part of the code: `

const authListener = () => {
    fire.auth().onAuthStateChanged((user) => {
      if (user) {
        clearInputs();
        setUser(user);
      } else {
        setUser("");
      }
    })
  };

` I’ve already searched every forum, topic, or Youtube video and still can’t find the answer. Can someone tell me where the problem is and how to fix it? Appreciate everything.

Answer

If you are using the Modular SDK v9.0.0 then try refactoring your code like this:

import { initializeApp } from "firebase/app"
import { getAuth, onAuthStateChanged } from "firebase/auth"

const app = initializeApp(app)
const auth = getAuth(app)

const authListener = () => {
  onAuthStateChanged(auth, (user) => {
    if (user) {
      console.log(user)
    }
  })
}

If you want to use the older namespaced syntax (firebase.auth()) then change your imports to compat version:

import firebase from "firebase/comapt/app"
import "firebase/compat/auth"

You can read more about upgrading to modular SDK in the documentation.