oidc-vue-test/README.md

# 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](philorg/oidc-fastapi-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:

```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
```

## 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 /oidc-test-web {
  reverse-proxy hostname.domainame:8874
}
redir /oidc-test-web /oidc-test-web/
```