React Firebase Error auth/invalid-api-key trying to use .env file

Question

I'm trying to hook firebase to my react web app.
Everything works if I use the raw keys, which are directly sourced from firebase.config.js.
However, it does not work if I try to put raw keys in .env and use process.env to call it in firebase.config.

---

Error that I'm getting in localhost:3000

Firebase: Error (auth/invalid-api-key).
createErrorInternal
C:/Users/user1/src/core/util/assert.ts:142
  139 |   );
  140 | }
  141 | 
> 142 | return _DEFAULT_AUTH_ERROR_FACTORY.create(
      | ^  143 |   authOrCode,
  144 |   ...(rest as AuthErrorListParams<K>)
  145 | );

---

in firebase.config.js
v-- Raw key works fine.. but can't obv upload this to github..

// const firebaseConfig = {
//   apiKey: "raw key",
//   authDomain: "raw key",
//   projectId: "raw key",
//   storageBucket: "raw key",
//   messagingSenderId: "raw key",
//   appId: "raw key",
//   measurementId: "raw key"
// }

v-- I want to use this, but process.env doesn't work

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID 
}

const app = firebase.initializeApp(firebaseConfig);
const firestore = app.firestore();
const auth = app.auth();

export { auth, firestore }

---

in .env

REACT_APP_FIREBASE_API_KEY = raw key
REACT_APP_FIREBASE_AUTH_DOMAIN = raw key
REACT_APP_FIREBASE_DATABASE_URL = raw key
REACT_APP_FIREBASE_PROJECT_ID = raw key
REACT_APP_FIREBASE_STORAGE_BUCKET = raw key
REACT_APP_FIREBASE_MESSAGING_SENDER_ID = raw key
REACT_APP_FIREBASE_APP_ID = raw key
REACT_APP_MEASUREMENT_ID = raw key

---

What I think is wrong, but do not know the solution to
Based on messing around and many searches, I think the issue narrows down to auth
which means I need use initalizeApp with default values, but then do I create app2 with blank set of values? is this a good way to do it?

Also another question..
So people seem to use .env.local, but when I create .env.local, VSCode just recognize them as a regular textfile. Do I need to install some kind of npm?

I tried to make 2nd initializeApp.. with preloaded default value, but React is complaining that it's a duplicate and can't have 2 of these..

Answer 1

I was able to solve my issue.
The issue was that I had .env file inside of src folder,
when it's supposed to be located outside of src folder (aka at root)
Also had to restart the server to reflect the changes.

Source: https://stackoverflow.com/a/68945430/20362113

Steps to use environment variables in a CREATE REACT APP (Without dotenv package)

• Create a new file called .env in the root folder of the project (NOT inside src folder but one level up. Remember, it should be at the same level as package.json (THIS IS VERY IMPORTANT!!)

• Define your variables like so (Note that every variable you define should start with REACT_APP_)

  Example : .env file

  REACT_APP_ACCESS_KEY=8Sh9ZLwZevicWC-f_lmHvvyMu44cg3yZBU

  Note: You don't have to enclose the value in "" or ''

• Now you can use the variable in any of your components like so

  const apiKey = process.env.REACT_APP_ACCESS_KEY

  The name should match the key given in the .env file

• Now before you try this out, always remember to restart the local server. Once you run npm start it works. This step applies whenever you make changes to the .env file. We generally forget this step so it might not work.

• Optionally, check if .env entry is present in .gitignore file. If the entry of .env exists in .gitignore then your .env file will not be pushed to github(This is the reason why we use .env in the first place).