0

I want to hide my firebase API key with the environment variable. But it gives an error.

Error Image

Firebase.init.js File

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

const firebaseConfig = {
    apiKey: process.env.REACT_APP_apiKey,
    authDomain: process.env.REACT_APP_authDomain,
    projectId: process.env.REACT_APP_projectId,
    storageBucket: process.env.REACT_APP_storageBucket,
    messagingSenderId: process.env.REACT_APP_messagingSenderId,
    appId: process.env.REACT_APP_appId
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
export default auth;

.env.local File

REACT_APPapiKey='XXX___XXXX'
REACT_APPauthDomain='XXXX___XXXX'
REACT_APPprojectId='XXXXX____XXXXX'
REACT_APPstorageBucket='XXXXX___XXXXX'
REACT_APPmessagingSenderId='XXXXX____XXXX'
REACT_APPappId='XXXXXX___XXXXX'
Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
Neel Paul
  • 11
  • If this would work properly, the values would just be baked into the code at compile time. You can't hide the value from the client if the client needs it. – deceze Apr 30 '22 at 14:18
  • I also recommend checking out/: https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public – Frank van Puffelen Apr 30 '22 at 15:02

1 Answers1

0

kindly ensure the variables defined are consistent: Compare in your .env.local File and Firebase.init.js File

REACT_APPapiKey !== REACT_APP_apiKey

Also check how you are importing in the component where it's used

Okiemute Gold
  • 459
  • 3
  • 10