error - ReferenceError: Cannot access 'auth' before initialization - reactjs

Question

so I am following this online tutorial on how to build a WhatsApp build and I ran into this problem.
import "../styles/globals.css";
import { useAuthState } from "react-firebase-hooks/auth";
import { auth, db } from "../firebase";
function MyApp({ Component, pageProps }) {
const [user] = useAuthState(auth);
if (!user) return <Login />;
return <Component {...pageProps} />;
}
export default MyApp;
This is my firebase.js, I removed the my apiKey because I am sharing my code but that don't think that is the issue.
import firebase from "firebase/app";
const firebaseConfig = {
apiKey: "",
authDomain: "global-chat-80ab3.firebaseapp.com",
projectId: "global-chat-80ab3",
storageBucket: "global-chat-80ab3.appspot.com",
messagingSenderId: "405392556419",
appId: "1:405392556419:web:562d012b108561b8be76b6",
};
const app = !firebase.apps.length
? firebase.initializeApp(firebaseConfig)
: firebase.app();
const db = app.firestore();
const auth = app.auth();
const provider = new firebase.auth.GoogleAuthProvider();
export { db, auth, provider };

Answer 1

I'm using firebase v9 modular code as in firebase Documentation
Firebase Version: 9.6.1
This code worked fine for me. But the downside I faced was v9 modular functionalities won't work with react-firebase-hooks.(Not supported till now I guess)
My usecase: for next.js project with firebase.
import { initializeApp, getApps } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth } from "firebase/auth";
import { GoogleAuthProvider } from "firebase/auth";
const firebaseConfig = {
apiKey: "",
authDomain: "global-chat-80ab3.firebaseapp.com",
projectId: "global-chat-80ab3",
storageBucket: "global-chat-80ab3.appspot.com",
messagingSenderId: "405392556419",
appId: "1:405392556419:web:562d012b108561b8be76b6",
};
// Initialize Firebase
const app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps();
const auth = getAuth();
const db = getFirestore();
const provider = new GoogleAuthProvider();
export { db, auth, provider };

Answer 2

If you're using Firebase 9.6.0, try updating your imports to v9 compat. This recommendation comes from the Firebase documentation.
So, your imports would look like this:
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
const firebaseConfig = {
apiKey: "",
authDomain: "global-chat-80ab3.firebaseapp.com",
projectId: "global-chat-80ab3",
storageBucket: "global-chat-80ab3.appspot.com",
messagingSenderId: "405392556419",
appId: "1:405392556419:web:562d012b108561b8be76b6",
};
const app = !firebase.apps.length
? firebase.initializeApp(firebaseConfig)
: firebase.app();
const db = app.firestore();
const auth = app.auth();
const provider = new firebase.auth.GoogleAuthProvider();
export { db, auth, provider };