Wrap a Vue.js Firebase-Object into onAuthStateChanged handler?

Question

I'm implementing a Vue.js Web-Applikation with GoogleFirebase and the Vuefire plugin for firebase. I have to wrap The Vue.js Firebase-Object into the Firebase onAuthStateChanged function to get data from the realtime-database by the logged in users uid. The login is implemented with Vue-Router. The following Code should explain my question and I hope that somebody could help me with my question.

This is not working and I'm getting UID Of Null error.

firebase: {
    tableTennisData: db.ref(auth.currentUser.uid).child('tableTennis'),
},

This function, called through a Button logs the correct user id into the console.

methods: {
    test: function(){
        console.log(auth.currentUser.uid);
        this.uid = auth.currentUser.uid;
    },
}

But if this is working without the "onAuthStateChanged" handler, why is the implementation with the Firebase-Object not working?

This is how I push data to firebase and this is working very well due to the "onAuthStateChanged" handler out of the firebase Cloud-functions.

auth.onAuthStateChanged(function (){
   db.ref(auth.currentUser.uid).child('tableTennis').push(obj);
});

I really need a way to access the pushed data by the users uid. I think we could solve the error with the Firebase-Object wrapped into the "onAuthStateChanged" handler.

To sum up the information, this is the login functionality of The Vue-Router file.

const router = new VueRouter({
  routes
});

router.beforeEach((to, from, next) =>{
  const currentUser = auth.currentUser;
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);

  if(requiresAuth && !currentUser){
    next('/login');
   }else if(!requiresAuth && currentUser){
     next('/home');
  }else{
    next();
  }
});
export default router;

And finally, this is the main.js file.

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import firebase from "firebase";
import './firebase';

import { rtdbPlugin } from 'vuefire'
Vue.use(rtdbPlugin);

Vue.config.productionTip = false;

let app = '';

firebase.auth().onAuthStateChanged(() =>{
  if(!app){
    app = new Vue({
      router,
      render: h => h(App)
    }).$mount("#app");
  }
});

Another firebase.js file exports the variables auth which is equal to firebase.auth() and db which is the same as firebase.database.

import { initializeApp } from 'firebase';

  const firebase = initializeApp({
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
  });

  export const db = firebase.database();
  export const auth = firebase.auth();

API-Information was deleted for this question.

I hope these are enough informations to help me solving this problem.

Thank you.

firebase: {
    tableTennisData: db.ref(auth.currentUser.uid).child('tableTennis'),
},

Error UID Of Null.

Kehinde Akeredolu Kehinde Akeredolu · Accepted Answer · 2020-05-10T01:09:57

The problem maybe with how you configured and initialized firebase.

Its better to use progressive enhancement, so you can access the services you need when you need them.

Change your firebase.js config file to the following

// Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
import * as firebase from "firebase/app";

// Add the firebase services that you want to use
import "firebase/database";
import "firebase/auth";

// Initialize firebase
const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
};

const fb = firebase.initializeApp(firebaseConfig);
const db = firebase.database();

// export firebase services
export { db, fb };

Next change your main.js to the following

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import { fb } from "firebase"; // your firebase services live here (auth)
require("firebase/database"); // !important

import { rtdbPlugin } from 'vuefire'
Vue.use(rtdbPlugin);

Vue.config.productionTip = false;

let app = '';

firebase.auth().onAuthStateChanged(() =>{
  if(!app){
    app = new Vue({
      router,
      render: h => h(App)
    }).$mount("#app");
  }
});

Next change your route guarding logic in your router file to the following

import { fb } from "../firebase.js";
const router = new VueRouter({
  routes
});

// check if route requiresAuth
router.beforeEach((to, from, next) => {
  if (to.matched.some(rec => rec.meta.requiresAuth)) {
    const user = fb.auth().currentUser;
    // check auth state of user
    if (user) {
      next(); // user signed in, proceed to route
    } else {
      next('/login'); // user not signed in, route to login
    }
  } else {
    next(); // route does not require auth
  }
});

export default router;

Finally you should be able access to access the uid like so

firebase: {
    tableTennisData: db.ref(fb.auth().currentUser.uid).child('tableTennis'),
}

Remember fb now contains your firebase services and db now refers to your chose database (firestore/rtdb).

So you would access you firebase services like so

fb.auth()
fb.storage()
fb.analytics()

And you would access you rtdb like so

db.ref.('/users/' + uid)

Hopes this helps.

Wrap a Vue.js Firebase-Object into onAuthStateChanged handler?

1 Answers