Firebase config in clear text

[w3bdesign]

Hi @LevanisART

Just wanted to let you know that in /src/firebase/firebase.utils.js you should move the config object to a .ENV file for local development and load the information in production by setting environment variables in Heroku/Netlify etc.
This is for security reasons so that nobody can access your configuration settings.

You can create a .ENV file with the following (you need to set the environment variables manually in Heroku/Netlify etc as your .ENV should be in your .gitignore and will not be uploaded):

REACT_APP_APIKEY=INSERT THIS FROM GOOGLE
REACT_APP_AUTH_DOMAIN=INSERT THIS FROM GOOGLE
REACT_APP_DATABASEURL=INSERT THIS FROM GOOGLE
REACT_APP_PROJECTID=INSERT THIS FROM GOOGLE
REACT_APP_STORAGEBUCKET=INSERT THIS FROM GOOGLE
REACT_APP_MESSAGINGSENDERID=INSERT THIS FROM GOOGLE
REACT_APP_APPID=INSERT THIS FROM GOOGLE
REACT_APP_MEASUREMENTID=INSERT THIS FROM GOOGLE

Then in your firebase.utils.js you can modify the config object to this:

const config = {
  apiKey: process.env.REACT_APP_APIKEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASEURL,
  projectId: process.env.REACT_APP_PROJECTID,
  storageBucket: process.env.REACT_APP_STORAGEBUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGINGSENDERID,
  appId: process.env.REACT_APP_APPID,
  measurementId: process.env.REACT_APP_MEASUREMENTID
};

Also take a look at this for more information: https://create-react-app.dev/docs/adding-custom-environment-variables/

You should also know that the config information will remain in the commit history, so you should remove firebase.utils.js from your commit history as well.

Be careful with running this command, but you can take a look at https://help.github.com/en/github/authenticating-to-github/removing-sensitive-data-from-a-repository

Let me know if anything is unclear!