I encountered an access denied error with Firebase. The issue seems to arise when I try passing the value of the "project_ID" using an environment variable in the backend's "configs.ts" file, as shown in the code snippet below:
import 'firebase/firestore'
import { getFirestore } from 'firebase/firestore';
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,
}
console.log("testing...", process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID)
const app = !getApps().length ? initializeApp(firebaseConfig) : getApp()
const dataBase = getFirestore(app)
export { dataBase }
I realized that everything works fine if I directly assign a string value in the config file instead of using environment variables, like this:
import { getApp, initializeApp, getApps } from 'firebase/app';
import 'firebase/firestore'
import { getFirestore } from 'firebase/firestore';
const firebaseConfig = {
apiKey: "APIKEYtesting_sdifoasdf5165sdf",
authDomain: "next-URLTest_446546",
projectId: "next-Test_454654",
};
console.log("testing...", process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID) // returns same value
const app = !getApps().length ? initializeApp(firebaseConfig) : getApp()
const dataBase = getFirestore(app)
export { dataBase }
The concern here is that hardcoding the string values directly in the configs could pose a significant security risk. My question is why this discrepancy occurs and how can it be resolved.
Here are the contents of my .env.local file:
NEXT_PUBLIC_FIREBASE_API_KEY=exemple_APIKEY_a65sd4adf65s4df54-6as5d456,
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=next-exemple-4a4d5.url,
NEXT_PUBLIC_FIREBASE_PROJECT_ID=next-exemple-4a4d5,