This is how I import firebase into the project:
import firebase from 'firebase/app'
import firestore from 'firebase/firestore'
import auth from 'firebase/auth'
/*
Config */
const FIREBASE_CONFIG = {
...
}
/*
Get a Firestore instance */
export const firebaseInstance = firebase.initializeApp(FIREBASE_CONFIG)
Later I would just:
import { firebaseInstance } from 'database' whenever it's needed and have to access singup, login and other available API methods like for example:
firebaseInstance.auth().fetchSignInMethodsForEmail(email)
However when I am trying
firebaseInstance.auth.EmailAuthProvider as defined in the official documentation it's simply not available and returns undefined
Can somebody please suggest what can be missing?
P.S: I've tried firebaseInstance.auth().EmailAuthProvider however after researching in github thread how other people do it, I believe that is not the thing :)
Documentation says it's static method, so it doesn't make sense to call it on instance? You can find it under firebase.auth.EmailAuthProvider
Related
Trying to follow Step 2 here, from within a React app: https://stripe.com/docs/connect/creating-a-payments-page?cancel=true#web-accept-payment
// Initialize Stripe.js with the same connected account ID used when creating
// the Checkout Session.
const stripe = Stripe('pk_test_s3JwCARtUtLnQGm4xlDx70Wt002kwkyJ8P', {
stripeAccount: '{{CONNECTED_STRIPE_ACCOUNT_ID}}'
});
I’ve ran npm install #stripe/stripe-js already, but does anybody know how to import Stripe?
I’ve already tried:
import {Stripe} from '#stripe/stripe-js';
import Stripe from '#stripe/stripe-js';
but both fail with
Attempted import error: 'Stripe' is not exported from '#stripe/stripe-js'.
in the npm docs they suggest (https://www.npmjs.com/package/#stripe/stripe-js):
import {loadStripe} from '#stripe/stripe-js';
const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
but this is clearly different to what they gave in the Stripe docs.
Also this fails for me with Uncaught (in promise) IntegrationError: Invalid value for Stripe(): apiKey should be a string. You specified: undefined. even though I’ve verified the value I supply is not undefined.
I’m not sure why they can’t include a proper import statement in their docs...but anyway, does anyone know how to fix this?
in the npm docs they suggest (https://www.npmjs.com/package/#stripe/stripe-js):
import {loadStripe} from '#stripe/stripe-js';
const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
but this is clearly different to what they gave in the Stripe docs.
It's not different. It's just a helper function to do the same thing. The stripe docs would have you add a script tag to your document, like this:
<script src="https://js.stripe.com/v3/"></script>
That script tag will download stripe and add it to the global variable window.Stripe.
Calling loadStripe will create a <script> tag with the right properties, append it to the document, wait for it to load, call init passing in your api key, and then resolve the promise to the value in window.Stripe.
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.
We was learning Firebase and the way to connect it with React. Later, I saw the this code snippet:
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';
I face some confusion on the above code thus wanted ask one question. Firstly, how is it possible that
import 'firebase/firestore';
import 'firebase/auth';
get attached to firebase variable automatically, that is, by using firebase we have access to app, firestore and auth since imports of firestore and auth do not have name
import 'firebase/firestore';
This means "run the code in firebase/firestore, and i don't care if it exports anything"; The code that it's running is this file here, and part of what that code does is import firebase from #firebase/app and register itself with it. You import that same firebase object, so anything that was added to the object is available to you too.
The lines of code they use to add firestore to firebase are these:
export function registerFirestore(instance: FirebaseNamespace): void {
configureForFirebase(instance);
instance.registerVersion(name, version);
}
registerFirestore(firebase);
Understanding exactly what those are doing will require walking through their codebase to see what's being called (it ends in this function), but i can demonstrated a simplified equivalent like this:
// File 1, the equivalent of firebase/app
export default {}; // no properties on it.
// File 2, the equivalent of firebase/firestore
import firebase from 'firebase/app'
// mutating the object that was imported
firebase.firestore = "I'm firestore!";
// Your file
import firebase from 'firebase/app';
import 'firebase/firestore';
console.log(firebase.firestore); // logs out "I'm firestore!", because the second import added a property to the object.
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
I'm building a simple web app with Vue + Firebase + Vuefire and I get "Uncaught TypeError: Cannot read property 'ref' of undefined" when I try to use my Firebase db variable inside a component.
In main.js
Vue.use(VueFire)
const firebaseApp = Firebase.initializeApp({ //setting })
// Export the database for components to use.
export const db = firebaseApp.database()
And in my component
// in Recipes.vue
import {db} from '../main.js'
export default {
recipe: {
source: db.ref('recipes')
// Console says: "Uncaught TypeError: Cannot read property 'ref' of undefined"
}
}
I followed the steps in this tutorial https://alligator.io/vuejs/vuefire-firebase/
This code db.ref('recipes') works if used inside main.js, but it never works once I import it inside my component.
The problem was my Firebase code (including db variable) was inside main.js but it needed to be in it's own component. I created a firebase.js file :
import Firebase from 'firebase'
const firebaseApp = Firebase.initializeApp({
# configuration
})
// Export the database for components to use.
export const db = firebaseApp.database()
Then in my component I simply imported my database variable :
import {db} from '../firebase'
Why didn't it work inside main.js? I'm not sure, maybe someone more knowledgeable can answer that.
.ref is a firebase function, you need to import it. try
import Firebase from 'firebase'
or
import * from 'firebase'