FireBase getAuth and onAuthStateChanged is not in "firebase/auth" import

Question

I am trying to learn and use getAuth(), onAuthStateChanged() methods from "firebase/auth" But in the folder of node_modules/firebase/auth doesnt include those methods. It seems like changing dirs depending on versions of firebase. My Dependencies:

"dependencies": {
    "antd": "^4.16.13",
    "firebase": "^9.0.2",
    "next": "11.1.2",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },

By the firebase doc it sais that i should use import { getAuth, onAuthStateChanged } from "firebase/auth"; I searched and found that "firebase/firebase-auth"; folder has included getAuth method but when i try to use import {getAuth} from "firebase/firebase-auth"; it gives me an error states firebase/firebase-auth file is not exported.

What did I miss?
How i can use getAuth and onAuthStateChanged methods with this dependencies?
thank you for advices

Firebase.js:

// import "firebase/auth"
import "firebase/compat/auth"
//import {getAuth} from "firebase/firebase-auth";
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';

import { getAuth, onAuthStateChanged } from "firebase/auth";


// onAuthStateChanged(auth, user => {
//     // Check for user status
// });

const app = firebase.initializeApp({
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGIN_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID
})


export const auth = getAuth(app);

export default app

Answer 1

As per the firebase docs , "The version 9 compat code is identical to the version 8 code, but the imports have changed."

Here is a snippet from a working project with firebase@9.1.3

import { firebase } from "@firebase/app";

import { initializeApp } from "firebase/app";

import { getAuth, onAuthStateChanged } from "firebase/auth";

const firebaseConfig =  {
  apiKey: "xxx",
  authDomain: "xxx",
  projectId: "xxx",
  storageBucket: "xxx",
  messagingSenderId: "xxx",
  appId: "xxx",
};

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

Answer 2

import React, { useState } from 'react'
import { initializeApp } from "firebase/app";
import { getAuth, onAuthStateChanged, GoogleAuthProvider, signInWithPopup, signOut } from "firebase/auth";
import './App.css';

// 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

const firebaseConfig = {
  apiKey: 
  authDomain:
  databaseURL: 
  projectId: 
  storageBucket: 
  messagingSenderId: 
  appId: 
};


initializeApp(firebaseConfig);
// const analytics = getAnalytics(app);
const firebaseApp = initializeApp(firebaseConfig);
const provider = new GoogleAuthProvider();
const auth = getAuth(firebaseApp);

export default function App() {
  const [user, setUser] = useState(null)
  onAuthStateChanged(auth, (user) => {
          if (user) {
            // User is signed in, see docs for a list of available properties
            // https://firebase.google.com/docs/reference/js/firebase.User
            setUser(user);
            // ...
          } else {
            // User is signed out
            // ...
            setUser(null)
            }
          }
        );

  return <>{user ? 
  <><p>Welcome</p><button onClick={() => signOut(auth)}>Google Logout</button></>
  : <><p>Enjoy</p>
  <button onClick={() =>  signInWithPopup(auth, provider)
                  .then((result) => {
                    // The signed-in user info.
                    // eslint-disable-next-line
                    const user = result.user;
                    // ...
                  }).catch((error) => {
                    // Handle Errors here.
                    // eslint-disable-next-line
                    const errorCode = error.code;
                    // eslint-disable-next-line
                    const errorMessage = error.message;
                    // The email of the user's account used.
                    // eslint-disable-next-line
                    const email = error.email;
                    // The AuthCredential type that was used.
                    // eslint-disable-next-line
                    const credential = GoogleAuthProvider.credentialFromError(error);
                    // ...
                  })}>
                      Sign in with Google
                    </button>
  </>}</>
}