I am writing a react app and I am trying to connect it to firebase, this is what I do: I have an Auth.js

import React, { useEffect, useState } from "react";

import db from "../../config/db";

export const AuthContext = React.createContext();

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

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

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

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

and in my app.js I am using the AuthContext

 <AuthProvider>
      <Router>
        <Switch>
         .
         .
         . 
        </Switch>
      </Router>
    </AuthProvider>

and finally my is the following:

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "------------",
  authDomain: "------------",
  projectId:"------------",
  storageBucket: "------------",
  messagingSenderId:"------------",
  appId:"------------",
  measurementId: "------------",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

export default app;

I havent gone much further than this, but I keep getting this error: [![enter image description here][1]][1] [1]: https://i.stack.imgur.com/hYNaS.png

TypeError: _config_db__WEBPACK_IMPORTED_MODULE_1__.default.auth is not a function

this is generated from db.auth().onAuthStateChanged.

what am I doing wrong?