From e56fae9d337f26f30ba88645483f88933b674f1d Mon Sep 17 00:00:00 2001
From: Bruce Schultz <bschultz013@gmail.com>
Date: Tue, 13 Aug 2024 15:07:26 +0200
Subject: [PATCH] fix(token): fix token error from nuxt-oidc-auth in k8s

---
 .dockerignore                                 |  1 -
 .gitignore                                    |  4 +-
 README.MD                                     | 17 ++++-
 components/KeycloakAuth.vue                   | 19 ++---
 components/MenuHeader.vue                     | 19 +++--
 .../data-stores/managers/DataStoreCreator.vue |  2 +-
 components/login/AvatarButton.vue             | 20 ++----
 composables/useAPIFetch.ts                    | 44 ++----------
 composables/useServices.ts                    | 12 ----
 docker-compose.yml                            | 21 +++---
 middleware/auth.global.ts                     | 23 -------
 middleware/auth.ts                            |  7 ++
 nuxt.config.ts                                | 46 ++++++++++---
 package.json                                  |  8 +--
 pages/analyses.vue                            |  6 +-
 pages/auth/callback.vue                       | 22 ------
 pages/auth/logout.vue                         | 22 ------
 pages/auth/silent-refresh.vue                 | 24 -------
 pages/data-stores/create.vue                  |  4 ++
 pages/data-stores/index.vue                   |  4 ++
 pages/projects.vue                            |  4 ++
 pages/proposals.vue                           |  4 ++
 plugins/api.ts                                | 33 +++++++++
 server/tsconfig.json                          |  3 +
 services/application-service.ts               | 11 ---
 services/auth-service.ts                      | 61 ----------------
 stores/auth.ts                                | 36 ----------
 yarn.lock                                     | 69 +++++++++++--------
 28 files changed, 200 insertions(+), 346 deletions(-)
 delete mode 100644 composables/useServices.ts
 delete mode 100644 middleware/auth.global.ts
 create mode 100644 middleware/auth.ts
 delete mode 100644 pages/auth/callback.vue
 delete mode 100644 pages/auth/logout.vue
 delete mode 100644 pages/auth/silent-refresh.vue
 create mode 100644 plugins/api.ts
 create mode 100644 server/tsconfig.json
 delete mode 100644 services/application-service.ts
 delete mode 100644 services/auth-service.ts
 delete mode 100644 stores/auth.ts

diff --git a/.dockerignore b/.dockerignore
index 5d7203f..1f7cc2c 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,4 +1,3 @@
 node_modules
 .nuxt
-.env.backup
 .env
diff --git a/.gitignore b/.gitignore
index 76690e4..dfa5f5f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,10 +4,10 @@ tsconfig.tsbuildinfo
 tsconfig.build.tsbuildinfo
 
 # local env files
-.env.backup
+.env
 .env.*.local
 .env.production
-.env
+.env.backup
 
 # Logs
 /logs
diff --git a/README.MD b/README.MD
index d0aa6aa..afd1958 100644
--- a/README.MD
+++ b/README.MD
@@ -4,7 +4,18 @@
 NUXT_PUBLIC_BASE_URL="http://localhost:3000"  # URL of the website
 NUXT_PUBLIC_HUB_ADAPTER_URL="http://urlForHubAdapterApi.de"  # URL for hub adapter API
 
-NUXT_KEYCLOAK_BASE_URL="http://your.keycloak.instance.de/realms/flame"  # Keycloak endpoint and realm
-NUXT_KEYCLOAK_CLIENT_ID="node-ui"
-NUXT_KEYCLOAK_CLIENT_SECRET="someSecret"
+NUXT_OIDC_PROVIDERS_KEYCLOAK_BASE_URL="http://your.keycloak.instance.de/realms/flame"
+NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_ID="node-ui"
+NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_SECRET="someSecret"
+
+# Nuxt OIDC Tokens
+# https://nuxt.com/modules/nuxt-oidc-auth#_3-set-secrets
+# NOTE: These will automatically be generated in helm/docker so they do not need to be explicitly set
+
+# NUXT_OIDC_TOKEN_KEY is a cryptographic AES key in base64 used to encrypt the server side token store
+NUXT_OIDC_TOKEN_KEY=xxx
+# NUXT_OIDC_SESSION_SECRET is a 48 character random string that encrypts the user session
+NUXT_OIDC_SESSION_SECRET=xxx
+# NUXT_OIDC_AUTH_SESSION_SECRET is a 48 character random string that encrypts individual sessions during OAuth flows
+NUXT_OIDC_AUTH_SESSION_SECRET=xxx
 ```
diff --git a/components/KeycloakAuth.vue b/components/KeycloakAuth.vue
index 3d299f4..86e6012 100644
--- a/components/KeycloakAuth.vue
+++ b/components/KeycloakAuth.vue
@@ -1,24 +1,15 @@
 <script setup lang="ts">
-import { useAuth } from "~/stores/auth";
-import { useServices } from "~/composables/useServices";
-
-const authStore = useAuth();
-const services = useServices();
-
-const user = authStore.user;
-
-const signIn = () => services.$auth.signInRedirect();
-const signOut = () => services.$auth.logout();
+const { loggedIn, user, login, logout } = useOidcAuth();
 </script>
 
 <template>
   <div class="keycloakLoginButton">
-    <div v-if="user">
-      <h3>Welcome {{ user.profile.name }}!</h3>
-      <Button @click="signOut" severity="warning" outlined>Logout</Button>
+    <div v-if="loggedIn">
+      <h3>Welcome {{ user.providerInfo.preferred_username }}!</h3>
+      <Button @click="logout()" severity="warning" outlined>Logout</Button>
     </div>
     <div v-else>
-      <Button @click="signIn" severity="success" outlined
+      <Button @click="login()" severity="success" outlined
         >Login with Keycloak</Button
       >
     </div>
diff --git a/components/MenuHeader.vue b/components/MenuHeader.vue
index e872487..b3769e6 100644
--- a/components/MenuHeader.vue
+++ b/components/MenuHeader.vue
@@ -1,13 +1,7 @@
 <script setup lang="ts">
+import { ref } from "vue";
 import AvatarButton from "~/components/login/AvatarButton.vue";
-
-const services = useServices();
-
-const user = ref();
-
-onMounted(async () => {
-  user.value = await services.$auth.getUser();
-});
+const { loggedIn } = useOidcAuth();
 
 const items = ref([
   {
@@ -15,6 +9,11 @@ const items = ref([
     icon: "pi pi-home",
     route: "/",
   },
+  {
+    label: "Test",
+    icon: "pi pi-at",
+    route: "/test",
+  },
   {
     label: "Projects",
     icon: "pi pi-objects-column",
@@ -71,7 +70,7 @@ const items = ref([
             :href="href"
             v-bind="props.action"
             @click="navigate"
-            :class="!user && item.label != 'Home' ? 'p-disabled' : ''"
+            :class="!loggedIn && item.label != 'Home' ? 'p-disabled' : ''"
           >
             <span :class="item.icon" />
             <span class="ml-2">{{ item.label }}</span>
@@ -83,7 +82,7 @@ const items = ref([
           :href="item.url"
           :target="item.target"
           v-bind="props.action"
-          :class="!user && item.label != 'Home' ? 'p-disabled' : ''"
+          :class="!loggedIn && item.label != 'Home' ? 'p-disabled' : ''"
         >
           <span :class="item.icon" />
           <span class="ml-2">{{ item.label }}</span>
diff --git a/components/data-stores/managers/DataStoreCreator.vue b/components/data-stores/managers/DataStoreCreator.vue
index d8bb912..d48390c 100644
--- a/components/data-stores/managers/DataStoreCreator.vue
+++ b/components/data-stores/managers/DataStoreCreator.vue
@@ -7,7 +7,7 @@ import InputNumber from "primevue/inputnumber";
 const name = ref("");
 const host = ref("");
 const path = ref("");
-const port = ref(443);
+const port = ref(80);
 const protocol = ref("http");
 
 const loading = ref(false);
diff --git a/components/login/AvatarButton.vue b/components/login/AvatarButton.vue
index 4df8e41..d0cde37 100644
--- a/components/login/AvatarButton.vue
+++ b/components/login/AvatarButton.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { useServices } from "~/composables/useServices";
-
-const services = useServices();
+import { ref } from "vue";
+const { loggedIn, logout, login, user } = useOidcAuth();
 
 const menu = ref();
 const loggedOutUserMenuItems = ref([
@@ -12,7 +11,7 @@ const loggedOutUserMenuItems = ref([
         label: "Login",
         icon: "pi pi-sign-in",
         command: () => {
-          services.$auth.signInRedirect();
+          login();
         },
       },
     ],
@@ -26,29 +25,22 @@ const loggedInUserMenuItems = ref([
         label: "Logout",
         icon: "pi pi-sign-out",
         command: () => {
-          services.$auth.logout();
+          logout();
         },
       },
     ],
   },
 ]);
-
-const user = ref();
-
-onMounted(async () => {
-  user.value = await services.$auth.getUser();
-});
-
 const toggle = (event) => {
   menu.value.toggle(event);
 };
 </script>
 
 <template>
-  <div v-if="user" class="authAvatarSection">
+  <div v-if="loggedIn" class="authAvatarSection">
     <div class="usernameMenuBar">
       <p>
-        {{ user.profile.name }}
+        {{ user.providerInfo.preferred_username }}
       </p>
     </div>
     <Button
diff --git a/composables/useAPIFetch.ts b/composables/useAPIFetch.ts
index a619f67..db7021e 100644
--- a/composables/useAPIFetch.ts
+++ b/composables/useAPIFetch.ts
@@ -14,47 +14,17 @@ import type {
   ListServices,
   Service,
 } from "~/services/Api";
-import { useServices } from "~/composables/useServices";
-
-export const useAPIFetch: typeof useFetch = (request, options?) => {
-  const config = useRuntimeConfig();
-  const nuxtApp = useNuxtApp();
-  const baseUrl = config.public.hubAdapterUrl as string;
-
-  const services = useServices();
-
-  const token = services.$application.getToken();
+import type { UseFetchOptions } from "#app";
 
+export function useAPIFetch<T>(
+  request: string | (() => string),
+  options: UseFetchOptions<T> = {},
+) {
   return useFetch(request, {
-    baseURL: baseUrl,
-    onRequest({ options }) {
-      // Annoying workaround to avoid typescript from complaining - cast to Headers then set explicitly
-      const headers = options.headers
-        ? new Headers(options.headers)
-        : new Headers();
-      headers.set("Authorization", `Bearer ${token}`);
-      options.headers = headers;
-    },
-    onRequestError({ request, options, error }) {
-      console.log(request);
-      console.log(options);
-      console.log(error);
-    },
-    onResponse({ response }) {
-      // Process the response data
-      localStorage.setItem("token", response._data.token);
-    },
-    onResponseError({ response }) {
-      // Handle the response errors
-      console.log(response);
-      if (response.status === 401 || response.status === 403) {
-        console.log("User signed out, routing to login");
-        nuxtApp.runWithContext(() => navigateTo("/"));
-      }
-    },
     ...options,
+    $fetch: useNuxtApp().$hubApi,
   });
-};
+}
 
 // Hub endpoints
 export function approveRejectProjectProposal(
diff --git a/composables/useServices.ts b/composables/useServices.ts
deleted file mode 100644
index 826a5db..0000000
--- a/composables/useServices.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import AuthService from "~/services/auth-service";
-import ApplicationService from "~/services/application-service";
-import { useAuth } from "~/stores/auth";
-
-export const useServices = () => {
-  const authStore = useAuth();
-
-  return {
-    $auth: new AuthService(),
-    $application: new ApplicationService(authStore.access_token),
-  };
-};
diff --git a/docker-compose.yml b/docker-compose.yml
index 29ba167..eabf44b 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -11,11 +11,11 @@ services:
     environment:
       NODE_ENV: "development"
       # The "NUXT_" prefix overrides the env variable set during build time (for prod only)
-      NUXT_BASE_URL: "http://localhost:3000"  # URL of the website
-      NUXT_HUB_ADAPTER_URL: "http://localhost:5000"
-      NUXT_KEYCLOAK_BASE_URL: "http://localhost:8080/realms/flame"
-      NUXT_KEYCLOAK_CLIENT_ID: "node-ui"
-      NUXT_KEYCLOAK_CLIENT_SECRET: "xxx"
+      NUXT_PUBLIC_BASE_URL: "http://localhost:3000"  # URL of the website
+      NUXT_PUBLIC_HUB_ADAPTER_URL: "http://localhost:5000"
+      NUXT_OIDC_PROVIDERS_KEYCLOAK_BASE_URL: "http://localhost:8080/realms/flame"
+      NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_ID: "node-ui"
+      NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_SECRET: "xxx"
     ports:
       - '3000:3000'
     restart: always
@@ -32,11 +32,12 @@ services:
 #    environment:
 #      NODE_ENV: "production"
 #      # The "NUXT_" prefix overrides the env variable set during build time (for prod only)
-#      NUXT_BASE_URL: "http://localhost:3000"  # URL of the website
-#      NUXT_HUB_ADAPTER_URL: "http://localhost:8081"
-#      NUXT_KEYCLOAK_BASE_URL: "http://some.keycloak.com/realms/flame"
-#      NUXT_KEYCLOAK_CLIENT_ID: "node-ui"
-#      NUXT_KEYCLOAK_CLIENT_SECRET: ""
+#      NUXT_PUBLIC_BASE_URL: "http://localhost:3000"  # URL of the website
+#      NUXT_PUBLIC_HUB_ADAPTER_URL: "http://localhost:8081"
+#      NUXT_OIDC_PROVIDERS_KEYCLOAK_BASE_URL: "http://some.keycloak.com/realms/flame"
+#      NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_ID: "node-ui"
+#      NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_SECRET: ""
+#      NUXT_OIDC_PROVIDERS_KEYCLOAK_REDIRECT_URI: "http://localhost:3000/auth/keycloak/callback"
 ##    ports:
 ##      - '3000:3000'
 #    restart: always
diff --git a/middleware/auth.global.ts b/middleware/auth.global.ts
deleted file mode 100644
index 3e7e959..0000000
--- a/middleware/auth.global.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { User } from "oidc-client-ts";
-import { useAuth } from "@/stores/auth";
-
-const authFlowRoutes = [
-  "/auth/callback",
-  "/auth/silent-refresh",
-  "/auth/logout",
-  "/",
-];
-
-export default defineNuxtRouteMiddleware(async (to, from) => {
-  const authStore = useAuth();
-  const services = useServices();
-  const user = (await services.$auth.getUser()) as User;
-
-  if (!user && !authFlowRoutes.includes(to.path)) {
-    // use this to automatically force a sign in and redirect
-    console.warn("Not logged in");
-    return await services.$auth.signInRedirect();
-  } else {
-    return authStore.setUpUserCredentials(user);
-  }
-});
diff --git a/middleware/auth.ts b/middleware/auth.ts
new file mode 100644
index 0000000..5bed634
--- /dev/null
+++ b/middleware/auth.ts
@@ -0,0 +1,7 @@
+export default defineNuxtRouteMiddleware(async (to) => {
+  const { loggedIn, login } = useOidcAuth();
+  if (!loggedIn.value && to.path !== "/") {
+    console.warn("Not logged in");
+    return login();
+  }
+});
diff --git a/nuxt.config.ts b/nuxt.config.ts
index fef0620..79804c0 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -2,18 +2,15 @@
 import { defineNuxtConfig } from "nuxt/config";
 
 export default defineNuxtConfig({
-  ssr: false,
+  ssr: true,
   devtools: { enabled: false },
-  modules: ["nuxt-primevue", "@pinia/nuxt"],
+  modules: ["nuxt-primevue", "nuxt-oidc-auth"],
 
   runtimeConfig: {
     public: {
-      baseUrl: process.env.NUXT_BASE_URL || "http://localhost:3000",
+      baseUrl: process.env.NUXT_PUBLIC_BASE_URL || "http://localhost:3000",
       hubAdapterUrl:
-        process.env.NUXT_HUB_ADAPTER_URL || "http://localhost:5000",
-      keycloakUrl: process.env.NUXT_KEYCLOAK_BASE_URL as string,
-      keycloakClientId: process.env.NUXT_KEYCLOAK_CLIENT_ID,
-      keycloakClientSecret: process.env.NUXT_KEYCLOAK_CLIENT_SECRET,
+        process.env.NUXT_PUBLIC_HUB_ADAPTER_URL || "http://localhost:5000",
     },
   },
 
@@ -21,12 +18,45 @@ export default defineNuxtConfig({
     options: {
       ripple: true,
     },
-
     directives: {
       include: ["Ripple", "Tooltip", "Toast"],
     },
   },
 
+  oidc: {
+    defaultProvider: "keycloak",
+    providers: {
+      keycloak: {
+        clientId:
+          process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_ID || "node-ui",
+        clientSecret: process.env
+          .NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_SECRET as string,
+        redirectUri:
+          process.env.NUXT_PUBLIC_BASE_URL + "/auth/keycloak/callback",
+        exposeAccessToken: true,
+        // The auth is different since that is accessed via a frontend client
+        authorizationUrl:
+          process.env.KEYCLOAK_LOGIN_URL + "/protocol/openid-connect/auth",
+        tokenUrl:
+          process.env.KEYCLOAK_SERVICE_URL + "/protocol/openid-connect/token",
+        userinfoUrl:
+          process.env.KEYCLOAK_SERVICE_URL +
+          "/protocol/openid-connect/userinfo",
+        logoutUrl:
+          process.env.KEYCLOAK_SERVICE_URL + "/protocol/openid-connect/auth",
+      },
+    },
+    session: {
+      expirationCheck: false,
+      automaticRefresh: true,
+      maxAge: 3600,
+    },
+    middleware: {
+      globalMiddlewareEnabled: false,
+      customLoginPage: false,
+    },
+  },
+
   css: [
     "primevue/resources/themes/lara-dark-amber/theme.css",
     "primeicons/primeicons.css",
diff --git a/package.json b/package.json
index e1ae0e1..64a2c95 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,6 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.4.0",
-    "@pinia/nuxt": "^0.5.3",
     "@types/eslint-config-prettier": "^6.11.3",
     "@types/uuid": "^9.0.8",
     "@typescript-eslint/eslint-plugin": "^7.11.0",
@@ -23,9 +22,11 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-vue": "^9.26.0",
     "globals": "^15.3.0",
+    "keycloak-js": "^25.0.0",
     "nuxt": "^3.12.3",
+    "nuxt-oidc-auth": "^0.12.0",
     "nuxt-primevue": "^3.0.0",
-    "oidc-client-ts": "2.4.0",
+    "pinia": "^2.1.7",
     "prettier": "^3.3.0",
     "primeicons": "^7.0.0",
     "primevue": "^3.52.0",
@@ -38,6 +39,5 @@
     "vue-router": "^4.3.2",
     "webpack": "^5.91.0"
   },
-  "dependencies": {},
-  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+  "dependencies": {}
 }
diff --git a/pages/analyses.vue b/pages/analyses.vue
index 447ce7e..c9cfec9 100644
--- a/pages/analyses.vue
+++ b/pages/analyses.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import AnalysesTable from "~/components/analysis/AnalysesTable.vue";
 
-// definePageMeta({
-//   middleware: ["auth"],
-// });
+definePageMeta({
+  middleware: ["auth"],
+});
 </script>
 
 <template>
diff --git a/pages/auth/callback.vue b/pages/auth/callback.vue
deleted file mode 100644
index bd73bf4..0000000
--- a/pages/auth/callback.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script lang="ts" setup>
-import { useServices } from "~/composables/useServices";
-
-const services = useServices();
-
-const authenticateOidc = async () => {
-  try {
-    await services.$auth.signInCallback();
-    navigateTo("/");
-  } catch (error) {
-    console.error(error);
-  }
-};
-
-await authenticateOidc();
-</script>
-
-<template>
-  <div class="mb-6 text-p2blue-700 text-2xl">
-    Loading authentication, checking local state or redirecting...
-  </div>
-</template>
diff --git a/pages/auth/logout.vue b/pages/auth/logout.vue
deleted file mode 100644
index 84d4bfa..0000000
--- a/pages/auth/logout.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script lang="ts" setup>
-import { useServices } from "~/composables/useServices";
-import { useAuth } from "~/stores/auth";
-
-const services = useServices();
-const authStore = useAuth();
-
-const logOutOidc = async () => {
-  try {
-    authStore.clearUserSession();
-    await services.$auth.logout();
-  } catch (error) {
-    console.error(error);
-  }
-};
-
-await logOutOidc();
-</script>
-
-<template>
-  <div class="mb-6 text-p2blue-700 text-2xl">Logging out...</div>
-</template>
diff --git a/pages/auth/silent-refresh.vue b/pages/auth/silent-refresh.vue
deleted file mode 100644
index f3f5571..0000000
--- a/pages/auth/silent-refresh.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts" setup>
-import { useServices } from "~/composables/useServices";
-
-const services = useServices();
-
-const silentRefreshOidc = async () => {
-  try {
-    await services.$auth.renewToken();
-    navigateTo("/");
-  } catch (error) {
-    console.error(error);
-  }
-};
-
-await silentRefreshOidc();
-</script>
-
-<template>
-  <div class="mb-6 text-p2blue-700 text-2xl">
-    Loading authentication... (checking local state or redirecting)
-  </div>
-</template>
-
-<style scoped lang="scss"></style>
diff --git a/pages/data-stores/create.vue b/pages/data-stores/create.vue
index 0a5aa57..95e2abd 100644
--- a/pages/data-stores/create.vue
+++ b/pages/data-stores/create.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
 import ResourceManagerLayout from "~/components/data-stores/ResourceManagerTabs.vue";
+
+definePageMeta({
+  middleware: ["auth"],
+});
 </script>
 
 <template>
diff --git a/pages/data-stores/index.vue b/pages/data-stores/index.vue
index f102931..cc8bc30 100644
--- a/pages/data-stores/index.vue
+++ b/pages/data-stores/index.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
 import DataStoreLayout from "~/components/data-stores/DataStoreListTabs.vue";
+
+definePageMeta({
+  middleware: ["auth"],
+});
 </script>
 
 <template>
diff --git a/pages/projects.vue b/pages/projects.vue
index b76dc71..907c8b0 100644
--- a/pages/projects.vue
+++ b/pages/projects.vue
@@ -1,5 +1,9 @@
 <script setup>
 import ProjectTable from "~/components/projects/ProjectTable.vue";
+
+definePageMeta({
+  middleware: ["auth"],
+});
 </script>
 
 <template>
diff --git a/pages/proposals.vue b/pages/proposals.vue
index 018dcda..6067f6d 100644
--- a/pages/proposals.vue
+++ b/pages/proposals.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
 import ProposalTable from "~/components/projects/ProposalTable.vue";
+
+definePageMeta({
+  middleware: ["auth"],
+});
 </script>
 
 <template>
diff --git a/plugins/api.ts b/plugins/api.ts
new file mode 100644
index 0000000..39cf2e5
--- /dev/null
+++ b/plugins/api.ts
@@ -0,0 +1,33 @@
+export default defineNuxtPlugin((nuxtApp) => {
+  const { user } = useOidcAuth();
+  const config = useRuntimeConfig();
+  const baseUrl = config.public.hubAdapterUrl as string;
+  const hubApi = $fetch.create({
+    baseURL: baseUrl,
+    onRequest({ options }) {
+      // Annoying workaround to avoid typescript from complaining - cast to Headers then set explicitly
+      const headers = options.headers
+        ? new Headers(options.headers)
+        : new Headers();
+      headers.set("Authorization", `Bearer ${user?.value.accessToken}`);
+      options.headers = headers;
+    },
+    onRequestError({ error }) {
+      console.log(error);
+    },
+    onResponseError({ response }) {
+      // Handle the response errors
+      console.log(response);
+      if (response.status === 401 || response.status === 403) {
+        console.warn("User signed out, routing to login");
+        nuxtApp.runWithContext(() => navigateTo("/auth/login"));
+      }
+    },
+  });
+
+  return {
+    provide: {
+      hubApi,
+    },
+  };
+});
diff --git a/server/tsconfig.json b/server/tsconfig.json
new file mode 100644
index 0000000..b9ed69c
--- /dev/null
+++ b/server/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}
diff --git a/services/application-service.ts b/services/application-service.ts
deleted file mode 100644
index 8b90c1a..0000000
--- a/services/application-service.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export default class ApplicationService {
-  constructor(private readonly accessToken: string) {}
-
-  getDefaultHeader() {
-    return { Authorization: `Bearer ${this.accessToken}` };
-  }
-
-  getToken() {
-    return this.accessToken;
-  }
-}
diff --git a/services/auth-service.ts b/services/auth-service.ts
deleted file mode 100644
index e97ffd3..0000000
--- a/services/auth-service.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { User, UserManager, WebStorageStateStore } from "oidc-client-ts";
-
-export default class AuthService {
-  private userManager!: UserManager;
-  private keycloakConfig;
-
-  constructor() {
-    const rtConfig = useRuntimeConfig();
-
-    const keycloakInitOptions = {
-      url: rtConfig.public.keycloakUrl as string,
-      clientId: rtConfig.public.keycloakClientId as string,
-      clientSecret: rtConfig.public.keycloakClientSecret,
-    };
-
-    this.keycloakConfig = {
-      ...keycloakInitOptions,
-    };
-    this.initializedOidc();
-  }
-
-  private initializedOidc() {
-    try {
-      const { url, clientId, clientSecret } = this.keycloakConfig;
-      const settings = {
-        authority: url,
-        client_id: clientId,
-        client_secret: clientSecret,
-        redirect_uri: `${window.location.origin}/auth/callback`,
-        silent_redirect_uri: `${window.location.origin}/auth/silent-refresh`,
-        post_logout_redirect_uri: `${window.location.origin}`,
-        response_type: "code",
-        userStore: new WebStorageStateStore(),
-        loadUserInfo: true,
-      };
-      this.userManager = new UserManager(settings);
-    } catch (error) {
-      console.error(error);
-    }
-  }
-
-  public signInRedirect() {
-    return this.userManager.signinRedirect();
-  }
-
-  public signInCallback() {
-    return this.userManager.signinCallback();
-  }
-
-  public renewToken(): Promise<void> {
-    return this.userManager.signinSilentCallback();
-  }
-
-  public logout(): Promise<void> {
-    return this.userManager.signoutRedirect();
-  }
-
-  public getUser(): Promise<User | null> {
-    return this.userManager.getUser();
-  }
-}
diff --git a/stores/auth.ts b/stores/auth.ts
deleted file mode 100644
index 7aa9954..0000000
--- a/stores/auth.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { acceptHMRUpdate, defineStore } from "pinia";
-import { User } from "oidc-client-ts";
-
-export const useAuth = defineStore("auth", () => {
-  const authUser = ref<User | null>(null);
-
-  const access_token = computed(() => authUser.value?.access_token ?? "");
-
-  const isLoggedIn = computed(() => !!authUser.value);
-
-  const tenantId = computed(
-    () => (authUser.value?.profile?.Tenant as string) ?? "",
-  );
-
-  const setUpUserCredentials = (user: User) => {
-    authUser.value = user;
-  };
-
-  const clearUserSession = () => {
-    authUser.value = null;
-  };
-
-  return {
-    access_token,
-    isLoggedIn,
-    tenantId,
-    setUpUserCredentials,
-    clearUserSession,
-    user: authUser,
-  };
-});
-
-// Allows changes made to the store code to be applied automatically without having to restart the app
-if (import.meta.hot) {
-  import.meta.hot.accept(acceptHMRUpdate(useAuth, import.meta.hot));
-}
diff --git a/yarn.lock b/yarn.lock
index f4ed092..743c2dd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -844,7 +844,7 @@
   resolved "https://registry.yarnpkg.com/@nuxt/devalue/-/devalue-2.0.2.tgz#5749f04df13bda4c863338d8dabaf370f45ef7c7"
   integrity sha512-GBzP8zOc7CGWyFQS6dv1lQz8VVpz5C2yRszbXufwG/9zhStTIH50EtD87NmWbTMwXDvZLNg8GIpb1UFdH93JCA==
 
-"@nuxt/devtools-kit@1.3.9":
+"@nuxt/devtools-kit@1.3.9", "@nuxt/devtools-kit@^1.1.5":
   version "1.3.9"
   resolved "https://registry.yarnpkg.com/@nuxt/devtools-kit/-/devtools-kit-1.3.9.tgz#ad2dc18a76e2508913f1693105185051b45a1bd3"
   integrity sha512-tgr/F+4BbI53/JxgaXl3cuV9dMuCXMsd4GEXN+JqtCdAkDbH3wL79GGWx0/6I9acGzRsB6UZ1H6U96nfgcIrAw==
@@ -912,7 +912,7 @@
     which "^3.0.1"
     ws "^8.17.1"
 
-"@nuxt/kit@3.12.4", "@nuxt/kit@^3.11.2", "@nuxt/kit@^3.12.2", "@nuxt/kit@^3.7.3", "@nuxt/kit@^3.9.0":
+"@nuxt/kit@3.12.4", "@nuxt/kit@^3.11.2", "@nuxt/kit@^3.12.2", "@nuxt/kit@^3.7.3":
   version "3.12.4"
   resolved "https://registry.yarnpkg.com/@nuxt/kit/-/kit-3.12.4.tgz#b7073611d533ac32b504d95664074be3587046b3"
   integrity sha512-aNRD1ylzijY0oYolldNcZJXVyxdGzNTl+Xd0UYyFQCu9f4wqUZqQ9l+b7arCEzchr96pMK0xdpvLcS3xo1wDcw==
@@ -1110,14 +1110,6 @@
     "@parcel/watcher-win32-ia32" "2.4.1"
     "@parcel/watcher-win32-x64" "2.4.1"
 
-"@pinia/nuxt@^0.5.3":
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/@pinia/nuxt/-/nuxt-0.5.3.tgz#d9de0653e36011d859e42917480b09c814ab6197"
-  integrity sha512-AEuHEcaxZdAl73qUOco1TpOGjcmn83nJlYORZ63zhufSCVMj28lPq15ZnfhhofwBh5IjkT/lB7d8Ff958LajDQ==
-  dependencies:
-    "@nuxt/kit" "^3.9.0"
-    pinia "2.2.1"
-
 "@pkgjs/parseargs@^0.11.0":
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
@@ -2430,11 +2422,6 @@ crossws@^0.2.0, crossws@^0.2.4:
   resolved "https://registry.yarnpkg.com/crossws/-/crossws-0.2.4.tgz#82a8b518bff1018ab1d21ced9e35ffbe1681ad03"
   integrity sha512-DAxroI2uSOgUKLz00NX6A8U/8EE3SZHmIND+10jkVSaypvyt57J5JEOxAQOL6lQxyzi/wZbTIwssU1uy69h5Vg==
 
-crypto-js@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-4.2.0.tgz#4d931639ecdfd12ff80e8186dba6af2c2e856631"
-  integrity sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==
-
 css-declaration-sorter@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-7.2.0.tgz#6dec1c9523bc4a643e088aab8f09e67a54961024"
@@ -3788,6 +3775,16 @@ jiti@^1.21.0, jiti@^1.21.6:
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268"
   integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==
 
+jose@^5.2.3:
+  version "5.6.3"
+  resolved "https://registry.yarnpkg.com/jose/-/jose-5.6.3.tgz#415688bc84875461c86dfe271ea6029112a23e27"
+  integrity sha512-1Jh//hEEwMhNYPDDLwXHa2ePWgWiFNNUadVmguAAw2IJ6sj9mNxV5tGXJNqlMkJAybF6Lgw1mISDxTePP/187g==
+
+js-sha256@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/js-sha256/-/js-sha256-0.11.0.tgz#256a921d9292f7fe98905face82e367abaca9576"
+  integrity sha512-6xNlKayMZvds9h1Y1VWc0fQHQ82BxTXizWPEtEeGvmOUYpBRy4gbWroHLpzowe6xiQhHpelCQiE7HEdznyBL9Q==
+
 js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -3844,10 +3841,18 @@ jsonfile@^6.0.1:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
-jwt-decode@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-3.1.2.tgz#3fb319f3675a2df0c2895c8f5e9fa4b67b04ed59"
-  integrity sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==
+jwt-decode@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-4.0.0.tgz#2270352425fd413785b2faf11f6e755c5151bd4b"
+  integrity sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==
+
+keycloak-js@^25.0.0:
+  version "25.0.2"
+  resolved "https://registry.yarnpkg.com/keycloak-js/-/keycloak-js-25.0.2.tgz#10de8352ae7bb0d46396e4f083b40b959285791b"
+  integrity sha512-ACLf5O5PqzfDJwGqvLpqM0kflYWmyl3+T7M2C23gztJYccDxdfNP54+B9OkXz2GnDpLUId0ceoA+lbHw9t4Wng==
+  dependencies:
+    js-sha256 "^0.11.0"
+    jwt-decode "^4.0.0"
 
 keyv@^4.5.4:
   version "4.5.4"
@@ -4384,6 +4389,22 @@ nuxi@^3.12.0:
   optionalDependencies:
     fsevents "~2.3.3"
 
+nuxt-oidc-auth@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/nuxt-oidc-auth/-/nuxt-oidc-auth-0.12.0.tgz#5f957f3473ac5841f162ade98460ac2d247c8ea9"
+  integrity sha512-HPXy2ctmFTdGhDvsREe7MB+vIlvE4AK9A4ECemqpQK/DDzABQ9elk4+8oL6K3ZNgz8nXUY/ZKF6NrlT9mUP13g==
+  dependencies:
+    "@nuxt/devtools-kit" "^1.1.5"
+    consola "^3.2.3"
+    defu "^6.1.4"
+    h3 "^1.11.1"
+    jose "^5.2.3"
+    ofetch "^1.3.4"
+    scule "^1.3.0"
+    sirv "^2.0.4"
+    ufo "^1.5.3"
+    uncrypto "^0.1.3"
+
 nuxt-primevue@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/nuxt-primevue/-/nuxt-primevue-3.0.0.tgz#a23636182a431529b26532d608d22d833e5dac70"
@@ -4535,14 +4556,6 @@ ohash@^1.1.3:
   resolved "https://registry.yarnpkg.com/ohash/-/ohash-1.1.3.tgz#f12c3c50bfe7271ce3fd1097d42568122ccdcf07"
   integrity sha512-zuHHiGTYTA1sYJ/wZN+t5HKZaH23i4yI1HMwbuXm24Nid7Dv0KcuRlKoNKS9UNfAVSBlnGLcuQrnOKWOZoEGaw==
 
-oidc-client-ts@2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/oidc-client-ts/-/oidc-client-ts-2.4.0.tgz#764c8a33de542026e2798de9849ce8049047d7e5"
-  integrity sha512-WijhkTrlXK2VvgGoakWJiBdfIsVGz6CFzgjNNqZU1hPKV2kyeEaJgLs7RwuiSp2WhLfWBQuLvr2SxVlZnk3N1w==
-  dependencies:
-    crypto-js "^4.2.0"
-    jwt-decode "^3.1.2"
-
 on-finished@2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f"
@@ -4733,7 +4746,7 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.3.1:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
-pinia@2.2.1:
+pinia@^2.1.7:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.2.1.tgz#7cf860f6a23981c23e58605cee45496ce46d15d1"
   integrity sha512-ltEU3xwiz5ojVMizdP93AHi84Rtfz0+yKd8ud75hr9LVyWX2alxp7vLbY1kFm7MXFmHHr/9B08Xf8Jj6IHTEiQ==