反应 firebase config .env 文件不起作用答案

【问题标题】：react firebase config .env file doesn't work反应 firebase config .env 文件不起作用
【发布时间】：2022-07-20 20:06:11
【问题描述】：

我有一个关于使用 react 应用程序配置 firebase 的问题。我将所有 firebase 配置信息放在顶层目录的 .env 文件中作为环境变量。当我尝试将它们用作process.env.REACT_APP_smth 时，它们都不起作用。一旦我将变量替换为真实的原始配置信息，我的应用程序就可以工作了。但可以肯定的是，这太危险了，所以我不想这样做。

另外，.env 文件在 vs 代码中更暗，比如提到它无效或smth。

有人知道如何解决这个问题吗？提前感谢您的时间和精力。

.env

我将 REACT_APP_FIREBASE_API_KEY 替换为 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*

背景：昨天，我初始化了我的电脑以在我的 macbook air 中安装 Monterey，而电脑中的文件都不见了。然后，我 git 克隆了这个应用程序的 repo。

【问题讨论】：

标签： reactjs firebase firebase-authentication

【解决方案1】：

除了文件命名本身之外，我所看到的一切都是正确的。在我做出这个简单的改变之前，我也一直在努力让它发挥作用：

尝试将您的“firebase.js”文件重命名为“firebase.config.js”，这会将您的 process.env 变量读取为实际变量。

【讨论】：

【解决方案2】：

我也有同样的问题。我通过仅用实际变量替换 projectID 解决了这个问题。

例如：-

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
  };

【讨论】：

【解决方案3】：

文件名必须是 .env.local 而不是 .env

【讨论】：