I am developing a frontend application using React and Vite. I have cloned a React/Bootstrap theme template (https://themes.getbootstrap.com/preview/?theme_id=19889) and am modifying it for my project. However, I have encountered an error when attempting to configure and initialize Firebase for authentication.
Here is the code I am trying to implement:
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
console.log(process.env);
const firebaseConfig = {
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_FIREBASE_APP_ID
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app); // gives us an auth instance
export default auth; // in order to use this auth instance elsewhere
However, when I try to run the project and open the console window in Google Chrome, I receive the following error:
Uncaught ReferenceError: process is not defined
at firebase.js?t=1714400003156:4:13
I am unsure as to why this error is occurring, especially as I have ensured that the ‘process.env’ instances in my code correctly correspond to variables in my .env file. Any help on this issue would be immensely appreciated.
Tags: reactjs, firebase, vitejs, environment-variables