Draft: Add keycloak config

default.env

@@ -41,6 +41,13 @@ VITE_VERSION_STRING=
 ### Variables with VITE_ prefix will be available to the client
 ###
 
+# Auth environment variables for user oidc idp
+#VITE_AUTH_URL=
+#VITE_AUTH_CLIENT_ID=
+#VITE_AUTH_REDIRECT_URI=
+#VITE_AUTH_SILENT_REDIRECT_URI=
+#VITE_AUTH_POST_LOGOUT_URI=
+
 # SMART on FHIR client id configurations:
 # Ensure that your development client is registered with the proper redirect uris
 VITE_EPIC_CLIENT_ID=

package.json

@@ -34,6 +34,7 @@
 		"bootstrap": "^5.2.3",
 		"fhirclient": "^2.5.2",
 		"jose": "^4.11.4",
+		"oidc-client-ts": "^3.1.0",
 		"pako": "^2.1.0",
 		"qrcode": "^1.5.1",
 		"serve": "^14.2.0",

src/app.html

@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" />
     <link rel="preload" as="font" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/fonts/bootstrap-icons.woff2?8d200481aa7f02a2d63a331fc782cfaf" type="font/woff2" crossorigin="anonymous">
     <link rel="preload" as="image" href="/img/doh_logo_doh-black.png" />
-    <link rel="preload" as="image" href="/img/waverifypluslogo.png" />
+    <link rel="preload" as="image" href="/img/waverifypluslogo.svg" />
     <link rel="preload" as="image" href="/img/qr-banner-top.png" />
     <link rel="preload" as="image" href="/img/qr-banner-bottom.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />

src/env.d.ts

@@ -1,6 +1,11 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
+    readonly VITE_AUTH_URL: string
+    readonly VITE_AUTH_CLIENT_ID: string
+    readonly VITE_AUTH_REDIRECT_URI: string
+    readonly VITE_AUTH_SILENT_REDIRECT_URI: string
+    readonly VITE_AUTH_POST_LOGOUT_URI: string
     readonly VITE_EPIC_HIMSS_CLIENT_ID: string
     readonly VITE_ECW_HIMSS_CLIENT_ID: string
     readonly VITE_EPIC_CLIENT_ID: string

src/lib/components/app/Auth.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { onMount, setContext } from 'svelte';
+  import { AuthService } from '$lib/utils/AuthService';
+  import type { User } from 'oidc-client-ts';
+  import { goto } from '$app/navigation';
+
+  let authService: AuthService = AuthService.Instance;
+
+  let currentUser: User | undefined;
+
+  onMount(async () => {
+    let newUser: User | undefined;
+    try {
+      newUser = await authService.signinCallback();
+    } catch (error) {
+      console.warn("No authentication parameters found, checking for current user");
+    } finally {
+      currentUser = await authService.getUser() ?? undefined;
+      if (currentUser) {
+        let now = Date.now() / 1000;
+        if ((currentUser.expires_at ?? 0) < now) {
+          currentUser = await authService.renewToken() ?? undefined;
+        }
+      }
+      if (!currentUser) {
+        await authService.login();
+      } else {
+        if (newUser) {
+          let redirectUrl = authService.getRedirectUrl();
+          if (redirectUrl) {
+            goto(redirectUrl);
+          } else {
+            goto('/home');
+          }
+        }
+      }
+    }
+  });
+
+</script>
+{#if currentUser}
+  <slot />
+{:else}
+  Authorizing...
+{/if}

src/lib/components/app/HealthLinkOverview.svelte

@@ -3,6 +3,7 @@
     import {
         Button,
         Col,
+        Icon,
         Row,
         Styles
     } from 'sveltestrap';
@@ -22,7 +23,7 @@
 <Row>
     <Col md="1"></Col>
     <Col md="10">
-        <Button color="success" style="width:100%" href={'/create'}><span style="font-size: medium"><b>+</b></span> New IPS SHLink</Button>
+        <Button color="success" style="width:100%" href={'/create'}><b><Icon name="plus-lg"/></b> New IPS SHLink</Button>
     </Col>
     <Col md="1"></Col>
 </Row>

src/lib/components/layout/LanguageMenu.svelte

@@ -10,9 +10,10 @@
 </script>
 
 <Dropdown nav inNavbar class="navbar-dropdown" size="sm" direction="down">
-  <DropdownToggle color="primary" nav caret>
-    <Icon name="globe2" />
-    {$locales[$locale].lang}
+  <DropdownToggle color="primary" class="pt-0" nav>
+    <span style="font-size:small">
+      {$locales[$locale].lang} <Icon name="globe2" />
+    </span>
   </DropdownToggle>
   <DropdownMenu end style="height: 500px; overflow:auto">
     {#if $locales}

src/lib/config.ts

@@ -7,6 +7,12 @@ export const INTERMEDIATE_FHIR_SERVER_BASE = import.meta.env.VITE_INTERMEDIATE_F
 
 export const VERSION_STRING = import.meta.env.VITE_VERSION_STRING;
 
+export const AUTH_URL = import.meta.env.VITE_AUTH_URL;
+export const AUTH_CLIENT_ID = import.meta.env.VITE_AUTH_CLIENT_ID;
+export const AUTH_REDIRECT_URI = import.meta.env.VITE_AUTH_REDIRECT_URI;
+export const AUTH_SILENT_REDIRECT_URI = import.meta.env.VITE_AUTH_SILENT_REDIRECT_URI;
+export const AUTH_POST_LOGOUT_URI = import.meta.env.VITE_AUTH_POST_LOGOUT_URI;
+
 export const SOF_HOSTS = [
   // {
   //   id: "epic-himss",

src/lib/utils/AuthService.ts

@@ -0,0 +1,92 @@
+import {
+  AUTH_URL,
+  AUTH_CLIENT_ID,
+  AUTH_REDIRECT_URI,
+  AUTH_SILENT_REDIRECT_URI,
+  AUTH_POST_LOGOUT_URI
+} from '$lib/config';
+import { User, UserManager } from 'oidc-client-ts';
+
+export class AuthService {
+  private static _instance: AuthService;
+  userManager: UserManager;
+  redirect_url: string = "";
+
+  private constructor() {
+    const settings = {
+      authority: AUTH_URL,
+      client_id: AUTH_CLIENT_ID,
+      redirect_uri: AUTH_REDIRECT_URI,
+      silent_redirect_uri: AUTH_SILENT_REDIRECT_URI,
+      post_logout_redirect_uri: AUTH_POST_LOGOUT_URI,
+      scope: "openid online_access",
+    };
+    this.userManager = new UserManager(settings);
+  }
+
+  public static get Instance(): AuthService {
+    return this._instance || (this._instance = new this());
+  }
+
+  getUser(): Promise<User | null> {
+    return this.userManager.getUser();
+  }
+
+  getRedirectUrl(): string {
+    let url = this.redirect_url;
+    this.redirect_url = "";
+    return url;
+  }
+
+  signinCallback(): Promise<User | undefined> {
+    return this.userManager.signinCallback().then((user) => {
+      if (user) {
+        this.redirect_url = user.url_state ?? "";
+        this.storeUser(user);
+      }
+      return user;
+    });
+  }
+
+  storeUser(user: User): void {
+    this.userManager.storeUser(user);
+  }
+
+  login(): Promise<void> {
+    let currentUrl = window.location.href.split('?')[0];
+    return this.userManager.signinRedirect({ url_state: currentUrl });
+  }
+
+  renewToken(): Promise<User | null> {
+    return this.userManager.signinSilent().then((user) => {
+      if (user) {
+        this.storeUser(user);
+      }
+      return user;
+    }).catch((error) => {
+      console.error(error);
+      this.logout();
+      return null;
+    });
+  }
+
+  logout(): Promise<void> {
+    return this.userManager.signoutRedirect();
+  }
+
+  async isAuthenticated(): Promise<boolean> {
+    return this.getUser().then((user) => {
+      if (user?.access_token) {
+        return true;
+      } else {
+        return this.renewToken().then((user) => {
+          return user?.access_token ? true : false;
+        }).catch((error) => {
+          console.error(error);
+          this.logout();
+          return false;
+        });
+      }
+    });
+  }
+}