How to initialize firebase, app and make them accessible in other javascript files?

Question

I am using Quasar 2 with firebase. I configure firebase in src/boot/firebase.js with the following code:

const firebaseConfig = {...};
const app = createApp(App);
firebase.initializeApp(firebaseConfig);
// State only persists in current session/tab. Cleared if session/tab is closed
firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION);
var secondaryApp = firebase.initializeApp(firebaseConfig, "Secondary");

app.config.globalProperties.$fb = firebase;
app.config.globalProperties.$func = firebase.functions();
app.config.globalProperties.$func_region = firebase.app().functions("region");
app.config.globalProperties.$db = firebase.firestore();
app.config.globalProperties.$st = firebase.storage();
app.config.globalProperties.$fb_sec = secondaryApp;
app.config.globalProperties.$geo = firebase.firestore.GeoPoint;
console.log(app.config);
export default async ({ Vue, store }) => {
    const idleTimeInMillis = 900000;
  const eventsHub = Vue;
  app.use(IdleVue, {
    eventEmitter: eventsHub,
    store,
    idleTime: idleTimeInMillis,
    startAtIdle: false
  });
  app.mixin({
    methods: {
      async getInternalUserAccessControl() {
        const snapshot = await this.$db
          .doc("path/value")
          .get();
        return snapshot.data();
      }
    }
  });
});

and I would like to access the app.config.globalProperties.$fb in src/router/index.js:

export default function() {
    Router.beforeEach((to, from, next) => {
console.log(`index.js app.config: ${app.config}`);
        app.globalProperties.$fb.auth().onAuthStateChanged(user => {...});

The console.log in index.js shows undefined.

Answer 1

You have to export the variable.
In src/boot/firebase.js :

const firebaseConfig = {...};
export const app = createApp(App);
firebase.initializeApp(firebaseConfig);

Or if you don't want to write export, you can also write :

# That way you can name the variable whatever you want in the other file, make sure if you name is like : app_:app to put import { app_ } in the other file
export default { app: app };

In src/router/index.js :

import { app } from '../boot/firebase.js';

I hope it will solve your problem