just need logout

src/main.js

@@ -4,20 +4,25 @@ import router from './router'
 import store from './store'
 
 import firebase from '@/plugins/firebase-init'
-import '@/plugins/firebaseui-init'
+import ui from '@/plugins/firebaseui-init'
 
 Vue.config.productionTip = false;
 
 /**
+ * 
  * Makes available:
  * - window.firebase
  * - window.db
  */
 Vue.use(firebase);
 
-
-
-// Vue.use(firebaseui);
+/**
+ * Prebuilt Authentication UI
+ * Makes available:
+ * - window.ui
+ * - this.$ui (in the vue instance)
+ */
+Vue.use(ui);
 
 
 new Vue({

src/plugins/firebase-init.js

@@ -21,4 +21,6 @@ export default {
     window.db = firebase.firestore();
     window.firebase = firebase;
   }
-}
+}
+
+export { firebase };

src/plugins/firebaseui-init.js

@@ -1,33 +1,13 @@
+import { firebase } from './firebase-init';
+import * as firebaseui from "firebaseui";
 
-let firebaseui = {};
-firebaseui.install = function (Vue, options) {
+let ui = new firebaseui.auth.AuthUI(firebase.auth());
 
-
-  // 1. add global method or property
-//   Vue.myGlobalMethod = function () {
-//     // some logic ...
-//   }
-
-  // 2. add a global asset
-//   Vue.directive('my-directive', {
-//     bind (el, binding, vnode, oldVnode) {
-//       // some logic ...
-//     }
-//     ...
-//   })
-
-  // 3. inject some component options
-//   Vue.mixin({
-//     created: function () {
-//       // some logic ...
-//     }
-//     ...
-//   })
-
-  // 4. add an instance method
-  Vue.prototype.$myMethod = function (methodOptions) {
-    // some logic ...
+export default {
+  install(vue, opts){   
+    window.ui = ui;
+    vue.prototype.$ui = ui;
   }
 }
 
-export default firebaseui
+export { ui }

src/router.js

@@ -1,25 +1,46 @@
 import Vue from 'vue'
 import Router from 'vue-router'
+import store from './store';
+
+
+/**
+ * Don't forget to import your views here:
+ */
 import Home from './views/Home.vue'
+import About from './views/About.vue'
+import Login from './views/Login.vue'
+
 
 Vue.use(Router)
 
-export default new Router({
+const router = new Router({
   mode: 'history',
   base: process.env.BASE_URL,
   routes: [
     {
       path: '/',
       name: 'home',
       component: Home
+    },    
+    {
+      path: '/login',
+      name: 'login',
+      component: Login
     },
     {
       path: '/about',
       name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (about.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
+      component: About
     }
   ]
+});
+
+/**
+ * Authentication Check
+ */
+router.beforeEach((to, from, next) => {
+  if (to.name !== 'login' && !store.getters.isAuthenticated) next({ name: 'login' })
+  else next()
 })
+
+export default router;

src/store.js

@@ -1,16 +1,48 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import { ui } from '@/plugins/firebaseui-init'
+import { firebase } from '@/plugins/firebase-init'
 
 Vue.use(Vuex)
 
-export default new Vuex.Store({
-  state: {
 
+
+const store = new Vuex.Store({
+  state: {
+    user: {
+      uid: null,
+      displayName: null,
+      photoURL: null,
+      email: null,
+      phoneNumber: null,
+    }
+  },
+  getters: {
+    isAuthenticated: state => {
+      return state.user.uid !== null;
+    }
   },
   mutations: {
+    user(state, userObj){
+      state.user = {
+        uid: userObj.uid,
+        displayName: userObj.displayName,
+        photoURL: userObj.photoURL,
+        email: userObj.email,
+        phoneNumber: userObj.email,
+      }
+    }
 
   },
   actions: {
 
   }
 })
+
+/** May not need..? */
+firebase.auth().onAuthStateChanged(user => {
+  console.log('auth change', user)
+  store.commit('user', user);
+});
+
+export default store;

src/views/Login.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="login">
+    <h1>Login</h1>
+    <div id="firebaseui-auth-container"></div>
+    <div id="loader">Loading...</div>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import "firebaseui/dist/firebaseui.css";
+
+
+export default {
+  name: 'login',
+  mounted() {
+
+    /**
+     * Configuration
+     * @url https://github.com/firebase/firebaseui-web#configuration
+     */
+    ui.start('#firebaseui-auth-container',
+    {
+      callbacks: {
+        signInSuccessWithAuthResult: (authResult, redirectUrl) => {
+          // console.log('Auth Result: ', authResult);
+          this.$store.commit('user', authResult.user);
+          this.$router.push({
+            name: 'home'
+          });
+        },
+        uiShown: function() {
+          // The widget is rendered.
+          // Hide the loader.
+          document.getElementById('loader').style.display = 'none';
+        }
+      },
+      credentialHelper: false,
+      // Will use popup for IDP Providers sign-in flow instead of the default, redirect.
+      signInFlow: 'popup',
+      signInOptions: [
+        // Leave the lines as is for the providers you want to offer your users.
+        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
+        // firebase.auth.FacebookAuthProvider.PROVIDER_ID,
+        // firebase.auth.TwitterAuthProvider.PROVIDER_ID,
+        // firebase.auth.GithubAuthProvider.PROVIDER_ID,
+        firebase.auth.EmailAuthProvider.PROVIDER_ID,
+        // firebase.auth.PhoneAuthProvider.PROVIDER_ID
+      ],
+      // Terms of service url.
+      tosUrl: '/terms',
+      // Privacy policy url.
+      privacyPolicyUrl: '/privacy'
+    });
+
+  }
+}
+</script>