CI: continue if pnpm publish fails (package version already exists)

.forgejo/workflows/build.yaml

@@ -0,0 +1,109 @@
+on:
+  push:
+  workflow_dispatch:
+    inputs:
+      build:
+        description: "Build package and container"
+        required: true
+        default: false
+        type: boolean
+
+jobs:
+  build:
+    runs-on: container
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Get the version from git
+        id: version
+        run: echo "version=$(git describe --dirty --tags)" >> $GITHUB_OUTPUT
+
+      - name: Check if the package should be built
+        id: builder
+        env:
+          RUN: ${{ toJSON(inputs.build || !contains(steps.version.outputs.version, '-')) }}
+        run: |
+          echo "run=$RUN" >> $GITHUB_OUTPUT
+          echo "Run build: $RUN"
+
+      - name: Info - version and if the image container should be built
+        env:
+          VERSION: ${{ steps.version.outputs.version }}
+          RUN: ${{ steps.builder.outputs.run }}
+          FORCE: ${{ toJSON(inputs.build) }}
+        run: |
+          echo "Version $VERSION, force (manual input): $FORCE, run the build: $RUN"
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          run_install: false
+          version: 10
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Update version.json from git describe
+        run: pnpm run version
+
+      - name: Set the version in package.json
+        env:
+          VERSION: ${{ steps.version.outputs.version }}
+        run: sed "s/0.0.0/${VERSION}/" -i package.json
+
+      - name: Build package (transpile ts => js)
+        run: pnpm run build --base /oidc-test-web
+
+      - name: Set registry token for pnpm"
+        env:
+          LOCAL_NPM_TOKEN: ${{ secrets.LOCAL_NPM_TOKEN }}
+        run: pnpm set "//code.philo.ydns.eu/api/packages/philorg/npm/:_authToken=${LOCAL_NPM_TOKEN}"
+
+      - name: Publish
+        if: fromJSON(steps.builder.outputs.run)
+        run: pnpm publish --no-git-checks
+        continue-on-error: true
+
+      - name: Build container
+        if: fromJSON(steps.builder.outputs.run)
+        uses: actions/buildah-build@v1
+        with:
+          image: oidc-vue-test
+          oci: true
+          labels: oidc-vue-test
+          tags: latest ${{ steps.version.outputs.version }}
+          containerfiles: |
+            ./Containerfile
+          build-args: |
+            APP_VERSION=${{ steps.version.outputs.version }}
+
+      - name: Workaround for bug of podman-login
+        if: fromJSON(steps.builder.outputs.run)
+        run: |
+          mkdir -p $HOME/.docker
+          echo "{ \"auths\": {} }" > $HOME/.docker/config.json
+
+      - name: Log in to container registry (with another workaround)
+        if: fromJSON(steps.builder.outputs.run)
+        uses: actions/podman-login@v1
+        with:
+          registry: ${{ vars.REGISTRY }}
+          username: ${{ secrets.REGISTRY_USER }}
+          password: ${{ secrets.REGISTRY_PASSWORD }}
+          auth_file_path: /tmp/auth.json
+
+      - name: Push the image to the registry
+        if: fromJSON(steps.builder.outputs.run)
+        uses: actions/push-to-registry@v2
+        with:
+          registry: "docker://${{ vars.REGISTRY }}/${{ vars.ORGANISATION }}"
+          image: oidc-vue-test
+          tags: latest ${{ steps.version.outputs.version }}

.gitignore

@@ -1,2 +1,4 @@
 node_modules/*
 dist/*
+settings.json
+.env

Containerfile

@@ -1,3 +1,5 @@
 FROM docker.io/nginx:alpine
 
-COPY ./dist /usr/share/nginx/html
+COPY ./dist /usr/share/nginx/html/oidc-test-web
+
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -1,20 +1,126 @@
-# Test app for OIDC, OAuth2 - pure web client version written with Vue3
+# Test app for OIDC, OAuth2 - web app version written with Vue3
 
 Small web app for experimenting a web app with a Keycloak auth server.
 
-## Deployment
+It is a sibling of the server version [oidc-test](philorg/oidc-fastapi-test),
+which acts also as a resource server.
 
-In a container:
+Live demo: <https://philo.ydns.eu/oidc-test-web>:
+
+- configured with a test realm on a private Keycloak instance
+- 2 users are defined: foo (foofoo) and bar (barbar).
+
+**Note**: decoding tokens requires the use of cryto extension,
+that web browsers allow only with a secured connection (https).
+
+## Configuration
+
+The app expects that a `settings.json` file is available on the server
+at the app's base url.
+
+For example:
+
+```json
+{
+  "keycloakUri": "https://keycloak.your.domain",
+  "realm": "test",
+  "authProvider": "keycloak",
+  "sso": false,
+  "clientId": "oidc-test-web",
+  "tokenSandbox": true,
+  "resourceServerUrl": "https://someserver.your.domain/resourceBaseUrl",
+  "resourceScopes": [
+    "get:time",
+    "get:bs"
+  ],
+  "resourceProviders": {
+    "resourceProvider1": {
+      "name": "Third party 1",
+      "baseUrl": "https://otherserver.your.domain/resources/",
+      "verifySSL": true,
+      "resources": {
+        "public": {
+          "name": "A public resource",
+          "url": "resource/public"
+        },
+        "bs": {
+          "name": "A secured resource, eg by scope",
+          "url": "resource/secured1"
+        },
+        "time": {
+          "name": "Another secured resource, eg by role",
+          "url": "resource/secured2"
+        }
+      }
+    }
+  }
+}
+```
+
+## Build
+
+For generating a `dist` directory ready to be copied to a web server
+static data tree, it's a straightforward:
+
+```sh
+pnpm run build
+```
+
+Eventually specify a `base url` (eg. accessible from `https://for.example.com/oidc-test-web`):
 
 ```sh
 pnpm run build --base oidc-test-web
-podman run -it --rm -p 8874:80 -v ./dist:/usr/share/nginx/html/oidc-test-web docker.io/nginx:alpine
+```
+
+## Deployment
+
+Examples of deployment are presented below.
+
+- Using the nginx default container, from the development source tree:
+
+```sh
+podman run -it --rm -p 8874:80 -v ./dist:/usr/share/nginx/html/oidc-test-web -v ./settings.json:/usr/share/nginx/html/oidc-test-web/settings.json docker.io/nginx:alpine
+```
+
+- The build is packaged in a provided container (see *pakcages*), serving with the `/oidc-test-web` base url:
+
+```sh
+podman run -it --rm -p 8874:80 -v ./settings.json:/usr/share/nginx/html/oidc-test-web/settings.json code.philo.ydns.eu/philorg/oidc-vue-test:latest
+```
+
+- A *quadlet* *systemd* service, in `~/.config/containers/systemd/oidc-vue-test.container`:
+
+```systemd
+[Container]
+ContainerName=oidc-vue-test
+Image=code.philo.ydns.eu/philorg/oidc-vue-test:latest
+Mount=type=bind,source=/path/to/settings.json,destination=/usr/share/nginx/html/oidc-test-web/settings.json
+PublishPort=8874:80
+
+[Service]
+Restart=always
+RestartSec=5
+
+[Unit]
+After=podman-user-wait-network-online.service
+
+[Install]
+WantedBy=default.target
+```
+
+Run with:
+
+```sh
+systemctl --user daemon-reload
+systemcrl --user start oidc-vue-test
 ```
 
 ## Frontend
 
+YMMV, easy with *Caddy*:
+
 ```Caddyfile
-handle /iodc-test-web {
+handle /oidc-test-web {
   reverse-proxy hostname.domainame:8874
 }
 redir /oidc-test-web /oidc-test-web/

example_settings.json

@@ -0,0 +1,13 @@
+{
+  "keycloakUri": "https://philo.ydns.eu/auth",
+  "realm": "test",
+  "authProvider": "keycloak",
+  "sso": false,
+  "clientId": "oidc-test-web",
+  "resourceServerUrl": "https://philo.ydns.eu/oidc-test/resource",
+  "resourceScopes": [
+    "get:time",
+    "get:bs"
+  ],
+  "tokenSandbox": true
+}

index.html

@@ -3,10 +3,11 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Axios interceptor example</title>
+    <title>OIDC test web</title>
+    <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="src/main.ts"></script>
   </body>
 </html>

package.json

@@ -1,18 +1,19 @@
 {
-  "name": "typescript",
+  "name": "oidc-test-web",
   "version": "0.0.0",
-  "private": true,
   "type": "module",
   "scripts": {
     "dev": "vite --port 3000",
     "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
     "build-only": "vite build",
-    "type-check": "vue-tsc --build"
+    "type-check": "vue-tsc --build",
+    "version": "echo \"{\\\"version\\\":\\\"$(git describe --tags --dirty --always)\\\"}\" > src/version.json"
   },
   "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"
   },
   "devDependencies": {
@@ -25,5 +26,8 @@
     "vite": "6.0.7",
     "vite-plugin-vue-devtools": "7.7.0",
     "vue-tsc": "2.2.0"
+  },
+  "publishConfig": {
+    "registry": "http://code.philo.ydns.eu/api/packages/philorg/npm/"
   }
 }

pnpm-lock.yaml

@@ -9,11 +9,14 @@ importers:
   .:
     dependencies:
       '@dsb-norge/vue-keycloak-js':
-        specifier: 3.0.0
-        version: 3.0.0(vue@3.5.13(typescript@5.6.3))
+        specifier: ^3.0.1
+        version: 3.0.1(vue@3.5.13(typescript@5.6.3))
       axios:
         specifier: 1.7.9
         version: 1.7.9
+      keycloak-js:
+        specifier: ^26.1.0
+        version: 26.1.0
       vue:
         specifier: 3.5.13
         version: 3.5.13(typescript@5.6.3)
@@ -191,8 +194,8 @@ packages:
     resolution: {integrity: sha512-L6mZmwFDK6Cjh1nRCLXpa6no13ZIioJDz7mdkzHv399pThrTa/k0nUlNaenOeh2kWu/iaOQYElEpKPUswUa9Vg==}
     engines: {node: '>=6.9.0'}
 
-  '@dsb-norge/vue-keycloak-js@3.0.0':
-    resolution: {integrity: sha512-PcANEYbCRWtvMLg9wPpGuBDR5wrvfC4nkOawGsF79zm6RQ6IfxGIpxWHoZSXEcRaYdPchkT4gCZ+dyp8wb7ccA==}
+  '@dsb-norge/vue-keycloak-js@3.0.1':
+    resolution: {integrity: sha512-uJ4deVw4Vyp2FrG0JjYAy8NE6zIlIIl/92mQDlSGH+9kc758hBdrCdZSD3aVzv/Lwh07tpOXsx4jXzbVQkPfkA==}
     peerDependencies:
       vue: '>=3.0.0'
 
@@ -803,6 +806,9 @@ packages:
   keycloak-js@26.0.7:
     resolution: {integrity: sha512-vKCk1ISMiouYRLjMzi5fKp58RnYxKEBS29BoDgVfYwVW94IXchj9jLqBvIet31VD1v79l3WaWT+WMX7fH8O4wA==}
 
+  keycloak-js@26.1.0:
+    resolution: {integrity: sha512-3CTelLNADK6sIxGHCQmKlT3ezcIp8O3Iimmg+ybS78RHy+HAUkkoBaW/YuHGdYkfEDMBlrqD3u+CQ4vLsrmyFA==}
+
   kolorist@1.8.0:
     resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
 
@@ -1298,7 +1304,7 @@ snapshots:
       '@babel/helper-string-parser': 7.25.9
       '@babel/helper-validator-identifier': 7.25.9
 
-  '@dsb-norge/vue-keycloak-js@3.0.0(vue@3.5.13(typescript@5.6.3))':
+  '@dsb-norge/vue-keycloak-js@3.0.1(vue@3.5.13(typescript@5.6.3))':
     dependencies:
       keycloak-js: 26.0.7
       vue: 3.5.13(typescript@5.6.3)
@@ -1825,6 +1831,8 @@ snapshots:
 
   keycloak-js@26.0.7: {}
 
+  keycloak-js@26.1.0: {}
+
   kolorist@1.8.0: {}
 
   lru-cache@5.1.1:

public/styles.css

@@ -0,0 +1,229 @@
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  background-color: floralwhite;
+  margin: 0;
+  font-family: system-ui;
+  text-align: center;
+}
+h1 {
+  background-color: #f786867d;
+  margin: 0 0 0.2em 0;
+  box-shadow: 0px 0.2em 0.2em #f786867d;
+  text-shadow: 0 0 2px #00000080;
+  font-weight: 200;
+}
+p {
+  margin: 0.2em;
+}
+hr {
+  margin: 0.2em;
+}
+.hidden {
+  display: none;
+}
+.center {
+  text-align: center;
+}
+.error {
+  color: darkred;
+}
+.content {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.user-info {
+  padding: 0.5em;
+  display: flex;
+  gap: 0.5em;
+  flex-direction: column;
+  width: fit-content;
+  align-items: center;
+  margin: 5px auto;
+  box-shadow: 0px 0px 10px lightgreen;
+  background-color: lightgreen;
+  border-radius: 8px;
+}
+.user-info * {
+  flex: 2 1 auto;
+  margin: 0;
+}
+.user-info .picture {
+  max-width: 3em;
+  max-height: 3em
+}
+.user-info a.logout {
+  border: 2px solid darkkhaki;
+  padding: 3px 6px;
+  text-decoration: none;
+  color: black;
+}
+.user-info a.logout:hover {
+  background-color: orange;
+}
+.debug-auth {
+  font-size: 90%;
+  background-color: #d8bebc75;
+  padding: 6px;
+}
+.debug-auth * {
+  margin: 0;
+}
+.debug-auth p {
+  border-bottom: 1px solid black;
+}
+.debug-auth ul {
+  padding: 0;
+  list-style: none;
+}
+.debug-auth p, .debug-auth .key {
+  font-weight: bold;
+}
+.content {
+  text-align: left;
+}
+.hasResponseStatus {
+  background-color: #88888840;
+}
+.hasResponseStatus.status-200 {
+  background-color: #00ff0040;
+}
+.hasResponseStatus.status-401 {
+  background-color: #ff000040;
+}
+.hasResponseStatus.status-403 {
+  background-color: #ff990040;
+}
+.hasResponseStatus.status-404 {
+  background-color: #ffCC0040;
+}
+.hasResponseStatus.status-503 {
+  background-color: #ffA88050;
+}
+
+.role, .scope {
+  padding: 3px 6px;
+  margin: 3px;
+  border-radius: 6px;
+}
+
+.role {
+  background-color: #44228840;
+}
+
+.scope {
+  background-color: #8888FF80;
+}
+
+
+/* For home */
+
+.login-box {
+  background-color: antiquewhite;
+  margin: 0.5em auto;
+  width: fit-content;
+  box-shadow: 0 0 10px #49759b88;
+  border-radius: 8px;
+}
+.login-box .description {
+  font-style: italic;
+  font-weight: bold;
+  background-color: #f7c7867d;
+  padding: 6px;
+  margin: 0;
+  border-radius: 8px 8px 0 0;
+}
+.providers {
+  justify-content: center;
+  padding: 0.8em;
+}
+.providers .provider {
+  min-height: 2em;
+}
+.providers .provider a.link {
+  text-decoration: none;
+  max-height: 2em;
+}
+.providers .provider .link div {
+  background-color: #f7c7867d;
+  border-radius: 8px;
+  padding: 6px;
+  text-align: center;
+  color: black;
+  font-weight: bold;
+  cursor: pointer;
+}
+.providers .provider .hint {
+  font-size: 80%;
+  max-width: 13em;
+}
+.providers .error {
+  padding: 3px 6px;
+  font-weight: bold;
+  flex: 1 1 auto;
+}
+.content .links-to-check {
+  display: flex;
+  justify-content: center;
+  gap: 0.5em;
+  flex-flow: wrap;
+}
+.content .links-to-check button {
+  color: black;
+  padding: 5px 10px;
+  text-decoration: none;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+}
+.content .links-to-check span {
+  margin: auto;
+}
+
+.token {
+  overflow-wrap: anywhere;
+  font-family: monospace;
+}
+
+.resource {
+  padding: 0.5em;
+  display: flex;
+  gap: 0.5em;
+  flex-direction: column;
+  width: fit-content;
+  align-items: center;
+  margin: 5px auto;
+  box-shadow: 0px 0px 10px #90c3eeA0;
+  background-color: #90c3eeA0;
+  border-radius: 8px;
+}
+
+.resources {
+  display: flex;
+}
+
+.resource {
+  text-align: center;
+}
+
+.token-info {
+  margin: 0 1em;
+}
+
+.key {
+  font-weight: bold;
+}
+
+.token .key, .token .value {
+  display: inline;
+}
+.token .value {
+  padding-left: 1em;
+}
+
+.msg {
+  text-align: center;
+  font-weight: bold;
+}

src/App.vue

@@ -1,40 +1,100 @@
 <script setup lang="ts">
-import { HTTP } from '@/main'
-import type { AxiosResponseHeaders } from 'axios'
 import { ref } from 'vue'
+import { type AxiosInstance } from 'axios'
 import { useKeycloak } from '@dsb-norge/vue-keycloak-js'
 
+import { resourceServer, settings, axiosResourceProviders, type Resource, type Resources } from '@/main'
+import ResourceButton from './ResourceButton.vue'
+import UserInfo from './UserInfo.vue'
+import TokenView from './TokenView.vue'
+import ResourceResponse from './ResourceResponse.vue'
+
 const keycloak = useKeycloak()
-const requestHeaders = ref<AxiosResponseHeaders | Partial<unknown> | undefined>()
+let resourceResponse = ref({})
+let resources = ref<Resources>({})
+let msg = ref<string>("")
 
 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
+function logout() {
+  keycloak.logoutFn && keycloak.logoutFn()
+}
+
+function accountManagement() {
+  keycloak.accountManagement && keycloak.accountManagement()
+}
+
+async function getResources() {
+  await resourceServer.get("").then(
+    resp => {
+      resources.value = resp.data["plugins"]
+    }
+  )
+}
+getResources()
+
+async function getResource(evt: MouseEvent, resourceName: string, resource: Resource, resourceProviderId?: string) {
+  const url = resource.default_resource_id ? `${resourceName}/${resource.default_resource_id}` : resourceName 
+  const axiosClient: AxiosInstance = resourceProviderId ? axiosResourceProviders[resourceProviderId] : resourceServer
+  await axiosClient.get(url).then(
+    resp => {
+      resourceResponse.value = resp['data']
+      msg.value = ""
+    }
+  ).catch(
+    err => {
+      resourceResponse.value = []
+      if (err.response) {
+        msg.value = `${err.message} (${err.response.statusText}): ${err.response.data["detail"]}`
+      } else {
+        msg.value = `${err.message} (cannot reach the resource server)`
+      }
+    }
+  )
 }
 </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 id="app">
+    <h1>OIDC-test - web client</h1>
+    <p>
+      Test the authentication and authorization, with OpenID Connect and OAuth2 with a Keycloak provider.
+    </p>
+    <UserInfo></UserInfo>
+    <hr>
+    <div class="content">
+      <p>These resources are available at this authentication provider:</p>
+      <div class="links-to-check">
+        <ResourceButton v-for="(resource, name) in resources"
+                :resourceName="name.toString()"
+                :resourceId="resource.default_resource_id"
+                :innerText="resource.name"
+                @getResource="getResource($event, name.toString(), resource)"
+                >
+        </ResourceButton>
+      </div>
+        <p>These resoures are available from third party resource providers:</p>
+          <div v-for="(resourceProvider, resourceProviderId) in settings.resourceProviders">
+            <div class="links-to-check">
+              <span :innerText="`${resourceProvider.name}: `"></span>
+              <ResourceButton v-for="(resource, name) in resourceProvider.resources"
+                              :resourceName="name.toString()"
+                              :resourceId="resource.default_resource_id"
+                              :innerText="resource.name"
+                              :resourceProviderId="resourceProviderId"
+                              @getResource="getResource($event, name.toString(), resource, resourceProviderId.toString())"
+                              >
+              </ResourceButton>
+            </div>
+          </div>
+      <ResourceResponse :resourceResponse="resourceResponse" :err="msg"></ResourceResponse>
+    </div>
+    <div v-if="settings.tokenSandbox" class="token-info">
+      <hr>
+      <TokenView></TokenView>
     </div>
   </div>
 </template>
-
-<style scoped>
-textarea {
-  width: 100%;
-  height: 30vh;
-}
-</style>

src/ResourceButton.vue

@@ -0,0 +1,50 @@
+<script setup lang='ts'>
+import { ref, type PropType, type ComponentObjectPropsOptions } from 'vue'
+import { type AxiosInstance } from 'axios'
+
+import { resourceServer, axiosResourceProviders } from '@/main'
+
+interface Props {
+  resourceName: string,
+  resourceProviderId?: string | number,
+  resourceId?: string | null,
+}
+
+const props = defineProps<Props>()
+
+/*
+const props = defineProps<ComponentObjectPropsOptions<Props>>({
+  resourceName: {
+    type: String,
+    required: true
+  },
+  resourceId: { type: String},
+})
+*/
+let _class = ref<string>("")
+let _title = ref<string>("")
+
+const init = async (props: any) => {
+  // Get code at component boot time
+  const axiosResourceProvider: AxiosInstance = props.resourceProviderId ? axiosResourceProviders[props.resourceProviderId] : resourceServer
+  const url = props.resourceId ? `${props.resourceName}/${props.resourceId}` : props.resourceName 
+  await axiosResourceProvider.get(url).then(
+    resp => {
+      _class.value = `hasResponseStatus status-${resp.status}`
+      _title.value = `Response code: ${resp.status} - ${resp.statusText}`
+    }
+  ).catch(
+    err => {
+      _class.value = `hasResponseStatus status-${err.response.status}`
+      _title.value = `Response code: ${err.response.status} - ${err.response.statusText}`
+    }
+  )
+}
+
+init(props);
+
+</script>
+
+<template>
+  <button :class="_class" :title="_title" @click="$emit('getResource', $event)"></button>
+</template>

src/ResourceResponse.vue

@@ -0,0 +1,23 @@
+<script setup lang='ts'>
+import { ref, type ComponentObjectPropsOptions } from 'vue'
+
+interface Props {
+  resourceResponse: {}
+  err: string
+}
+
+const props = defineProps<Props>()
+
+</script>
+
+<template>
+  <div class="resources">
+    <div v-if="Object.entries(resourceResponse).length > 0" class="resource">
+      <div v-for="(value, key) in resourceResponse">
+        <div class="key" :innerText="key"></div>
+        <div class="value" :innerText="value"></div>
+      </div>
+    </div>
+  </div>
+  <div v-if="err" class="msg resource error" :innerText="err"></div>
+</template>

src/TokenView.vue

@@ -0,0 +1,30 @@
+<script setup lang='ts'>
+import { ref } from 'vue'
+import { useKeycloak } from '@dsb-norge/vue-keycloak-js'
+
+const keycloak = useKeycloak()
+</script>
+
+<template>
+    <h2>id token</h2>
+    <div class="token">
+      <div v-for="(value, key) in keycloak.idTokenParsed">
+        <div class="key" :innerText="key"></div>
+        <div class="value" :innerText="value"></div>
+      </div>
+    </div>
+    <h2>access token</h2>
+    <div class="token">
+      <div v-for="(value, key) in keycloak.tokenParsed">
+        <div class="key" :innerText="key"></div>
+        <div class="value" :innerText="value"></div>
+      </div>
+    </div>
+    <h2>refresh token</h2>
+    <div class="token">
+      <div v-for="(value, key) in keycloak.refreshTokenParsed">
+        <div class="key" :innerText="key"></div>
+        <div class="value" :innerText="value"></div>
+      </div>
+    </div>
+</template>

src/UserInfo.vue

@@ -0,0 +1,45 @@
+<script setup lang='ts'>
+import { ref, type ComponentObjectPropsOptions } from 'vue'
+import { useKeycloak } from '@dsb-norge/vue-keycloak-js'
+
+const keycloak = useKeycloak()
+
+function manuallyRefreshAccessToken() {
+  // We set a high minValidity to force a token refresh
+  keycloak.keycloak && keycloak.keycloak.updateToken(5000)
+}
+
+function logout() {
+  keycloak.logoutFn && keycloak.logoutFn()
+}
+
+function accountManagement() {
+  keycloak.accountManagement && keycloak.accountManagement()
+}
+
+</script>
+
+<template>
+  <div v-if="keycloak.authenticated" class="user-info">
+    <p>Hey, <span :innerText="keycloak.idTokenParsed?.name"></span></p>
+    <img v-if="keycloak.idTokenParsed?.picture" :src="keycloak.idTokenParsed.picture" class="picture"></img>
+    <div :innerText="keycloak.idTokenParsed?.email"></div>
+    <div v-if="keycloak.resourceAccess && keycloak.resourceAccess['oidc-test']">
+      <span>Roles for oidc-test:</span>
+      <span v-for="role in keycloak.resourceAccess && keycloak.resourceAccess['oidc-test']['roles']"
+            class="role" :innerText="role">
+      </span>
+    </div>
+    <div v-if="keycloak.idTokenParsed?.oidc_provider">
+      <span>Provider:</span>
+      <span :innerText="keycloak.idTokenParsed.oidc_provider"></span>
+    </div>
+    <div v-if="keycloak.tokenParsed?.scope">
+      <span>Scopes</span>:
+      <span v-for="scope in keycloak.tokenParsed.scope.split(' ')" class="scope" :innerText="scope"></span>
+    </div>
+    <button @click="accountManagement">Account management</button>
+    <button @click="manuallyRefreshAccessToken">Refresh access token</button>
+    <button @click="logout" class="logout">Logout</button>
+  </div>
+</template>

src/main.ts

@@ -1,37 +1,120 @@
 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'
+import VueKeycloakJs from '@dsb-norge/vue-keycloak-js'
+import axios, { Axios, type AxiosInstance } from 'axios'
+import App from '@/App.vue'
 
-export const HTTP = axios.create({
+export interface Resource {
+  name: string
+  default_resource_id: string
+  role_required: string
+  scope_required: string
+}
+
+export interface Resources {
+  [name: string]: Resource
+}
+
+interface ResourceProvider {
+  id: string
+  name: string
+  baseUrl: string
+  verifySSL: boolean
+  resources: Resources
+}
+
+export interface ResourceProviders {
+  [name: string]: ResourceProvider
+}
+
+interface Settings {
+  keycloakUri: string
+  realm: string
+  clientId: string
+  sso: boolean
+  resourceServerUrl: string
+  resourceScopes: string[]
+  authProvider: string
+  tokenSandbox: boolean
+  resourceProviders: ResourceProviders
+}
+
+interface AxiosResourceProviders {
+  [name: string]: AxiosInstance
+}
+
+export let settings: Settings
+export let authServer: AxiosInstance
+export let resourceServer: AxiosInstance
+export let axiosResourceProviders: AxiosResourceProviders = {}
+
+// The settings.json file is expected at the server's base url
+axios.get("settings.json").then().then(
+  resp => {
+    settings = resp.data
+    resourceServer = axios.create({
+      baseURL: settings.resourceServerUrl,
+      timeout: 10000
+    })
+    authServer = 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}`
+      timeout: 10000
+    })
+    app.use(VueKeycloakJs, {
+      config: {
+        url: settings.keycloakUri,
+        realm: settings.realm,
+        clientId: settings.clientId
+      },
+      init: {
+        onLoad: settings.sso ? "check-sso" : "login-required",
+        scope: "openid email profile " + settings.resourceScopes.join(" ")
+      },
+      onReady(keycloak: Keycloak) {
+        initializeTokenInterceptor(keycloak)
+        app.mount("#app")
+      },
+    })
   }
-    return config
+)
+
+function initializeTokenInterceptor(keycloak: Keycloak) {
+  Object.entries(settings.resourceProviders).forEach(
+    ([id, resourceProvider]) => {
+      const rp = axios.create({
+        baseURL: resourceProvider.baseUrl,
+        timeout: 10000
+      })
+      rp.interceptors.request.use(axiosSettings => {
+        if (keycloak.authenticated) {
+          axiosSettings.headers.Authorization = `Bearer ${keycloak.token}`
+          axiosSettings.headers.auth_provider = settings.authProvider
+        }
+        return axiosSettings
+      }, error => {
+        return Promise.reject(error)
+      })
+      axiosResourceProviders[id] = rp
+    }
+  )
+  authServer.interceptors.request.use(axiosSettings => {
+    if (keycloak.authenticated) {
+      axiosSettings.headers.Authorization = `Bearer ${keycloak.token}`
+      axiosSettings.headers.auth_provider = settings.authProvider
+    }
+    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.authProvider
+    }
+    return axiosSettings
   }, 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')
+const app = createApp(App)

tsconfig.app.json

@@ -1,12 +1,20 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
-  "exclude": ["src/**/__tests__/*"],
+  "include": [
+    "env.d.ts",
+    "src/**/*",
+    "src/**/*.vue",
+    "config.ts"
+  ],
+  "exclude": [
+    "src/**/__tests__/*"
+  ],
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   }
 }

tsconfig.node.json

@@ -0,0 +1,20 @@
+{
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": [
+      "node",
+      "vite/client"
+    ]
+  }
+}

vite.config.ts

@@ -1,29 +1,44 @@
+//
+// Webcrypto is required for docoding the tokens, and thus https is compulsary.
+//
+// Read an environment file (.env) at the project's root,
+// with 2 variables VITE_SSL_KEY and VITE_SSL_CERT defining the location
+// of the ssl key and cert
+//
+
 import { fileURLToPath, URL } from 'node:url'
-import { defineConfig } from 'vite'
+import { defineConfig, UserConfig, loadEnv } from 'vite'
 
 import fs from 'fs';
 import path from 'path';
 
 import vue from '@vitejs/plugin-vue'
-import vueDevTools from 'vite-plugin-vue-devtools'
+//import vueDevTools from 'vite-plugin-vue-devtools'
 
-// https://vite.dev/config/
-export default defineConfig({
+// Read the env file
+const env = loadEnv("dev", ".")
+
+let baseSettings: UserConfig = {
   plugins: [
     vue(),
-    vueDevTools(),
+    //vueDevTools(),
   ],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
     },
   },
-  server: {
+}
+
+if (env.VITE_SSL_CERT && env.VITE_SSL_KEY) {
+  baseSettings['server'] = {
+    hmr: false,
     https: {
-      // key: fs.readFileSync(path.resolve(__dirname, 'localhost-key.pem')),
-      // cert: fs.readFileSync(path.resolve(__dirname, 'localhost.pem')),
-      key: fs.readFileSync(path.resolve("/home/phil", 'tiptop+4-key.pem')),
-      cert: fs.readFileSync(path.resolve("/home/phil", 'tiptop+4.pem')),
-    },
+      key: fs.readFileSync(path.resolve(env.VITE_SSL_KEY)),
+      cert: fs.readFileSync(path.resolve(env.VITE_SSL_CERT))
     }
-})
+  }
+}
+
+// https://vite.dev/config/
+export default defineConfig(baseSettings)