Test app for OIDC, OAuth2 - web app version written with Vue3

Small web app for experimenting a web app with a Keycloak auth server.

It is a sibling of the server version oidc-test, which acts also as a resource server.

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:

{
  "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:

pnpm run build

Eventually specify a base url (eg. accessible from https://for.example.com/oidc-test-web):

pnpm run build --base oidc-test-web

Deployment

Examples of deployment are presented below.

• Using the nginx default container, from the development source tree:

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:

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:

[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:

systemctl --user daemon-reload
systemcrl --user start oidc-vue-test

Frontend

YMMV, easy with Caddy:

handle /oidc-test-web {
  reverse-proxy hostname.domainame:8874
}
redir /oidc-test-web /oidc-test-web/