react firebase config .env file doesn't work - reactjs

Question

i have a question about configuration of firebase with a react app. I put all firebase config info in .env file at the top directory as environmental variables. When I tried to use them as process.env.REACT_APP_smth, they all didn't work. Once I replaced the variables to real, raw config info, my app worked. But For sure, it's too dangerous so I don't wanna do it.
Also, the .env file was darker in vs code like mentioning it's not valid or smth.
Anyone knows how to tackle with this issue??
Thanks for your time and effort here in advance.
.env
I replaced REACT_APP_FIREBASE_API_KEY with 123456789.
REACT_APP_FIREBASE_API_KEY = "123456789"
REACT_APP_FIREBASE_AUTH_DOMAIN = "kinnikuhub.firebaseapp.com"
REACT_APP_FIREBASE_DATABASE_URL = "https://kinnikuHub.firebaseio.com"
REACT_APP_FIREBASE_PROJECT_ID = "kinnikuhub"
REACT_APP_FIREBASE_STORAGE_BUCKET = "kinnikuhub.appspot.com"
REACT_APP_FIREBASE_MESSAGING_SENDER_ID = "131675559"
REACT_APP_FIREBASE_APP_ID = "1:131675559:web:3ca3bbad263b6be90ff282"
firebase.js
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// import { getAnalytics } from "firebase/analytics";
import { addDoc, getDocs, getFirestore } from "firebase/firestore"
import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
import { collection } from "firebase/firestore";
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_FIREBASE_APP_ID,
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// const analytics = getAnalytics(app);
export const db = getFirestore();
export const auth = getAuth(app);
const provider = new GoogleAuthProvider();
export const signInWithGoogle = () => {
signInWithPopup(auth, provider)
.then((res) => {
console.log(res);
// todo: Why create users table?? To let users have personal info, number of answers and quizzes cretaed, biography, sns links, etc
// todo: 1st, check if res.user exists
const userCollectionRef = collection(db, 'users');
let userExistance = false;
console.log(`currentUser.uid => ${res.user.uid}`)
console.log(userExistance)
const checkUserExists = async () => {
const querySnapshot = await getDocs(userCollectionRef);
querySnapshot.forEach( (doc) => {
// doc.data() is never undefined for query doc snapshots
// console.log(doc.id, " => ", doc.data());
// console.log(`currentUser.uid => ${res.user.uid}`)
if (doc.data().uid === res.user.uid) {
userExistance = true;
// console.log(userExistance)
return 0;
}
});
console.log(userExistance)
// todo: 2nd, add this user to users collection if it doesn't exists
if (userExistance === false) {
console.log(`userExistance is false, meaning this user hasn't been registerd so I am going add the user into users collection!!! ${res.user.displayName}, ${JSON.stringify(res.user)}`)
const addUser = async () => {
const payload = {
username: res.user.displayName,
uid: res.user.uid,
email: res.user.email,
photoURL: res.user.photoURL,
createdAt: new Date(),
bio: "biography",
};
await addDoc(userCollectionRef, payload);
}
addUser();
} else {
console.log('This user has been already registered!! So glad he/she keeps using this app!!')
}
}
checkUserExists();
}).catch((err) => {
console.log(err);
})
}
// export const AuthState = () => {
// const [userInfo, setUserInfo] = useState({})
// onAuthStateChanged(auth, (user) => {
// if (user) {
// const username = user.displayName;
// const uid = user.uid;
// const email = user.email;
// const photoURL = user.photoURL
// // const emailVerified = user.emailVerified
// setUserInfo({username, uid, email, photoURL});
// console.log(`username => ${username}`)
// console.log(`uid => ${uid}`)
// console.log(`email => ${email}`)
// console.log(`photoURL => ${photoURL}`)
// // console.log(`emailVerified => ${emailVerified}`)
// return userInfo;
// } else {
// console.log("no user signed in")
// }
// })
// }
// sendEmailVerification(auth.currentUser)
// .then(() => {
// console.log('email verification sent!')
// })
##.gitignore
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
.env
npm-debug.log*
yarn-debug.log*
yarn-error.log*
Background:
Yesterday, I initialized my pc to install Monterey in my macbook air and files in the pc were all gone. Then, I git-cloned the repo of this app.

Answer 1

You have everything correct from what I see except the file naming itself. I too struggled to try to get this to work until I made this simple change:
Try renaming your 'firebase.js' file to 'firebase.config.js', this will read your process.env variables as actual variables.

Answer 2

The variable values in .env should not be enclosed in the quotation marks. Remove the quotation marks.

Answer 3

I also had the same issue. I solved the issue by only replacing the projectID with the actual variable.
ex:-
const firebaseConfig = {
apiKey: process.env.REACT_APP_APIKEY,
authDomain: process.env.REACT_APP_AUTHDOMAIN,
projectId: "personal-portfolio-f1e9f",
storageBucket: process.env.REACT_APP_STORAGEBUCKET,
messagingSenderId: process.env.REACT_APP_MESSAGINGSENDERID,
appId: process.env.APPID,
measurementId: process.env.MEASUREMENTID
};