It looks like you're using the development build of the Firebase JS SDK in React App & Invalid API key

Question

I have created a React app and use firestore on it. I've tried to integrate firebase authentication to my app for authorizing logins, according to this document: https://firebase.google.com/docs/database/web/start

firebase.js:

import firebase from "firebase";
import "firebase/firestore";
import "firebase/auth";

const firebaseConfig = {
  apiKey: ***,
  authDomain: ***,
  projectId: ***,
  storageBucket: ***,
  messagingSenderId: ***,
  appId: ***,
  measurementId: ***,
};

firebase.initializeApp(firebaseConfig);
export const db = firebase.firestore();

And I have a context file named AuthContext.js :

import React, { useState, useEffect, createContext } from "react";
import { authentication } from "./firestore";

export const AuthContext = createContext();
export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);

  useEffect(() => {
    authentication.onAuthStateChanged((user) => {
      setCurrentUser(user);
    });
  }, []);

  return (
    <AuthContext.Provider value={{ currentUser }}>
      {children}
    </AuthContext.Provider>
  );
};

And this is App.js :

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Nav from "./pages/Routes/Nav";
import Footer from "./pages/Routes/Footer";
import Home from "./pages/Home";
import Search from "./pages/Search";
import Detail from "./pages/Detail";
import User from "./pages/User";
import LoginSignup from "./pages/LoginSignup";
import { AuthProvider } from "./utility/AuthContext";

function App() {
  return (
    <AuthProvider>
      <Router>
        <div>
          <Nav />
          <Switch>
            <Route path="/" exact>
              <Home />
            </Route>
            <Route path="/search">
              <Search />
            </Route>
            <Route path="/detail/:id">
              <Detail />
            </Route>
            <Route path="/user">
              <User />
            </Route>
            <Route path="/LoginSignup">
              <LoginSignup />
            </Route>
          </Switch>
          <Footer />
        </div>
      </Router>
    </AuthProvider>
  );
}

export default App;

With this configuration, I got this error:

"It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

For the module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');

ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';

Typescript:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';"

And also:

Uncaught t {code: "auth/invalid-api-key", message: "Your API key is invalid, please check you have copied it correctly.", a: null}

I have tried to add these lines to firebase.js:

import firebase from "firebase/app"

And I have researched on Google and Stackoverflow but couldn't solve it. I am absolutely sure that the API key is correct. I checked it over and over. I think I'm missing something.

This is the screenshot of the error:

On these lines, what am I missing?

Answer 1

Swap import firebase from "firebase"; . with import firebase from "firebase/app"; to get rid of the development build warning. Make sure you remove the original line or the error won't go away.

To fix the ID try going to https://console.firebase.google.com/u/0/project/[YOUR_PROJECT_ID]/settings/general/

Over there you should have a properly prefilled firebaseConfig that you can copy paste.