Cleanup

package.json

@@ -11,7 +11,7 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
-    "@dsb-norge/vue-keycloak-js": "3.0.1",
+    "@dsb-norge/vue-keycloak-js": "^3.0.1",
     "axios": "1.7.9",
     "keycloak-js": "^26.1.0",
     "vue": "3.5.13"

pnpm-lock.yaml

@@ -9,7 +9,7 @@ importers:
   .:
     dependencies:
       '@dsb-norge/vue-keycloak-js':
-        specifier: 3.0.1
+        specifier: ^3.0.1
         version: 3.0.1(vue@3.5.13(typescript@5.6.3))
       axios:
         specifier: 1.7.9

src/App.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { HTTP } from '@/main'
+import { authServer, resourceServer } from '@/main'
 import type { AxiosResponseHeaders } from 'axios'
 import { ref } from 'vue'
+import Keycloak from "keycloak-js"
 import { useKeycloak } from '@dsb-norge/vue-keycloak-js'
 import { settings } from '../settings'
 
@@ -17,7 +18,7 @@ function manuallyRefreshAccessToken() {
 async function doAuthenticatedRequest() {
   // Doesn't really go anywhere, but as you see from the headers in the request
   // it contains the latest access token at all times
-  const response = await HTTP.get('/oidc-test-web')
+  const response = await authServer.get('/oidc-test-web')
   requestHeaders.value = response.config.headers
 }
 
@@ -30,51 +31,55 @@ function accountManagemnt() {
 }
 
 async function get_resource(id: string) {
-  await HTTP.get(`${settings.url}/${id}`).then(
+  if (!keycloak.keycloak) { return }
+  await keycloak.keycloak.updateToken(5000)
+  await resourceServer.get(id).then(
     resp => resource.value = resp['data']
   )
 }
 </script>
 
 <template>
-  <h1>OIDC-test - web client</h1>
-  <p class="center">
-    Test the authentication and authorization, with OpenID Connect and OAuth2 with a Keycloak provider.
-  </p>
-  <div v-if="keycloak.authenticated" class="user-info">
-    <p>Hey, {{ keycloak.idTokenParsed?.name }}</p>
-    <img v-if="keycloak.idTokenParsed?.picture" :src="keycloak.idTokenParsed.picture" class="picture"></img>
-    <div>{{ keycloak.idTokenParsed?.email }}</div>
-    <div v-if="keycloak.resourceAccess && keycloak.resourceAccess['oidc-test-web']">
-      <span>Roles:</span>
-      <span v-for="role in keycloak.resourceAccess && keycloak.resourceAccess['oidc-test-web'].roles" class="role">{{
-        role }}</span>
+  <div id="app">
+    <h1>OIDC-test - web client</h1>
+    <p class="center">
+      Test the authentication and authorization, with OpenID Connect and OAuth2 with a Keycloak provider.
+    </p>
+    <div v-if="keycloak.authenticated" class="user-info">
+      <p>Hey, {{ keycloak.idTokenParsed?.name }}</p>
+      <img v-if="keycloak.idTokenParsed?.picture" :src="keycloak.idTokenParsed.picture" class="picture"></img>
+      <div>{{ keycloak.idTokenParsed?.email }}</div>
+      <div v-if="keycloak.resourceAccess && keycloak.resourceAccess['oidc-test-web']">
+        <span>Roles:</span>
+        <span v-for="role in keycloak.resourceAccess && keycloak.resourceAccess['oidc-test-web'].roles" class="role">{{
+          role }}</span>
+      </div>
+      <div v-if="keycloak.idTokenParsed?.oidc_provider">
+        <span>Provider:</span>
+        {{ keycloak.idTokenParsed?.oidc_provider }}
+      </div>
+      <button @click="accountManagemnt">Account management</button>
+      <button @click="logout" class="logout">Logout</button>
     </div>
-    <div v-if="keycloak.idTokenParsed?.oidc_provider">
-      <span>Provider:</span>
-      {{ keycloak.idTokenParsed?.oidc_provider }}
+    <hr>
+    <p class="center">Fetch resources from a resource server (at {{ settings.url }}) with the authentication token:</p>
+    <div class="actions">
+      <button @click="get_resource('time')">Time</button>
+      <button @click="get_resource('bs')">BS</button>
     </div>
-    <button @click="accountManagemnt">Account management</button>
-    <button @click="logout" class="logout">Logout</button>
-  </div>
-  <hr>
-  <p class="center">Fetch resources from a resource server (at {{ settings.url }}) with the authentication token:</p>
-  <div class="actions">
-    <button @click="get_resource('time')">Time</button>
-    <button @click="get_resource('bs')">BS</button>
-  </div>
-  <div class="resources">
-    <div v-if="Object.entries(resource).length > 0" class="resource">
-      <div v-for="(value, key) in resource">
-        <div class="key">{{ key }}</div>
-        <div class="value">{{ value }}</div>
+    <div class="resources">
+      <div v-if="Object.entries(resource).length > 0" class="resource">
+        <div v-for="(value, key) in resource">
+          <div class="key">{{ key }}</div>
+          <div class="value">{{ value }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="from-keycloak-vue">
+      <button @click="doAuthenticatedRequest">Trigger request</button>
+      <button @click="manuallyRefreshAccessToken">Refresh access token</button>
+      <div class="token" :innerText="requestHeaders?.toString()">
       </div>
     </div>
   </div>
-  <div class="from-keycloak-vue">
-    <button @click="doAuthenticatedRequest">Trigger request</button>
-    <button @click="manuallyRefreshAccessToken">Refresh access token</button>
-    <div class="token" :innerText="requestHeaders?.toString()">
-    </div>
-  </div>
 </template>

src/main.ts

@@ -1,38 +1,54 @@
 import { createApp } from 'vue'
 import Keycloak from "keycloak-js"
-import VueKeycloakJs, { useKeycloak } from '@dsb-norge/vue-keycloak-js'
+import VueKeycloakJs from '@dsb-norge/vue-keycloak-js'
 import axios from 'axios'
 import App from './App.vue'
-import { settings as app_settings } from "../settings"
+import { settings } from "../settings"
 
-export const HTTP = axios.create({
+export const authServer = axios.create({
   baseURL: '/',
   timeout: 10000
 })
 
-function initializeTokenInterceptor() {
-  HTTP.interceptors.request.use(settings => {
-    const keycloak = useKeycloak()
+export const resourceServer = axios.create({
+  baseURL: settings.url,
+  timeout: 10000
+})
+
+function initializeTokenInterceptor(keycloak: Keycloak) {
+  authServer.interceptors.request.use(axiosSettings => {
     if (keycloak.authenticated) {
-      settings.headers.Authorization = `Bearer ${keycloak.token}`
-      settings.headers.auth_provider = app_settings.auth_provider
+      axiosSettings.headers.Authorization = `Bearer ${keycloak.token}`
+      axiosSettings.headers.auth_provider = settings.auth_provider
     }
-    return settings
+    return axiosSettings
+  }, error => {
+    return Promise.reject(error)
+  })
+  resourceServer.interceptors.request.use(axiosSettings => {
+    if (keycloak.authenticated) {
+      axiosSettings.headers.Authorization = `Bearer ${keycloak.token}`
+      axiosSettings.headers.auth_provider = settings.auth_provider
+    }
+    return axiosSettings
   }, error => {
     return Promise.reject(error)
   })
 }
 
-createApp(App)
-  .use(VueKeycloakJs, {
-    config: {
-      url: 'https://philo.ydns.eu/auth/',
-      realm: 'test',
-      clientId: 'oidc-test-web',
-    },
-    init: { onLoad: app_settings.sso ? 'check-sso' : 'login-required' },
-    onReady(keycloak: Keycloak, vkk) {
-      initializeTokenInterceptor()
-    },
-  })
-  .mount('#app')
+const app = createApp(App)
+app.mount('#app')
+app.use(VueKeycloakJs, {
+  config: {
+    url: 'https://philo.ydns.eu/auth/',
+    realm: 'test',
+    clientId: 'oidc-test-web',
+  },
+  init: {
+    onLoad: settings.sso ? 'check-sso' : 'login-required',
+    scope: "openid email profile get:time get:bs"
+  },
+  onReady(keycloak: Keycloak) {
+    initializeTokenInterceptor(keycloak)
+  },
+})