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 397abca88..a1c27e1c0 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 b059a6cb7..9582c9cc1 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 cb44ebc70..be433959d 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 560da89ac..9c8023403 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 39a6355cc..c50bcbeee 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 828c3cc8b..3512e2da2 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 f122d2890..7914ea626 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 c41759511..881c6248a 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;
+          }
+        }
+      }
+    }
   }
 };