How do I fix signin error with firebase authentication

Question

I am trying to create simple sign-in flow using firebase-ui. I am using google as my authentication. I am following instructions from https://github.com/firebase/firebaseui-web-react

This is my src/login.js

// Import FirebaseAuth and firebase.
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import firebase from 'firebase';

// Configure Firebase.
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
  };
firebase.initializeApp(config);

// Configure FirebaseUI.
const uiConfig = {
  // Popup signin flow rather than redirect flow.
  signInFlow: 'popup',
  // Redirect to /signedIn after sign in is successful. Alternatively you can provide a callbacks.signInSuccess function.
  signInSuccessUrl: '/signedIn',
  // We will display Google and Facebook as auth providers.
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
  ],
};

function SignInScreen() {
  return (
    <div>
      <h1>Playground</h1>
      <p>Please sign-in:</p>
      <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
    </div>
  );
}

export default SignInScreen

This is how my index.js looks like

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import SignInScreen from './login.js'
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <SignInScreen />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();

When I run this, I get following error as seen in chrome

[ 2.159s] [firebaseui] Internal error: {"error":{"code":400,"message":"API key not valid. Please pass a valid API key.","errors":[{"message":"API key not valid. Please pass a valid API key.","domain":"global","reason":"badRequest"}],"status":"INVALID_ARGUMENT"}} console. @ index.js:1

I have supplied API key from

Any help will be appreciated

Answer 1

That error means that The API Key that you are using is uncorrect or invalid.

1. Check correctly for the The API Key and copy it correctly and slowly beacause you might copied it wrong. Also copy it from Firebase Console.

2. If you have more than one API Key (Or more than Firebase project or Google Cloud project) You might conflicted between them which might create this problem.

3. Try REGENERATE KEY in Google Cloud Console like this screenshoot :

4. Go to Firebase Console then go to Authorized domain and add the Live Server (Domain) that you are using like localhost:

This is all possible solutions to solve this problem.

Big Thanks for this Thread.