using the environment variable, Firebase invalid api key error in console

Question

I am using Google Sign In, Firebase, and React firebase hook to login react web application. inserting firebaseConfig API (.env.local) file and setting the secret keys to firebase config causes errors on the console

.env.local

REACT_APP_AUTH_DOMAIN=doctors-portal-6bc13.firebaseapp.com
REACT_APP_PROJECT_ID=doctors-portal-6bc13
REACT_APP_STORAGE_BUCKET=doctors-portal-6bc13.appspot.com
REACT_APP_MESSAGING_SENDER_ID=725454304359
REACT_APP_APP_ID=1:725454304359:web:49840cbf09a6b578e210c2```

firebase.init.js file

import { initializeApp } from "firebase/app";
import {getAuth } from "firebase/auth";

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


const app = initializeApp(firebaseConfig);

const auth = getAuth(app);
export default auth;```

Works directly when using Firebase API without using (.env.local)

const firebaseConfig = {
  apiKey: "AIzaSyA72Jfi_WXWie-i641mAYhLv3QgiynzLxQ",
  authDomain: "doctors-portal-6bc13.firebaseapp.com",
  projectId: "doctors-portal-6bc13",
  storageBucket: "doctors-portal-6bc13.appspot.com",
  messagingSenderId: "725454304359",
  appId: "1:725454304359:web:49840cbf09a6b578e210c2",
};

writting like this does not give any error

Answer 1

try this: https://i.stack.imgur.com/xH4Dm.png You have to place your .env path between `${

It works for me.