FirebaseError: Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options)

Question

I have created a Next.js application and am using Firebase authentication. I have used the useContext hook for managing user state across my application. The code for the AuthContext is as follows:

auth.js

import { createContext, useState, useEffect, useContext } from "react";
import { getAuth, onIdTokenChanged } from "firebase/auth";

const AuthContext = createContext({});

export const AuthProvider = ({children}) => {
    
    const auth = getAuth();
    const [user, setUser] = useState(null);

    useEffect(() => {
        return(onIdTokenChanged(auth, (user) => {
            if(user) {
                setUser(user);
            } else {
                setUser(null);
            }
        }))
    },[]);

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

export const useAuth = () => useContext(AuthContext);

However, I'm getting the following error in the auth.js file:

1. I am not able to understand how to fix it.
2. Also, I want to know if using useContext() hook is better for route protection as opposed to storing user session cookies in the browser and verifying it from there.

Edit: I have configured Firebase in firebaseConfig.js. The code for it is as follows:

firebaseConfig.js

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


const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

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

Answer 1

I was just getting the same error, I managed to fix this by doing:

import { initializeApp } from 'firebase/app';
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

const firebaseConfig{
...
}

And adding these lines like that:

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

export { auth, db };