getting error while using .env file for firebase auth in eact js

i'd tried alot my . env file is in my root directory,,replaced all variables using copy pest but still getting invalid api key error.

this is my firebase.inializeApp config

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_MESSAGEING_SENDER_ID,
 appId: process.env.REACT_APP_APP_ID

this is how i written my .env file with and without ""

process.env.REACT_APP_API_KEY=
process.env.REACT_APP_AUTH_DOMAIN=
process.env.REACT_APP_PROJECT_ID=
process.env.REACT_APP_STORAGE_BUCKET=
process.env.REACT_APP_MESSAGEING_SENDER_ID=
process.env.REACT_APP_APP_ID=

this is my package.json file dependencies

 "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "firebase": "^7.24.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-firebase-hooks": "^2.2.0",
    "react-router": "^6.2.1",
    "react-scripts": "^3.4.3"
  }

Solution 1:

You dont need to write process.env in the beginning of your variables in .env file , so your .env should probably look like this

REACT_APP_API_KEY=
REACT_APP_AUTH_DOMAIN=
REACT_APP_PROJECT_ID=
REACT_APP_STORAGE_BUCKET=
REACT_APP_MESSAGEING_SENDER_ID=
REACT_APP_APP_ID=