Add a new keycloak-config attribute which will override all keycloak defaults.

We need to override everything on the prod server, and having everything in one object
makes it clear what is keycloak specific (we could also prefix everything...).

packages/auth/README.md

@@ -5,23 +5,23 @@
 ## Usage
 
 ```html
-<vpu-auth client-id="my-client-id"></vpu-auth>
+<vpu-auth></vpu-auth>
 ```
 
 ## Attributes
 
-- `client-id` (mandatory): set the client id that you have setup on your Keycloak server
-    - example `<vpu-auth client-id="my-client-id"></vpu-auth>`
 - `lang` (optional, default: `de`): set to `de` or `en` for German or English
-    - example `<vpu-auth lang="de" client-id="my-client-id"></vpu-auth>`
+    - example `<vpu-auth lang="de" </vpu-auth>`
 - `load-person` (optional, default: off): if enabled the logged in user will also be loaded as `Person`
    in the `window.VPUPerson` variable
-    - example `<vpu-auth client-id="my-client-id" load-person></vpu-auth>`
+    - example `<vpu-auth load-person></vpu-auth>`
 - `force-login` (optional, default: off): if enabled a login will be forced, there never will be a login button
-    - example `<vpu-auth client-id="my-client-id" force-login></vpu-auth>`
+    - example `<vpu-auth force-login></vpu-auth>`
 - `try-login` (optional, default: off): if enabled the a login will happen if the user is already logged in
   and finishing the login process would not result in a page location change (reload/redirect).
-    - example `<vpu-auth client-id="my-client-id" try-login></vpu-auth>`
+    - example `<vpu-auth try-login></vpu-auth>`
+- `keycloak-config`: An object which can contain the following keys: url, realm, clientId, silentCheckSsoRedirectUri
+    - example `<vpu-auth  keycloak-config='{"url": "https://auth.tugraz.at/auth", "realm": "tugraz", "clientId": "some-id", "silentCheckSsoRedirectUri": ""}'></vpu-auth>`
 
 ## Events to listen to
 

packages/auth/src/vpu-auth-demo.js

@@ -50,7 +50,7 @@ class AuthDemo extends LitElement {
                     <h1 class="title">Auth-Demo</h1>
                 </div>
                 <div class="container">
-                    <vpu-auth lang="${this.lang}" client-id="${commonUtils.setting('keyCloakClientId')}" silent-check-sso-uri="${silentCheckSsoUri}" load-person try-login></vpu-auth>
+                    <vpu-auth lang="${this.lang}" keycloak-config='{"silentCheckSsoRedirectUri": "${silentCheckSsoUri}"}' load-person try-login></vpu-auth>
                 </div>
             </section>
         `;

packages/auth/src/vpu-auth.js

@@ -37,7 +37,6 @@ class VPUAuth extends VPULitElement {
         this.forceLogin = false;
         this.loadPerson = false;
         this.showProfile = false;
-        this.clientId = "";
         this.token = "";
         this.subject = "";
         this.name = "";
@@ -45,6 +44,7 @@ class VPUAuth extends VPULitElement {
         this.tryLogin = false;
         this.person = null;
         this.entryPointUrl = commonUtils.getAPiUrl();
+        this.keycloakConfig = null;
 
         const _getLoginData = () => {
             const message = {
@@ -159,10 +159,9 @@ class VPUAuth extends VPULitElement {
             forceLogin: { type: Boolean, attribute: 'force-login' },
             tryLogin: { type: Boolean, attribute: 'try-login' },
             loadPerson: { type: Boolean, attribute: 'load-person' },
-            clientId: { type: String, attribute: 'client-id' },
-            silentCheckSsoUri: { type: String, attribute: 'silent-check-sso-uri' },
             showProfile: { type: Boolean, attribute: 'show-profile' },
             entryPointUrl: { type: String, attribute: 'entry-point-url' },
+            keycloakConfig: { type: Object, attribute: 'keycloak-config' },
             name: { type: String, attribute: false },
             token: { type: String, attribute: false },
             subject: { type: String, attribute: false },
@@ -175,9 +174,22 @@ class VPUAuth extends VPULitElement {
     connectedCallback() {
         super.connectedCallback();
 
-        const baseURL = commonUtils.setting('keyCloakBaseURL');
-        const realm = commonUtils.setting('keyCloakRealm');
-        this._kcwrapper = new KeycloakWrapper(baseURL, realm, this.clientId, this.silentCheckSsoUri);
+        // Keycloak config
+        let baseURL = commonUtils.setting('keyCloakBaseURL');
+        let realm = commonUtils.setting('keyCloakRealm');
+        let clientId = commonUtils.setting('keyCloakClientId');
+        let silentCheckSsoRedirectUri = '';
+        if (this.keycloakConfig !== null) {
+            baseURL = this.keycloakConfig.url || baseURL;
+            realm = this.keycloakConfig.realm || realm;
+            clientId = this.keycloakConfig.clientId || clientId;
+            silentCheckSsoRedirectUri = this.keycloakConfig.silentCheckSsoRedirectUri || silentCheckSsoRedirectUri;
+        }
+        if (!baseURL || !realm || !clientId) {
+            throw Error("Keycloak config not set");
+        }
+
+        this._kcwrapper = new KeycloakWrapper(baseURL, realm, clientId, silentCheckSsoRedirectUri);
         this._kcwrapper.addEventListener('changed', this._onKCChanged);
 
         const handleLogin = async () => {