Initial commit

src/App.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { HTTP } from '@/main'
+import type { AxiosResponseHeaders } from 'axios'
+import { ref } from 'vue'
+import { useKeycloak } from '@dsb-norge/vue-keycloak-js'
+
+const keycloak = useKeycloak()
+const requestHeaders = ref<AxiosResponseHeaders | Partial<unknown> | undefined>()
+
+function manuallyRefreshAccessToken() {
+  // We set a high minValidity to force a token refresh
+  keycloak.keycloak && keycloak.keycloak.updateToken(5000)
+}
+
+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')
+  requestHeaders.value = response.config.headers
+}
+</script>
+
+<template>
+  <h1>OIDC pure web client test</h1>
+  <div>
+    <div>Hey {{ keycloak?.fullName }}</div>
+    <button @click="doAuthenticatedRequest">Trigger request</button>
+    <button @click="manuallyRefreshAccessToken">Refresh access token</button>
+    <div>
+    <textarea :value="requestHeaders?.toString()" readonly></textarea>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+textarea {
+  width: 100%;
+  height: 30vh;
+}
+</style>

src/main.ts

@@ -0,0 +1,37 @@
+import { createApp } from 'vue'
+import Keycloak from "keycloak-js"
+import VueKeycloakJs, { useKeycloak } from '@dsb-norge/vue-keycloak-js'
+import axios from 'axios'
+import App from './App.vue'
+
+export const HTTP = axios.create({
+  baseURL: '/',
+  timeout: 10_000
+})
+
+function initializeTokenInterceptor() {
+  HTTP.interceptors.request.use(config => {
+    const keycloak = useKeycloak()
+    if (keycloak.authenticated) {
+      config.headers.Authorization = `Bearer ${keycloak.token}`
+    }
+    return config
+  }, error => {
+    return Promise.reject(error)
+  })
+}
+
+createApp(App)
+  .use(VueKeycloakJs, {
+    config: {
+      url: 'https://philo.ydns.eu/auth/',
+      realm: 'test',
+      clientId: 'oidc-test-web',
+    },
+    onReady(kk: Keycloak, vkk) {
+      //console.log(kk, vkk)
+      console.log(kk.idTokenParsed)
+      initializeTokenInterceptor()
+    },
+  })
+  .mount('#app')