No-Nonsense Firebase Auth + Firestore in Vue

Let's add Firebase to our Vue + Vuex App with no nonsense.

Tip: Ctrl + F for "recipe" to find variables to update

NPM

                        Copy code
                    
npm i firebase core-js

Config Files

Add src/firebase.js:

                        Copy code
                    
import * as firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
// 👆 This example is using Auth + Firestore

var firebaseConfig = {
  // This comes from Google - add your config here
};
firebase.initializeApp(firebaseConfig);

// utils
const db = firebase.firestore();
const auth = firebase.auth();

// collections
const usersCollection = db.collection("users");
const recipeCollection = db.collection("recipe");
// 👆 Here you create your Collections you want to use later

// 👇 You export things here | update the variable names
export { db, auth, usersCollection, recipeCollection };

Modify src/main.js

                        Copy code
                    
// 👇 Add this to your imports
import { auth } from "./firebase";

// 👇 Wrap your new Vue like this
let app;
auth.onAuthStateChanged((user) => {
  if (!app) {
    app = new Vue({
      router,
      store,
      render: (h) => h(App),
    }).$mount("#app");
  }

  if (user) {
    store.dispatch("fetchUserProfile", user);
  }
});

Vuex Store

Template State

                        Copy code
                    
// 👇 Add these imports
import * as firebase from "../firebase";
import router from "../router/index";

// 👇 Add this outside your store const if it isn't user dependent filtering
firebase.recipeCollection
  // 👆 Replace this with your variable from firebase.js
  .where("public", "==", true)
  // 👆 This filters incoming data
  .onSnapshot((snapshot) => {
    let recipeArray = [];

    snapshot.forEach((doc) => {
      let recipe = doc.data();
      recipe.id = doc.id;

      recipeArray.push(recipe);
    });
    // 👆 Create an array of all docs found.
    store.commit("setRecipes", recipeArray);
  });

// 👇 From here down replaces the export default new Vuex.Store({...}) that Vue adds by default
const store = new Vuex.Store({
  state: {
    userProfile: {},
    recipes: [],
  },
  mutations: {
    setUserProfile(state, val) {
      state.userProfile = val;
    },
    setRecipes(state, val) {
      state.recipes = val;
    },
  },
  actions: {
    async login({ dispatch }, form) {
      const { user } = await firebase.auth.signInWithEmailAndPassword(
        form.email,
        form.password
      );

      dispatch("fetchUserProfile", user);
    },

    async fetchUserProfile({ commit }, user) {
      const userProfile = await firebase.usersCollection.doc(user.uid).get();

      commit("setUserProfile", userProfile.data());

      if (router.currentRoute.path === "/login") {
        router.push("/");
      }
    },
    async logout({ commit }) {
      await firebase.auth.signOut();

      // clear userProfile and redirect to /login
      commit("setUserProfile", {});
      router.push("/login");
    },

    async createRecipe({ state, commit }, recipe) {
      let now = new Date();

      // 👇 Model your record here
      await firebase.recipeCollection.add({
        createdOn: now,
        userId: firebase.auth.currentUser.uid,
        username: state.userProfile.name,
      });
    },

    async signup({ dispatch }, form) {
      // sign user up
      const { user } = await firebase.auth.createUserWithEmailAndPassword(
        form.email,
        form.password
      );

      // 👇 Add this to your login form as the submit function
      //    login() {
      //      this.$store.dispatch("login", {
      //        email: this.loginForm.email,
      //        password: this.loginForm.password
      //      });
      //    },

      // create user profile object in userCollection
      await firebase.usersCollection.doc(user.uid).set({
        name: form.name,
      });

      dispatch("fetchUserProfile", user);
    },
  },
});

export default store;

V-Router

                        Copy code
                    
// 👇 Add this to your imports
import { auth } from "../firebase";

// ...

// 👇 An example route that requires user to be authenticated
const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
    meta: {
      requiresAuth: true,
    },
  },
];

// ...

// 👇 Add this just before your export
router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some((x) => x.meta.requiresAuth);

  if (requiresAuth && !auth.currentUser) {
    // 👇 Direct the user to this path if not logged in
    next("/login");
  } else {
    next();
  }
});

References

These sources helped me get this working the first time:

• Building a Real-World Web App With Vue.js and Firebase
• Firebase Docs