Keycloak integration

.env.development

 VUE_APP_API="http://localhost:8080"
+VUE_APP_KEYCLOAK_URL="https://catalogue-keycloak-dev.k8s.medina.esilab.org/auth"
\ No newline at end of file

.env.production

 VUE_APP_API="<<CCE_API_URL>>"
+VUE_APP_KEYCLOAK_URL="<<KEYCLOAK_URL>>"

entrypoint.sh

 URL="${CCE_API_URL:-https://cce-api-dev.k8s.medina.esilab.org}"
 
 sed -i "s|<<CCE_API_URL>>|${CCE_API_URL}|g" /usr/share/nginx/html/js/app.*.js
+sed -i "s|<<KEYCLOAK_URL>>|${KEYCLOAK_URL}|g" /usr/share/nginx/html/js/app.*.js
 
 nginx -g 'daemon off;'

package.json

@@ -29,7 +29,8 @@
     "vue": "^3.2.47",
     "vue-axios": "^3.5.2",
     "vue-router": "^4.1.6",
-    "vuex": "^4.1.0"
+    "vuex": "^4.1.0",
+    "keycloak-js": "^21.0.2"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.21.3",

src/main.js

@@ -4,6 +4,7 @@ import router from "./router";
 import store from "@/store";
 import axios from "axios";
 import VueAxios from "vue-axios";
+import Keycloak from "keycloak-js";
 
 import BootstrapVueNext from "bootstrap-vue-next";
 import "bootstrap/dist/css/bootstrap.css";
@@ -13,9 +14,42 @@ import { dom } from "@fortawesome/fontawesome-svg-core";
 dom.watch();
 import "@fortawesome/fontawesome-free/css/all.css";
 
+let initOptions = {
+    url: process.env.VUE_APP_KEYCLOAK_URL,
+    realm: 'medina',
+    clientId: 'cce-frontend',
+    onLoad: 'login-required'
+}
+
+let keycloak = new Keycloak(initOptions);
+
+keycloak.init({onLoad: initOptions.onLoad}).then((auth) => {
+    if (!auth) {
+        window.location.reload();
+    } else {
+        axios.defaults.headers.common = {
+            'Authorization': 'Bearer ' + keycloak.token
+        };
+
         const app = createApp(App);
         app.use(router);
         app.use(store);
         app.use(VueAxios, axios);
         app.use(BootstrapVueNext);
         app.mount("#app");
+    }
+
+    setInterval(() => {
+        keycloak.updateToken(300).then((refreshed) => {
+            if (!refreshed) {
+                console.warn('Token not refreshed, valid for '
+                    + Math.round(keycloak.tokenParsed.exp + keycloak.timeSkew - new Date().getTime() / 1000) + ' seconds');
+            }
+        }).catch(() => {
+            console.error('Failed to refresh token')
+        });
+    }, 300 * 1000)
+
+}).catch(() => {
+    console.error("Keycloak authentication failed");
+});

src/services/ApiService.js

-import api from "@/client/client";
+import axios from "axios";
+
+const headers = {
+    "Content-Type": "application/json"
+};
 
 export const ApiService = {
     getToeList() {
-    return api.get("/toeList");
+        return axios.get(process.env.VUE_APP_API + "/toeList", {headers});
     },
     getToeHistory(toeId) {
-    return api.get("/toes/" + toeId + "/listHistory");
+        return axios.get(process.env.VUE_APP_API + "/toes/" + toeId + "/listHistory", {headers});
     },
     getTreeByStateId(stateId) {
-    return api.get("/history/" + stateId);
+        return axios.get(process.env.VUE_APP_API + "/history/" + stateId, {headers});
     },
 };