I have read multiple posts on how to setup Firebase with Vue & Quasar and am trying to understand the role of the boot file.
Boot file
import { initializeApp } from 'firebase/app'
import { getAuth, onAuthStateChanged } from 'firebase/auth'
const firebaseConfig = {
** my config here **
}
// init firebase
const app = initializeApp(firebaseConfig)
const db = getFirestore(app)
const auth = getAuth(app)
console.log('FB App: ', app)
// functions
onAuthStateChanged((user) => {
console.log('User state changed')
})
export { db, auth }
When I use firebase in a component do I need to use the following?
import { db, auth } from '#/boot/firebase.js'
Related
im looking to retrieve data from the firestore.first it worked well when i ejected from expo i cant able to retrieve data from the servers. when i read some documentation they suggested to use
let myApp = initializeApp(firebaseConfig);
myApp.firestore().settings({ experimentsalForceLongPolling: true });
const firestore = getFirestore(myApp);
but im ettin error myApp.firestore() is not a function.
here is my code:
import { initializeApp } from "firebase/app";
const firebaseConfig = {
};
let myApp = initializeApp(firebaseConfig);
myApp.firestore().settings({ experimentsalForceLongPolling: true });
const firestore = getFirestore(myApp);
im thinking there is a problem in import can someone help me please
The settings to enable experimentalAutoDetectLongPolling should be enabled through initializeFirestore there you will find settings: FirestoreSettings argument refer FirestoreSettings which you can set as follows :
import { initializeApp } from "firebase/app";
import { initializeFirestore, getFirestore } from "firebase/firestore";
const firebaseConfig = {
};
let app = initializeApp(firebaseConfig);
let db;
try {
db = initializeFirestore(app, { experimentalAutoDetectLongPolling: true }); // <= settings
} catch (e) {
if (e.code === 'failed-precondition') {
// Multiple app instances detected
db = getFirestore(app);
} else {
throw e;
}
}
And as initializeFirestore is equivalent to getFirestore method so no need to reinitialize firestore again as shown in docs:
Initializes a new instance of Firestore with the provided settings. Can only be called before any other function, including (getFirestore:1). If the custom settings are empty, this function is equivalent to calling (getFirestore:1).
I have a react/nextjs app and I have firebase.js as follow:
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/analytics'
import 'firebase/firestore'
const firebaseConfig = {
apiKey: '...'
}
try {
firebase.initializeApp(firebaseConfig)
firebase.analytics()
} catch (err) {
if (!/already exists/.test(err.message)) {
console.error('Firebase initialization error', err.stack)
}
}
export default firebase
I kept getting
Firebase initialization error ReferenceError: navigator is not defined
after adding analytics to the firebase.js file. What is the correct way to add analytics to the app?
import { getAnalytics, isSupported } from "firebase/analytics";
const analytics = isSupported().then(yes => yes ? getAnalytics(app) : null);
Try this one
import firebase from "firebase/app"
import "firebase/auth"
import "firebase/firestore"
import "firebase/storage"
import "firebase/analytics"
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_API_KEY,
authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
appId: process.env.NEXT_PUBLIC_APP_ID,
storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID,
}
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig)
}
// Auth export
export const auth = firebase.auth()
// Firestore exports
export const firestore = firebase.firestore()
export const serverTimestamp = firebase.firestore.FieldValue.serverTimestamp
export const fbTimestamp = firebase.firestore.Timestamp
export const fromMillis = firebase.firestore.Timestamp.fromMillis
export const increment = firebase.firestore.FieldValue.increment
// Storage exports
export const storage = firebase.storage()
export const analytics = () => {
if (typeof window !== "undefined") {
return firebase.analytics()
} else {
return null
}
}
export default firebase
ReferenceError: navigator is not defined
because there is no window object present during the server-side rendering of the Nextjs application.
Try:
if(typeof window != undefined){
firebase.analytics()
}
I just updated my firebase to version 9 and this error is not seen.
Update to version 9 could be a solution to this.
But for version 9, there are some changes in firebase declaration.
import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'
import 'firebase/compat/firestore'
Using firebase V 9.16 this how I solved the issue
import { initializeApp } from "firebase/app";
import { getAnalytics, isSupported } from "firebase/analytics";
import { getFirestore } from "firebase/firestore"
const firebaseConfig = {
...
};
let app; let analytics; let db
if(typeof window != undefined){
app = initializeApp(firebaseConfig);
analytics = isSupported().then(yes => yes ? getAnalytics(app) : null);
db = getFirestore(app)
}
export {app, analytics, db}
In _app.js I import analytics and i use useEffect like
useEffect(() => {
analytics;
}, [])
I'm trying to set up Firebase authentication for a Next.js app. I'm using Firebase 9.6.4. I can't figure out the modular importing in v9, and I'm getting this error when accessing the route /api/login.
ReferenceError: Cannot access 'auth' before initialization
Here is the relevant code:
lib/firebase.js
import firebase from "firebase/app";
import { getAuth } from "firebase/auth";
const firebaseConfig = { ... };
const app = firebase.initializeApp(firebaseConfig, "App Name");
export const provider = new firebase.auth.GoogleAuthProvider();
export const auth = getAuth(app);
export default firebase;
pages/api/login.js
import firebase, { auth, provider } from "../../lib/firebase";
export default function signIn(req, res) {
auth
.signInWithPopup(provider)
.then(...)
.catch(...);
}
...
I'm trying to initialize the app but I get can't find variable firebase, I'm still learning and it's hard to understand firebase. I'm using the latest SDK version
here's how I'm doing that
import { initializeApp } from 'firebase/app';
const firebaseConfig = {
/// config
};
if (!firebase.apps.length) {
initializeApp(firebaseConfig);
}
import { getFirestore, collection, getDocs } from 'firebase/firestore';
const db = getFirestore();
const analytics = getAnalytics(app);
I'm writing my own nuxt plugin for firebase/firestore. I'm loading it in the config with:
plugins: [
'~/plugins/firestore.js',
{ src: '~/plugins/vuex-persist', ssr: false }
],
The file itself looks like this
import Vue from 'vue'
import * as firebase from 'firebase/app';
import 'firebase/firestore';
const config = {
...
}
firebase.initializeApp(config)
const settings = {
timestampsInSnapshots: true
}
const store = firebase.firestore()
store.settings(settings)
class Firestore {
...
}
const firestore = new Firestore()
export default ({ app }, inject) => {
inject('firestore', firestore)
}
When I'm running npm run dev it tries to create a firebase instance on each automatic reload. How can I have it only create this instance once?
Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).
You can check firebase.apps to see if its loaded. If your only loading it once, then you can just check the length. If you have multiple then you could check each apps name. Once it helped for me
if (!firebase.apps.length) {
firebase.initializeApp({});
}