WIP allow connecting to docker compose

Author: dmihalcik-virtru

.github/workflows/roundtrip/wait-and-test.sh

@@ -9,6 +9,16 @@ WEB_APP_DIR="$(cd "${ROOT_DIR}/web-app" >/dev/null && pwd)"
 app_version=$(cd "${ROOT_DIR}/lib" && node -p "require('./package.json').version")
 echo "[INFO] App version: ${app_version}"
 
+if [ $1 = backend ]; then
+  VITE_PROXY='{"/api":"http://localhost:5432","/auth":"http://localhost:5432"}'
+  VITE_TDF_CFG='{oidc:{host:"http://localhost:65432/auth/realms/tdf",clientId:"browsertest"},kas:"http://localhost:65432/api/kas",reader:"https://secure.virtru.com/start?htmlProtocol=1"}'
+else
+  VITE_PROXY='{"/kas":"http://localhost:8080","/auth":"http://localhost:8888"}'
+  VITE_TDF_CFG='{oidc:{host:"http://localhost:65432/auth/realms/opentdf",clientId:"browsertest"},kas:"http://localhost:65432/kas",reader:"https://secure.virtru.com/start?htmlProtocol=1"}'
+fi
+export VITE_PROXY
+export VITE_TDF_CFG
+
 _wait-for() {
   echo "[INFO] In retry loop for quickstarted opentdf backend..."
   limit=5

web-app/src/App.tsx

@@ -4,6 +4,7 @@ import { showSaveFilePicker } from 'native-file-system-adapter';
 import './App.css';
 import { TDF3Client, type DecryptSource, NanoTDFClient } from '@opentdf/client';
 import { type SessionInformation, OidcClient } from './session.js';
+import { c } from './config.js';
 
 function decryptedFileName(encryptedFileName: string): string {
   // Groups: 1 file 'name' bit
@@ -30,8 +31,8 @@ function decryptedFileExtension(encryptedFileName: string): string {
 }
 
 const oidcClient = new OidcClient(
-  'http://localhost:65432/auth/realms/opentdf',
-  'browsertest',
+  c.oidc.host,
+  c.oidc.clientId,
   'otdf-sample-web-app'
 );
 
@@ -316,8 +317,6 @@ function App() {
       }),
     };
   };
-  // http://localhost:65432/auth/realms/opentdf/protocol/openid-connect/token
-  // http://localhost:65432/auth/realms/opentdf/protocol/openid-connect/token
 
   const handleEncrypt = async () => {
     if (!inputSource) {
@@ -340,7 +339,7 @@ function App() {
           'file' in inputSource
             ? await inputSource.file.arrayBuffer()
             : randomArrayBuffer(inputSource);
-        const nanoClient = new NanoTDFClient(oidcClient, 'http://localhost:65432/kas');
+        const nanoClient = new NanoTDFClient(oidcClient, c.kas);
         setDownloadState('Encrypting...');
         switch (sinkType) {
           case 'file':
@@ -373,8 +372,8 @@ function App() {
         const client = new TDF3Client({
           authProvider: oidcClient,
           dpopKeys: oidcClient.getSigningKey(),
-          kasEndpoint: 'http://localhost:65432/kas',
-          readerUrl: 'https://secure.virtru.com/start?htmlProtocol=1',
+          kasEndpoint: c.kas,
+          readerUrl: c.reader,
         });
         let source: ReadableStream<Uint8Array>, size: number;
         const sc = new AbortController();
@@ -442,7 +441,7 @@ function App() {
         const client = new TDF3Client({
           authProvider: oidcClient,
           dpopKeys: oidcClient.getSigningKey(),
-          kasEndpoint: 'http://localhost:65432/kas',
+          kasEndpoint: c.kas,
         });
         const sc = new AbortController();
         setStreamController(sc);
@@ -528,7 +527,7 @@ function App() {
         const client = new TDF3Client({
           authProvider: oidcClient,
           dpopKeys: oidcClient.getSigningKey(),
-          kasEndpoint: 'http://localhost:65432/kas',
+          kasEndpoint: c.kas,
         });
         try {
           const sc = new AbortController();
@@ -580,7 +579,7 @@ function App() {
         if ('url' in inputSource) {
           throw new Error('Unsupported : fetch the url I guess?');
         }
-        const nanoClient = new NanoTDFClient(oidcClient, 'http://localhost:65432/kas');
+        const nanoClient = new NanoTDFClient(oidcClient, c.kas);
         try {
           const cipherText =
             'file' in inputSource

web-app/src/config.ts

@@ -0,0 +1,27 @@
+export type TDFConfig = {
+  oidc: {
+    // eg 'http://localhost:65432/auth/realms/opentdf'
+    host: string;
+    // eg browsertest
+    clientId: string;
+  };
+  kas: string;
+  reader: string;
+};
+
+function cfg(): TDFConfig {
+  const { VITE_TDF_CFG } = import.meta.env;
+  if (!VITE_TDF_CFG) {
+    return {
+      oidc: {
+        host: 'http://localhost:65432/auth/realms/opentdf',
+        clientId: 'browsertest',
+      },
+      kas: 'http://localhost:65432/kas',
+      reader: 'https://secure.virtru.com/start?htmlProtocol=1',
+    };
+  }
+  return JSON.parse(VITE_TDF_CFG);
+}
+
+export const c = cfg();

web-app/vite-backend.config.ts

@@ -0,0 +1,32 @@
+import { createRequire } from 'node:module'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+const require = createRequire(import.meta.url)
+
+function proxy(): Record<string, string> {
+  const { VITE_PROXY } = process.env;
+  if (VITE_PROXY) {
+    return JSON.parse(VITE_PROXY);
+  }
+  return {
+    '/kas': 'http://localhost:8080',
+    '/auth': 'http://localhost:8888',
+  };
+}
+
+
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      shimMissingExports: true
+    }
+  },
+  plugins: [react()],
+  server: {
+    port: 65432,
+    proxy: proxy(),
+  },
+});