🎉 Initial Auth

components/BallsFeed.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <p v-for="ball in store.ballsInFeed" :key="ball.id">
+      <span>{{ ball.author_name }}:</span>
+      {{ ball.message }}
+    </p>
+  </div>
+</template>
+
+<script>
+import { store } from "../functions/store";
+
+export default {
+  data() {
+    return {
+      store
+    };
+  }
+};
+</script>

components/InputForm.vue

@@ -0,0 +1,25 @@
+<template>
+  <form @submit.prevent="formPost">
+    <input type="text" autofocus ref="inputMessage" v-model="message" />
+    <input type="submit" value="DUNK!" />
+  </form>
+</template>
+
+<script>
+import { store } from "../functions/store";
+
+export default {
+  data() {
+    return {
+      message: null
+    };
+  },
+  methods: {
+    formPost() {
+      store.writeBall(this.message);
+      this.message = null;
+      this.$refs.inputMessage.focus();
+    }
+  }
+};
+</script>

components/Login.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <button @click.prevent="signInWithGoogle">Log in with Google</button>
+    <button @click.prevent="signInWithGithub">Log in with GitHub</button>
+  </div>
+</template>
+
+<script>
+import firebase from "firebase/app";
+import "firebase/auth";
+
+export default {
+  methods: {
+    signInWithGoogle() {
+      var provider = new firebase.auth.GoogleAuthProvider();
+      firebase
+        .auth()
+        .signInWithPopup(provider)
+        .catch(err => alert(err.message || err));
+    },
+    signInWithGithub() {
+      var provider = new firebase.auth.GithubAuthProvider();
+      firebase
+        .auth()
+        .signInWithPopup(provider)
+        .catch(err => alert(err.message || err));
+    }
+  }
+};
+</script>

functions/store.js

@@ -0,0 +1,63 @@
+import Vue from "vue";
+import firebase from "firebase/app";
+import "firebase/firestore";
+import "firebase/auth";
+
+// Initialize Firebase, copied from cloud console
+var config = {
+  apiKey: "AIzaSyCMsFreESs58-hRxTtiqQrIcimh4i1wbsM",
+  authDomain: "postwoman-api.firebaseapp.com",
+  databaseURL: "https://postwoman-api.firebaseio.com",
+  projectId: "postwoman-api",
+  storageBucket: "postwoman-api.appspot.com",
+  messagingSenderId: "421993993223",
+  appId: "1:421993993223:web:ec0baa8ee8c02ffa1fc6a2",
+  measurementId: "G-ERJ6025CEB"
+};
+firebase.initializeApp(config);
+
+// a reference to the Balls collection
+const ballsCollection = firebase.firestore().collection("balls");
+
+// the shared state object that any vue component
+// can get access to
+export const store = {
+  ballsInFeed: null,
+  currentUser: null,
+  writeBall: message => {
+    const dt = {
+      createdOn: new Date(),
+      author: store.currentUser.uid,
+      author_name: store.currentUser.displayName,
+      author_image: store.currentUser.photoURL,
+      message
+    };
+    return ballsCollection
+      .add(dt)
+      .catch(e => console.error("error inserting", dt, e));
+  }
+};
+
+// onSnapshot is executed every time the data
+// in the underlying firestore collection changes
+// It will get passed an array of references to
+// the documents that match your query
+ballsCollection
+  .orderBy("createdOn", "desc")
+  .limit(5)
+  .onSnapshot(ballsRef => {
+    const balls = [];
+    ballsRef.forEach(doc => {
+      const ball = doc.data();
+      ball.id = doc.id;
+      balls.push(ball);
+    });
+    console.log("Received Balls feed:", balls);
+    store.ballsInFeed = balls;
+  });
+
+// When a user logs in or out, save that in the store
+firebase.auth().onAuthStateChanged(user => {
+  console.log("Logged in as:", user);
+  store.currentUser = user;
+});

layouts/default.vue

@@ -345,6 +345,17 @@
                   </template>
                 </v-popover>
               </span>
+
+
+
+    <Login v-if="!store.currentUser" />
+    <div v-else>
+      <button @click="logout">Log out</button>
+      <InputForm />
+      <BallsFeed />
+    </div>
+
+
             </div>
           </header>
           <nuxt />
@@ -594,10 +605,22 @@
 import intializePwa from "../assets/js/pwa";
 import * as version from "../.postwoman/version.json";
 
+
+import firebase from 'firebase/app';
+import 'firebase/auth';
+
+import { store } from '../functions/store';
+import Login from '../components/Login';
+import InputForm from '../components/InputForm';
+import BallsFeed from '../components/BallsFeed';
+
+
 export default {
   components: {
     logo: () => import("../components/logo"),
-    modal: () => import("../components/modal")
+    modal: () => import("../components/modal"),
+
+    Login, InputForm, BallsFeed
   },
 
   methods: {
@@ -606,7 +629,13 @@ export default {
         "nuxt-link-exact-active": this.$route.path === path,
         "nuxt-link-active": this.$route.path === path
       };
-    }
+    },
+
+
+    logout() {
+      firebase.auth().signOut()
+        .catch((err) => alert(err.message || err));
+    },
   },
 
   data() {
@@ -620,7 +649,9 @@ export default {
       showShortcuts: false,
       showSupport: false,
       firefoxExtInstalled: window.firefoxExtSendRequest,
-      chromeExtInstalled: false
+      chromeExtInstalled: false,
+
+      store
     };
   },
 

package.json

@@ -26,11 +26,13 @@
         "@nuxtjs/sitemap": "^2.0.1",
         "@nuxtjs/toast": "^3.3.0",
         "ace-builds": "^1.4.8",
+        "firebase": "^7.7.0",
         "graphql": "^14.5.8",
         "nuxt": "^2.11.0",
         "nuxt-i18n": "^6.4.1",
         "v-tooltip": "^2.0.2",
         "vue-virtual-scroll-list": "^1.4.4",
+        "vuefire": "^2.2.1",
         "vuejs-auto-complete": "^0.9.0",
         "vuex-persist": "^2.2.0",
         "yargs-parser": "^16.1.0"