Develop Reference

Firebase: No Firebase App '[DEFAULT]' has been created - can't solve

I started looking into authentication and installed firebase using Node.js, then took the CDN links from the documentation. It worked once on saturday then hasnt worked since.
Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app-compat/no-app).
This is the current look of the file that handels logging in.
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.16.0/firebase-app.js';
const firebaseConfig = {
apiKey: 'AIzaSyBfb3L9WKUf7qhVyzxpxKBRWUWbcMohUxY',
authDomain: 'study-track-7df2d.firebaseapp.com',
projectId: 'study-track-7df2d',
storageBucket: 'study-track-7df2d.appspot.com',
messagingSenderId: '1015802748429',
appId: '1:1015802748429:web:e7884ea90aec8d73d63f44',
measurementId: 'G-RPCPGGCFV1',
};
const app = initializeApp(firebaseConfig);
const btnCreate = document.querySelector('.create-account');
function googleLogin() {
const provider = new firebase.auth.GoogleAuthProvider();
firebase
.auth()
.signInWithPopup(provider)
.then(result =\> {
const user = result.user;
console.log(user);
})
.catch(console.log);
}
btnCreate.addEventListener('click', function (e) {
googleLogin();
});
These are the two CDN calls from the HTML
<script type="module" src="https://www.gstatic.com/firebasejs/9.16.0/firebase-app-compat.js"></script>
<script type="module" src="https://www.gstatic.com/firebasejs/9.16.0/firebase-auth-compat.js"></script>

#firebase/app-check: AppCheck: Requests throttled due to 400 error. Attempts allowed again after 00m:01s (appCheck/throttled)

I have just set up my app and integrated appcheck
and the code looks like
import { initializeApp, getApps } from "firebase/app";
import { getAuth, } from "firebase/auth";
import { getAnalytics } from "firebase/analytics";
import { getFirestore } from "firebase/firestore";
let app;
if (!getApps().length) {
app = initializeApp({
apiKey: process.env.NEXT_PUBLIC_API_KEY,
authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
databaseURL: process.env.NEXT_PUBLIC_DATABASE_URL,
messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_ID,
appId: process.env.NEXT_PUBLIC_APP_ID,
});
}
async function initialize() {
const { initializeApp } = require("firebase/app");
const { initializeAppCheck, ReCaptchaV3Provider } = require("firebase/app-check");
const app = initializeApp({
apiKey: process.env.NEXT_PUBLIC_API_KEY,
authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
databaseURL: process.env.NEXT_PUBLIC_DATABASE_URL,
messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_ID,
appId: process.env.NEXT_PUBLIC_APP_ID,
});
return initializeAppCheck(app, {
provider: new ReCaptchaV3Provider(process.env.NEXT_PUBLIC_APP_CHECK_KEY),
isTokenAutoRefreshEnabled: true
});
}
if (typeof window !== "undefined") {
initialize().then((res)=>{
// console.log(res)
}).catch((err)=>{
throw(err)
})
}
export const auth = getAuth();
export const db = getFirestore();
export default app;
So when i set isTokenAutoRefreshEnabled to true, the error comes up and when I set it to false everything works.
I am using firebase ^9.9.4 and this gives the above error so I decided to downgrade and use firebase ^9.8.2 since I had set up a different project the same way and there were no errors. In this version, I get the error
FirebaseError: AppCheck: Fetch server returned an HTTP error status. HTTP status: 400. (appCheck/fetch-status-error).
at exchangeToken
What is this error and how can I fix it

undefined is not an object (evaluating 'firebase.initializeApp')

Whenevr I open the debugger in safari I get an error saying that undefined is not an object (evaluating 'firebase.initializeApp') and it points toward firebase.initializeApp(firebaseConfig);.
var firebase
let firebaseConfig = {
apiKey: "removed",
authDomain: "removed",
projectId: "removed",
storageBucket: "removed",
messagingSenderId: "removed",
appId: "removed"
};
firebase.initializeApp(firebaseConfig);
let db = firebase.firestore();

firebase.initializeApp is the v8 (and below) way of initializing the app. You could consider using the v9 (and above) style like this:
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.3/firebase-app.js";
const firebaseConfig = {
//...
};
const app = initializeApp(firebaseConfig);
More details on initialization upgrades to v9 here.
Or, using the Compat version (compatability with v8)
import firebase from "https://www.gstatic.com/firebasejs/9.8.4/firebase-app-compat.js"
firebase.initializeApp({ /* config */ });

How to Fix Firebase invalid API key

I'm using my API key stored in a .env.local file. And it setup correctly but not working
assert.ts:128 Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key).
at createErrorInternal (assert.ts:128:1)
at _assert (assert.ts:153:1)
at register.ts:67:1
at Component.instanceFactory (register.ts:90:1)
at Provider.getOrInitializeService (provider.ts:318:1)
at Provider.initialize (provider.ts:242:1)
at initializeAuth (initialize.ts:66:1)
at getAuth (index.ts:44:1)
at Module../src/firebase.init.js (firebase.init.js:22:1)
at Module.options.factory (react refresh:6:1)
I don't know why React is giving me an error. I intialized firebase in the following file
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
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,
measurementId:process.env.REACT_APP_measurementId
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
export default auth;

It is likely that you are having multiple render of your app. Do it this way:
const firebaseConfig = {
apiKey: process.env.REACT_APP_apiKey || 'test',
authDomain: process.env.REACT_APP_authDomain || 'test',
projectId: process.env.REACT_APP_projectId || 'test',
storageBucket: process.env.REACT_APP_storageBucket || 'test',
messagingSenderId: process.env.REACT_APP_messagingSenderId || 'test',
appId: process.env.REACT_APP_appId || 'test',
measurementId:process.env.REACT_APP_measurementId || 'test'
};
In that case at the first render, when the environment variables are yet available, you will have default values, not null or undefined values.
I hope it helps someone.

firebase.database.ref is not a function error

I am trying to read/write data from my database, but I always get this error:
firebase.database.ref is not a function error
Here is how I have included firebase into a project:
<script src="https://www.gstatic.com/firebasejs/5.9.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.3/firebase-database.js"></script>
then:
<script>
var config = {
...
};
firebase.initializeApp(config);
</script>
The Firebase Auth works correctly. But when I do this:
function insertUser(user,name) {
var ref = firebase.database.ref();
ref.collection("users").doc(user.uid).set({
uid: user.uid,
email: user.email,
name: name
})
.then(function() {
console.log("Document successfully written!");
})
.catch(function(error) {
console.error("Error writing document: ", error);
});
}
I get error above. What am I doing wrong?

database() is a method so change it to the following:
var reference = firebase.database().ref();
Also better not to have same variable and method name.

I also get a database function not found issue with latest firebase library. After researching what I found is, It is due to Javascript I am importing for the database:
Previously I was using below script, Which was not working:
<script src="https://www.gstatic.com/firebasejs/7.16.0/firebase-app.js"></script>
After removing -app from the script URL, it start working:
<script src="https://www.gstatic.com/firebasejs/7.16.0/firebase.js"></script>
Hope this will be helpful for others.

If you are importing firestore (database) module into the some React component make sure you will import "firebase/database" and export export const firestore = app.database() in main firebase file
Firebase.tsx
import firebase from "firebase/app"
import "firebase/auth"
import "firebase/database"
const app = firebase.initializeApp({
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
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
})
export const firestore = app.database()
export const auth = app.auth()
export default app
myComponent.tsx
import React from "react";
import {firestore} from '../../../Firebase'
export default function Home() {
const db = firestore.refFromURL("https://<project>.firebaseio.com")
return (
...
)
}

I ran into the same problem. I just added this CDN
<script src="https://www.gstatic.com/firebasejs/8.0.1/firebase-database.js"></script>