How to replace Firebase Config data with .env variables

Question

I am new to React Native, and I have been creating an app with Firebase for the backend. I learned that it is too dangerous if I just copy and paste firebase config from the console page in a file called firebaseConfig.js.

I created a .env file and wrote some local variables (Idk if I call them correct tho), replace firebase config info such as apiKey with the variables.

I am not sure where is wrong.

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
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,
  // measurementId: "G-421JHRD4GK",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

# The .env file is used to store the API keys and other sensitive information. This file is not tracked by git, so it is not uploaded to GitHub. This is a good place to store API keys and other sensitive information that you do not want to be public.

REACT_APP_API_KEY = "config-info",
REACT_APP_AUTH_DOMAIN = "config-info",
REACT_APP_PROJECT_ID = "config-info",
... more

{
  "name": "byui-board-expo",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-native-community/datetimepicker": "6.2.0",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/bottom-tabs": "^6.4.0",
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/stack": "^6.3.3",
    "expo": "~46.0.16",
    "expo-status-bar": "~1.4.0",
    "firebase": "^9.14.0",
    "native-base": "^3.4.21",
    "react": "18.0.0",
    "react-native": "0.69.6",
    "react-native-elements": "^3.4.2",
    "react-native-gesture-handler": "~2.5.0",
    "react-native-reanimated": "^2.12.0",
    "react-native-safe-area-context": "4.3.1",
    "react-native-screens": "~3.15.0",
    "react-native-svg": "12.3.0",
    "react-native-vector-icons": "^9.2.0",
    "react-native-webview": "^11.23.1",
    "react-native-xml2js": "^1.0.3"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

score 0 · Answer 1 · edited Nov 17 '22 at 05:00

It looks like you are using the client SDKs to access firebase. This answer by @puf clarifies that the config can and should be exposed in the client application so users can access your firebase resources to interact with your application. Wrapping everything in an env variable in this instance is unnecessary as firebase protects access to your data through security rules and app attestation (when applied).

How to replace Firebase Config data with .env variables

1 Answers1