diff --git a/src/main.js b/src/main.js index c895087..0747747 100644 --- a/src/main.js +++ b/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({ diff --git a/src/plugins/firebase-init.js b/src/plugins/firebase-init.js index 820810f..234beef 100644 --- a/src/plugins/firebase-init.js +++ b/src/plugins/firebase-init.js @@ -21,4 +21,6 @@ export default { window.db = firebase.firestore(); window.firebase = firebase; } -} \ No newline at end of file +} + +export { firebase }; \ No newline at end of file diff --git a/src/plugins/firebaseui-init.js b/src/plugins/firebaseui-init.js index 5c10d2d..025e633 100644 --- a/src/plugins/firebaseui-init.js +++ b/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 \ No newline at end of file +export { ui } \ No newline at end of file diff --git a/src/router.js b/src/router.js index 39650f9..e81ba35 100644 --- a/src/router.js +++ b/src/router.js @@ -1,10 +1,19 @@ 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: [ @@ -12,14 +21,26 @@ export default new Router({ 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; diff --git a/src/store.js b/src/store.js index 3c7424e..6849ce2 100644 --- a/src/store.js +++ b/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; diff --git a/src/views/Login.vue b/src/views/Login.vue new file mode 100644 index 0000000..24270df --- /dev/null +++ b/src/views/Login.vue @@ -0,0 +1,58 @@ + + +