I have been trying for 3 days in row to solve this error

TypeError: firebase_config__WEBPACK_IMPORTED_MODULE_2_.default.auth is not a function

but i coudlnt i have tried everything online but nothing has helped me

here is my config file

import { initializeApp } from "firebase/app";
import "firebase/auth";

const firebaseConfig = {
  apiKey: "AIzaSyBoKEW_g0gOwNKkHGMAyhXxC0ESfdsVhKI",
  authDomain: "kargoevi-auth.firebaseapp.com",
  projectId: "kargoevi-auth",
  storageBucket: "kargoevi-auth.appspot.com",
  messagingSenderId: "726037811463",
  appId: "1:726037811463:web:42d75c7f5c1d1b5b9bf5a2",
  measurementId: "G-PJXGLVZ6GQ",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export default app;

and here is the Auth.js file

import React, { useEffect, useState } from "react";
import app from "./firebase-config";

export const AuthContext = React.createContext();

export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);
  const [pending, setPending] = useState(true);

  useEffect(() => {
    app.auth().onAuthStateChanged((user) => {
      setCurrentUser(user);
      setPending(false);
    });
  }, []);

  if (pending) {
    return <>Loading...</>;
  }

  return (
    <AuthContext.Provider
      value={{
        currentUser,
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};

my package.json file

"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.2.0",
"card-validator": "^8.1.1",
"craco-plugin-scoped-css": "^1.1.1",
"firebase": "^9.10.0",
"firebase-admin": "^11.0.1",
"react": "^18.2.0",
"react-bootstrap": "^2.4.0",
"react-credit-cards": "^0.8.3",
"react-dom": "^18.2.0",
"react-hook-form": "^7.34.0",
"react-router-dom": "^5.3.0",
"react-scripts": "^2.1.3",
"react-tabs": "^5.1.0",
"styled-components": "^5.3.6",
"update": "^0.7.4",
"web-vitals": "^2.1.4"

},

so basically, what I'm trying to do is to connect my react project with firebase for authentication

i was following this tutorial online from YouTube

CodePudding user response：

You are using the Firebase Modular SDK that uses a functional syntax and you don't have to import other services as side-effects (import "firebase/auth"). As per Firebase Auth's documentation, you have to use getAuth() function to initialize Auth now. Try refactoring the code as shown now:

// firebase.js
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = { ... };
  
export const auth = getAuth();

Similarly, for other methods like onAuthStateChanged you'll have to update the syntax.

import { onAuthStateChanged } from "firebase/auth"
import { auth } from "../path/to/firebase.js" // <-- replace the path

useEffect(() => {
  onAuthStateChanged(auth, (user) => {
    setCurrentUser(user);
    setPending(false);
  });
}, []);

Make sure you are referring to Modular tab in the documentation.