🎉 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>