Firebase denies access when using env file

Question

I am trying to create a react-app that works with firebase. So, normally the credentials look like this:

const firebaseConfig = {
    apiKey: ...,
    authDomain: ..., 
    projectId: ...,
    storageBucket: ...,
    messagingSenderId: ...,
    appId: ...
};

and that works just fine. However, if I create an env file and access it like this:

const firebaseConfig = {
    apiKey: process.env.REACT_APP_API_KEY,
    authDomain: process.env.REACT_APP_AUTH_DOMAIN, 
    projectId: process.env.REACT_APP_PROJECT_ID,
    storageBucket:process.env.REACT_APP_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_APP_ID
};

It throws an error:

firebase/firestore: Firestore (9.6.1): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=permission-denied]: Permission denied on resource project "xxx",.

Any idea if I have to do something special to load the env file or why this is happening?

Answer 1

How does your .env file look? If you have saved the key value pairs with quotes like:

REACT_APP_FIREBASE_PROJECT_ID = "your-project-id"

It's not going to work because you're also adding quotes when you use it in an object.

You need to make sure the key value pairs are saved without quotes in your .env file like this:

REACT_APP_FIREBASE_PROJECT_ID = your-project-id