If you're working with Next.js, make sure to prefix each environment variable with NEXT_PUBLIC_.

const apiConfig = {
    endpoint: process.env.NEXT_PUBLIC_API_ENDPOINT,
    key: process.env.NEXT_PUBLIC_API_KEY,
    secret: process.env.NEXT_PUBLIC_API_SECRET,
    timeout: process.env.NEXT_PUBLIC_API_TIMEOUT,
    version: process.env.NEXT_PUBLIC_API_VERSION,
};

Your API key seems to be invalid, so please double-check that you have copied it correctly

This particular error can crop up for a variety of reasons. Allow me to share how I tackled and resolved this issue successfully.

Initially, I clicked on the copy button to capture the firebaseConfig variable for my website and saved it in a file named firebase.config.js within my source folder.

export const firebaseConfig = {
    apiKey: 'AIzaSxxxxxxxxxxxxxxxxxxxxxxx',
    authDomain: 'fir-axxxxxxxxxxxxxxxxxxxxxxxxxx',
    projectId: 'fir-axxxxxxxxxxxxxxxxx',
    storageBucket: 'fir-axxxxxxxxxxxxxxxxxx',
    messagingSenderId: '106xxxxxxxxxxxxxx',
    appId: '1:1064xxxxxxxxxxxxxxxxxxxxxxxxxxxx',
};

Next, I imported the firebaseConfig variable into my App.js file.

import { firebaseConfig } from './firebase.config';

Finally, I utilized this variable in the following line of code.

firebase.initializeApp(firebaseConfig);

If you find this solution beneficial, kindly consider giving an upvote. Thank you!

To begin, start by setting up firebase and then Include firebase initially as import firebase from 'firebase'; or in a JavaScript script. The following code is utilized to establish a connection between the app and firebase, providing the required ID and other connection details.

const config ={

    apiKey: "XXXXXXXXXXXX",
    authDomain: "app.firebaseapp.com",
    databaseURL: "https://app.firebaseio.com",
    projectId: "XXXXXX2",
    storageBucket: "XXXXXX.appspot.com",
    messagingSenderId: "5..........",
    appId: "1:52807............."
}

firebase.initializeApp(config);
export default firebase;

Working with React has been a learning experience.
I encountered a similar issue due to an extra comma in my .env file.

Prior setup:

REACT_APP_API_KEY="AIXXXXXXXXXXXX",

Corrected configuration:

REACT_APP_API_KEY="AIXXXXXXXXXXXX"

Once you have configured Firebase like this:

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

To stop the server, simply press Ctrl + C and then run the server again using npm start. This should resolve any issues. I encountered a similar error and found that following these steps helped me get my code up and running smoothly. Give it a try, it might work for you too.

Experiencing a comparable error, I followed these steps to resolve it: The issue arose after creating a .env file within my React project. Simply restarting the app allowed everything to function correctly once more. To fix this problem, I pressed Ctrl + C, then confirmed with 'Y', and proceeded to restart using npm start or any other previously used command.

To successfully complete the task, simply include the "export" keyword before const.

For instance:

export const settings = {

apiKey: "XXXXXXXXXXXX",
authDomain: "app.firebaseapp.com",
databaseURL: "https://app.firebaseio.com",
projectId: "XXXXXX2",
storageBucket: "XXXXXX.appspot.com",
messagingSenderId: "5..........",
appId: "1:52807............."

}

After experiencing the same issue, I discovered that the root cause was actually my failure to update the Vercel environment variables instead of just focusing on my local .env file.

Once I made sure to input the correct information in the Vercel environment variables, the error disappeared entirely.

If you need to manage your variables, you can do so through this link:

https://vercel.com/<team_name>/<project_name>/settings/environment-variables

For those utilizing React with .env, here are two Solutions:

// Firebase configuration for your web app
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,
};

1. Enclose environmental variables in quotes:

// Firebase configuration for your web app
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",
};

2. Restart the Server to accept env variables without quotes:

ctrl + C
yarn start / npm start

export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: "AIzxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "chxxxxxxxxxxxxxx",
    projectId: "chxxxxxxxxxxxxxxxx",
    storageBucket: "chxxxxxxxxxxxxxxxx",
    messagingSenderId: "7xxxxxxxxxxxxxxx",
    appId: "1:7xxxxxxxxxxxxxxxxxxxxxxxxx",
    measurementId: "G-xxxxxxxxx"
  }
};

include this code snippet in your environment.ts file

Before anything else...

1. Double-check that the key has been copied accurately.
2. If you have verified the accuracy of the key and everything else seems fine but the Error persists...
3. simply close all your files and log out of your Gmail account
4. then log back in and reopen your files and folders.

With any luck, this solution will resolve the issue. It worked for me in a similar situation.

For those utilizing Vite in conjunction with Firebase, it is recommended to adhere to the following structure

const firebaseConfig = {
  apiKey: import.meta.env.REACT_APP_API_KEY,
  authDomain: import.meta.env.REACT_APP_AUTH_DOMAIN,
  projectId: import.meta.env.REACT_APP_PROJECT_ID,
  storageBucket: import.meta.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.REACT_APP_MESSAGE_SENDER_ID,
  appId: import.meta.env.REACT_APP_APP_ID,
};

Best Practices for Configuring Firebase with .env Files

It is recommended to steer clear of using reserved environment variable names, especially those that begin with FIREBASE_

Tips for Setting Up Firebase in NextJS & .env Files:

Ensure that all variables necessary for client-side firebase are preceded by NEXT_PUBLIC_, such as NEXT_PUBLIC_FB_API_KEY

IMPORTANT: Be cautious not to add the NEXT_PUBLIC_ prefix to firebase-admin configuration variables, like your private key, as doing so could inadvertently expose sensitive information to the client.

If you are confident in the accuracy of your data, the issue could potentially stem from incorrect use of quotation marks. You can test this solution:

Original : apiKey: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx,
Updated : apiKey:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",

When developing with Next.js, it's important to note that environment variables prefixed with NEXT_PUBLIC_ are accessible in client-side code as they are exposed to the browser. This ensures that these variables can be utilized on both the server and client sides.

If you are using initializeApp(firebaseConfig) within client-side code, such as in a Next.js application, remember that the Firebase initialization process occurs on the client side. Therefore, any environment variables required for client-side operations need to be defined accordingly.

To set up your environment variables, follow this structure:

.env ->

NEXT_PUBLIC_FIREBASE_API_KEY=A**********
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=*******.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=********
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=**********.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=************
NEXT_PUBLIC_FIREBASE_APP_ID=***************

Then, reference these variables like so:

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

firebase.initializeApp(firebaseConfig);

When working on my React.js project, I encountered a similar issue. It turned out that I had mistakenly placed my .env file inside the 'src' folder instead of the client folder. To avoid this problem, always make sure your .env file is located in the correct directory.