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>