title: env.local vs String var
body: <p>I'm getting access denied error by firebase. I noticed that this error occurs when in the &quot;configs.ts&quot; file of the backend, when I pass the value of the &quot;project_ID&quot; by the ENVIRONMENT VARIABLE, as in the code below:</p>
  <pre><code>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(&quot;testing...&quot;, process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID)
  
  const app = !getApps().length ? initializeApp( firebaseConfig) : getApp()
  const dataBase = getFirestore(app)
  export { dataBase }
  </code></pre>
  <p>I also noticed that the code works if I assign the string value directly in the config file, without using environment variables, as in the code below:</p>
  <pre><code>import { getApp, initializeApp, getApps } from 'firebase/app';
  import 'firebase/firestore'
  import { getFirestore } from 'firebase/firestore';
  
  const firebaseConfig = {
      apiKey: &quot;APIKEYtesting_sdifoasdf5165sdf&quot;,
      authDomain: &quot;next-URLTest_446546&quot;,
      projectId: &quot;next-Test_454654&quot;,
    };
  console.log(&quot;testing...&quot;, process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID) // returns same value
  
  const app = !getApps().length ? initializeApp( firebaseConfig) : getApp()
  const dataBase = getFirestore(app)
  export { dataBase }
  </code></pre>
  <p>The problem is that using the string directly in the configs would be a huge security hole. My question is why this happens, and how can I fix it.</p>
  <p>Below the lines of code from my .env.local file:</p>
  <pre><code>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,
  </code></pre>