Why can I still pull firebase collection data even if I modify the API key in firebase config?

Question

Why can I still pull data from my firebase collection even if I modify the API key? Here is where I am pulling data:

import "../App.css"
import { useEffect, useState } from "react"
import { db } from "../config/firebase-config"
import { collection, getDocs } from "firebase/firestore"

//change the collection name in firestore, replace here
const projectsCollectionRef = collection(db, "all-projects")

function App() {
  const [myProjects, setProjects] = useState([])

  useEffect(() => {
    const getProjects = async () => {
      //get all the data in the 'test2-add' collection//change this collection name
      const data = await getDocs(projectsCollectionRef)
      console.log(data)
      setProjects(data.docs.map(doc => ({ ...doc.data(), id: doc.id }))) //get each individual doc in the collection f
    }

    getProjects()
  }, [])

  return (
    <div className="App">
      {myProjects.map(user => {
        return (
          <div>
            {" "}
            
            *<h1>Date: {user.date}</h1>*
            *<h1>Name: {user.name}</h1>*
          </div>
        )
      })}
    </div>
  )
}

export default App

And here is my firebase config:

import { initializeApp } from "firebase/app";
import {getFirestore} from "@firebase/firestore"


//Change all these properties to ENV vars
const firebaseConfig = {
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: "this-3fda9.firebaseapp.com",
    projectId: "this-3fda9",
    storageBucket: "this3fda9.appspot.com",
    messagingSenderId: "4891874erer83",
    appId: "1:48918745183:web:547b4415d0098938xxx7",
    measurementId: "G-FL67YfxVY8"
  };

  const app = initializeApp(firebaseConfig);

 export const db = getFirestore(app);

When I modify the API key in my env file, I still see the example.js component pulling data from the collection.

This is so confusing. How in the world is is still pulling data even when having an incorrect API key?

Even when I dont use an env var and just hardcode the API key and modify it, it still works.

Ive tried clearing cache thru npm and on my broswer

You'll have to restart the local server after making any changes inside env file. — Kundan, Feb 05 '22 at 01:55
Hey @FrankvanPuffelen, seems you were right; the API key is not needed to find the appropriate project. When I delete the project ID, the data can not be read — OpenMeyends, Feb 07 '22 at 16:46

score 0 · Accepted Answer · answered Feb 05 '22 at 04:17

Different Firebase products use difference parts of the configuration data. If I recall correctly, Firestore only uses the project ID to find the correct project, and does not need/use the API key.

Keep in mind: none of these values are meant to be a security mechanism. For more on this, see Is it safe to expose Firebase apiKey to the public?

Why can I still pull firebase collection data even if I modify the API key in firebase config?

1 Answers1