Add cookie based login authentication

- Changed POST request data structure to match
  backend requirements for set-cookie in response
  header
- Added withCredentials property to default
  axios config
- Modifying proxied response to remove 'Secure' flag
  so browser can create Cookie while running locally
- Add logout api request
- Add js-cookie package to manage browser cookies
- Update the babel preset config to include useBuiltIns,
which resolves MIME type errors when overlaying
- Disable vue-router history mode to use routher hash mode
to resolves 404 errors when refreshing certain pages. This
is expected behavior with history mode enabled. Server
configuration changes are required to support HTML5
history mode: https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I5d43f36ef546962474b6cc8fff89564f29048fde

8 files changed, 39 insertions, 24 deletions

diff --git a/babel.config.js b/babel.config.js
index 397abca8..a1c27e1c 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"]
+  presets: [["@vue/cli-plugin-babel/preset", { useBuiltIns: "entry" }]]
 };
diff --git a/package-lock.json b/package-lock.json
index b059a6cb..9582c9cc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8992,6 +8992,11 @@
         "nopt": "~4.0.1"
       }
     },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
     "js-levenshtein": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
diff --git a/package.json b/package.json
index cb44ebc7..be433959 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "bootstrap": "4.3.1",
     "bootstrap-vue": "2.1.0",
     "core-js": "3.3.2",
+    "js-cookie": "^2.2.1",
     "vue": "2.6.10",
     "vue-date-fns": "^1.1.0",
     "vue-router": "3.1.3",
diff --git a/src/router/index.js b/src/router/index.js
index 560da89a..9c802340 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -42,7 +42,6 @@ const routes = [
 ];
 
 const router = new VueRouter({
-  mode: "history",
   base: process.env.BASE_URL,
   routes,
   linkExactActiveClass: "nav__link--current"
diff --git a/src/store/api.js b/src/store/api.js
index 39a6355c..c50bcbee 100644
--- a/src/store/api.js
+++ b/src/store/api.js
@@ -1,6 +1,8 @@
 import Axios from "axios";
 
-const api = Axios.create();
+const api = Axios.create({
+  withCredentials: true
+});
 
 // TODO: Permanent authentication solution
 // Using defaults to set auth for sending
diff --git a/src/store/modules/Authentication/AuthenticanStore.js b/src/store/modules/Authentication/AuthenticanStore.js
index 828c3cc8..3512e2da 100644
--- a/src/store/modules/Authentication/AuthenticanStore.js
+++ b/src/store/modules/Authentication/AuthenticanStore.js
@@ -1,54 +1,48 @@
 import api from "../../api";
+import Cookies from "js-cookie";
 
 const AuthenticationStore = {
   namespaced: true,
   state: {
-    auth: {},
     status: "",
-    token: sessionStorage.getItem("token") || ""
+    cookie: Cookies.get("XSRF-TOKEN")
   },
   getters: {
     authStatus: state => state.status,
-    isLoggedIn: state => !!state.token
+    isLoggedIn: state => !!state.cookie
   },
   mutations: {
     authRequest(state) {
       state.status = "loading";
     },
-    authSuccess(state, token, auth) {
-      state.status = "authenicated";
-      state.auth = auth;
-      state.token = token;
+    authSuccess(state) {
+      state.status = "authenticated";
+      state.cookie = Cookies.get("XSRF-TOKEN");
     },
     authError(state) {
       state.status = "error";
     },
     logout(state) {
       state.status = "";
-      state.token = "";
+      Cookies.remove("XSRF-TOKEN");
     }
   },
   actions: {
     login({ commit }, auth) {
       commit("authRequest");
       return api
-        .post("/login", auth)
-        .then(response => {
-          const token = response.data.token;
-          sessionStorage.setItem("token", token);
-          api.defaults.auth = auth; // TODO Permanent Solution
-          commit("authSuccess", token, auth);
-        })
+        .post("/login", { data: auth })
+        .then(() => commit("authSuccess"))
         .catch(error => {
           commit("authError");
-          sessionStorage.removeItem("token");
           throw new Error(error);
         });
     },
     logout({ commit }) {
-      commit("logout");
-      sessionStorage.removeItem("token");
-      api.defaults.auth = {}; // Permanent solution
+      api
+        .post("/logout", { data: [] })
+        .then(() => commit("logout"))
+        .catch(error => console.log(error));
     }
   }
 };
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index f122d289..7914ea62 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -59,7 +59,7 @@ export default {
       const username = this.username;
       const password = this.password;
       this.$store
-        .dispatch("authentication/login", { username, password })
+        .dispatch("authentication/login", [username, password])
         .then(() => this.$router.push("/"))
         .catch(error => console.log(error));
     }
diff --git a/vue.config.js b/vue.config.js
index c4175951..881c6248 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,5 +1,19 @@
 module.exports = {
   devServer: {
-    proxy: process.env.BASE_URL
+    proxy: {
+      "/": {
+        target: process.env.BASE_URL,
+        onProxyRes: proxyRes => {
+          if (proxyRes.headers["set-cookie"]) {
+            // Need to remove 'Secure' flag on set-cookie value so browser
+            // can create cookie for local development
+            const cookies = proxyRes.headers["set-cookie"].map(cookie =>
+              cookie.replace(/; secure/gi, "")
+            );
+            proxyRes.headers["set-cookie"] = cookies;
+          }
+        }
+      }
+    }
   }
 };