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 @@
+
+
+
+
+