Firebase auth and firestore functionalities not working - javascript

I am using firebase for the backend part of my application.
My code goes like this:
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
import {getFirestore,collection,getDocs} from 'firebase/firestore/lite'
// Your web app's Firebase configuration
const firebaseConfig = {
//My app's Config object...
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
</script>
<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-firestore.js"></script>
auth script:
const auth=firebase.auth();
const db=firebase.firestore();
I am getting these errors in the browser console:
Uncaught SyntaxError: Unexpected token 'export'
Uncaught SyntaxError: Cannot use import statement outside a module
Uncaught SyntaxError: Cannot use import statement outside a module
Uncaught ReferenceError: firebase is not defined
at auth.js:1
Can someone pls help me!

Since version 9 of its JavaScript SDK, Firebase has changed the way you call its modules. These two lines in your code are for the v8 and before SDKs:
const auth=firebase.auth();
const db=firebase.firestore();
The equivalent for v9 and above is:
const auth = getAuth();
const db = getFirestore()
I recommend checking out the Firebase documentation, which contains examples for both SDK variants, the upgrade guide for the v9 SDK, and this blog post on the modular SDK design

Related

Failed to resolve 'firebase'

I am struggling to get started with Firebase auth in my web application. I am following this tutorial. I installed Parceljs to be able to run the app locally. When I add the line var firebase = require('firebase'); I get the error #parcel/core: Failed to resolve 'firebase' from './app.js' How do I fix this?
I include the js code in my index.html like so:
<script type="module" src="app.js"></script>
If I comment out var firebase = require('firebase'); the code compiles (parcel). The row below seems fine (var firebaseui = require('firebaseui'); ) though.
I was able to bypass the error a bit by commenting out the row that gave the error and replacing it with import { getAuth } from 'firebase/auth';. Then I had to change the code for initialising the Firebase UI widget like so:
const app = initializeApp(firebaseConfig);
// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI( getAuth(app) );
But when I specify the FirebaseUI configuration I get the error Uncaught ReferenceError: firebase is not defined in the browser console on the row firebase.auth.GoogleAuthProvider.PROVIDER_ID. So I come back to the same problem not being able to run var firebase = require('firebase');

Firebase authentication error in javascript

I'm encountering an error when trying to add a user to firebase authentication. The const auth is defined before the script is loaded. I've tried calling with and without the app parameter. The user is not being added and I can't seem to figure this error out. I've cut out only the code I think is relevant. Apologies if this is a stupid question, I'm just diving into HTML and JS.
Error: Uncaught ReferenceError: auth is not defined
at HTMLFormElement. (auth.js:12)
From html file:
import { getAuth, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-auth.js";
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-app.js";
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
<script src="js\auth.js"></script>
From js file:
auth.createUserWithEmailAndPassword(email, password).then(cred => {
console.log(cred);
});
You're using the modular SDK, which means that imported names are no longer added to a global namespace. If your include file (js.auth.js) needs access to the auth service, you will need to import getAuth into that file too and initialize it there as well.

service firestore is not available

I'm trying to connect to my firestore using plain javascript. (I wanna get up to speed and running for now)
index.js:
import app from './firebase.js'
import { getFirestore } from 'https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js'
const db = getFirestore(app)
However, this throws an error: Uncaught Error: Service firestore is not available
firebase.js:
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-app.js";
const firebaseConfig = {
// configs
};
// Initialize Firebase
let app
export default app = initializeApp(firebaseConfig);
Then I import the script in my index.html:
<!DOCTYPE html>
....
<script type="module" src="index.html"></script>
Note: I can read and write to the firestore using firebase web interface.
So if you want to use plain js (without bundlers like webpack), you would need to put your JS code into script tag like so:
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-app.js";
const firebaseConfig = { ... };
const app = initializeApp(firebaseConfig);
</script>
Otherwise, if you want to use it like you intended to do so, you would need to:
install a firebase package
a module bundler (e.g. webpack) to bundle the files for you
Using npm, but got the same error message.
Restarted terminal & uninstalled and reinstall firebase, then worked...not sure which one that did it though.
You need to upgrade your firestore version 9.0.0 to 9.4.0 and it work fine
import { getFirestore, collection, getDocs } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-firestore.js";
Change your import link import { getFirestore } from "https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js";
to import { getFirestore } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-app.js";
just update the firebase version from 9.0.0 to 9.0.1

How to enable `ignoreUndefinedProperties` in node js

I am developing a REST api for my application in Nodejs and Express. But each time i try to send a request I get an undefined error. Please how can i enable 'ignoreundefinedproperties'
once you import the firebase-admin sdk (in Typescript) like this
import * as firestore from "firebase-admin";
then you just need to set the setting like this :
const db = firestore.firestore();
db.settings({ ignoreUndefinedProperties: true })
If you are getting errors for calling this more than once, I recommend putting admin.firestore().settings({ignoreUndefinedProperties:true}); in the same place you have admin.initializeApp();
Here's how I did it in my Typescript project
initialize.ts:
import * as admin from 'firebase-admin';
import 'firebase-functions';
admin.initializeApp();
admin.firestore().settings({ignoreUndefinedProperties:true});
Top of index.ts:
import './initialize.ts'
For anyone using the v9 API:
import { getFirestore, connectFirestoreEmulator, initializeFirestore } from 'firebase/firestore'; // Firebase v9+
// Must be called before getFirestore()
initializeFirestore(app, {
ignoreUndefinedProperties: true
});
const firestore = getFirestore(app);
If you're facing error (Firestore has already been initialized. You can only call settings() once) even after trying other answers, restart your IDE/VSCode and terminal. This is what worked for me.

Firestore arrayUnion

I'm building a basic CRUD app with vue.js and firebase. I'm trying to build out a favorites functionality and have ran into a persistent problem storing the data.
When a using clicks the add to favorites button I'm attempting to add the document id to an array in a "user profile" document. Here's the code:
export function addNewUserAction (type, key, userID){
console.log(userID);
console.log(key);
firebase.firestore().collection('userActions').add({
type: type,
listing: key,
user: userID,
time: Date.now()
})
if(type === 'favorite'){
var sendfav = db.collection('userProfiles').doc(userID).update({
favs: firebase.firestore.FieldValue.arrayUnion(key)
});
}else if(type === 'xout'){
var sendxout = db.collection('userProfiles').doc(userID).update({
xouts: firebase.firestore.FieldValue.arrayUnion(key)
});
}else{
console.error(type + " is not a user action");
}
}
I get the following error in the console:
Uncaught TypeError: Cannot read property 'arrayUnion' of undefined
at addNewUserAction
I have firebase and the db ref imported, and have ran a bogus .set() through each reference to confirm they are pointing at the right spots. I also already have the arrays created in 'userProfile' document.
The firebase install is fresh, like last week fresh, so I should have the function in my build.
Seems that arrayUnion is just not working. Any ideas? The other firestore functions are workin so I'm not sure. Am I blatenly missing something? Thanks
If you are using the Admin SDK
I was having some random errors similar to this, among others as I was experimenting. It turns out it was because I was using firebase admin sdk which requires a slight change compared to the web SDK documentation. If you are using firebase admin, replace
firebase.firestore.FieldValue.arrayUnion(...
with
admin.firestore.FieldValue.arrayUnion(...
I had the same issue...
This would not work
import { fireStore } from '../../firebase';
....
fireStore.collection("users").doc(props.uid).update({
points: fireStore.FieldValue.arrayUnion({value: pointObj.value, reason: pointObj.reason})
});
I changed the import and used the exact code from the Firebase Docs.
This works fine.
import * as firebase from 'firebase';
....
fireStore.collection("users").doc(props.uid).update({
points: firebase.firestore.FieldValue.arrayUnion({value: pointObj.value, reason: pointObj.reason})
});
Hope that helps.
Just wanted to update this. I was able to get this working by importing firebase the following way:
`import firebase from "firebase/firebase";`
I think my issue before was several problems, the first primarily was not having the correct version. I just recently updated to 5.8.4 which completely broke my app. I tried the above as a possible solution and it got my app working again. That led me to try it on with arrayUnion and it worked. Hopefully thats helpful to someone. Thanks all for the help.
Update 10/11/19
So I wanted to add another update to this in case someone new to firebase is chasing their tail with this as I have been.
So the solution I included above works because it uses the entire firebase SDK package ('firebase/firebase') which is fine, however you will importing the entire firebase package which is not ideal. You constantly see an alert in your console that you're using the development SDK
If you're trying to optimize your app and only import the firebase packages you need ( i.e. auth, datatbase, etc.) you need to import the firebase app object from 'firebase/app' then import the required packages. The key is to import as an object as the firebase docs call for:
import * as firebase from 'firebase/app';
Import 'firebase/auth'
If you use:
import firebase from 'firebase/app' this will not work.
Hope that helps someone. I know it's probie stuff but it stumped me for a while in my learning curve.
Firestore - Pass Array To arrayUnion()
let myArray = ["1", "2", "3"];
docRef.update({
test: firebase.firestore.FieldValue.arrayUnion.apply(this, myArray)
});
This worked for me^
For Vue.js Developers
I have created a folder named firebase in src folder, then i have created a file named init.js in firebase folder
init.js
import * as firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
// Your Firebase Config
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// utils
const db = firebase.firestore();
const auth = firebase.auth();
export { db, auth, firebase };
Now use them in whichever components you need.
Just by,
import { firebase, auth, db } from "#/firebase/init.js";
Now You can use firebase without any Errors
db.collection("users") // Collection Name
.doc(userId) // Document in Collection indexed userId
.update({
friends: firebase.firestore.FieldValue.arrayUnion(auth.currentUser.uid)
})
// friends is the array collection in firestore
Thats It

Categories