fix: update AuthGate to use environment variable for Coder URL (#51)

* fix: update AuthGate to use environment variable for Coder URL

- Modified AuthGate component to retrieve Coder URL from environment variable instead of hardcoding.
- Added new CODER_URL definition in env.d.ts for better configuration management.

* refactor: enhance Vite configuration to load environment variables

- Updated vite.config.mts to load environment variables based on the current mode, allowing for better configuration management.
- Made CODER_URL available through import.meta.env for improved flexibility in accessing environment-specific settings.

* fix: update AuthGate to use corrected environment variable for Coder URL

- Changed the environment variable reference in AuthGate from VITE_CODER_URL to CODER_URL for consistency with the updated configuration management.

Author: atyrode

src/frontend/src/AuthGate.tsx

@@ -21,7 +21,9 @@ export default function AuthGate({ children }: { children: React.ReactNode }) {
     if (isAuthenticated === true && !coderAuthDone) {
       const iframe = document.createElement("iframe");
       iframe.style.display = "none";
-      iframe.src = "https://coder.pad.ws/api/v2/users/oidc/callback";
+      const coderUrl = import.meta.env.CODER_URL;
+      iframe.src = `${coderUrl}/api/v2/users/oidc/callback`;
+      console.debug(`[pad.ws] (Silently) Priming Coder OIDC session for ${coderUrl}`);
 
       // Remove iframe as soon as it loads, or after 2s fallback
       const cleanup = () => {

src/frontend/src/env.d.ts

@@ -3,6 +3,7 @@
 interface ImportMetaEnv {
     readonly VITE_PUBLIC_POSTHOG_KEY: string
     readonly VITE_PUBLIC_POSTHOG_HOST: string
+    readonly CODER_URL: string
 }
 
 interface ImportMeta {

src/frontend/vite.config.mts

@@ -1,26 +1,36 @@
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  server: {
-    port: 3003,
-    open: false, // open the browser where app is started
-    proxy: {
-      // Proxy PostHog requests to avoid CORS issues
-      '/posthog': {
-        target: 'https://eu.i.posthog.com',
-        changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/posthog/, ''),
+export default defineConfig(({ mode }) => {
+  // Load env file based on `mode` in the current working directory.
+  // Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
+  const env = loadEnv(mode, process.cwd(), '');
+  
+  return {
+    server: {
+      port: 3003,
+      open: false, // open the browser where app is started
+      proxy: {
+        // Proxy PostHog requests to avoid CORS issues
+        '/posthog': {
+          target: 'https://eu.i.posthog.com',
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/posthog/, ''),
+        },
       },
     },
-  },
-  publicDir: "public",
-  optimizeDeps: {
-    esbuildOptions: {
-      // Bumping to 2022 due to "Arbitrary module namespace identifier names" not being
-      // supported in Vite's default browser target https://github.com/vitejs/vite/issues/13556
-      target: "es2022",
-      treeShaking: true,
+    define: {
+      // Make non-prefixed CODER_URL available to import.meta.env
+      'import.meta.env.CODER_URL': JSON.stringify(env.CODER_URL),
     },
-  },
+    publicDir: "public",
+    optimizeDeps: {
+      esbuildOptions: {
+        // Bumping to 2022 due to "Arbitrary module namespace identifier names" not being
+        // supported in Vite's default browser target https://github.com/vitejs/vite/issues/13556
+        target: "es2022",
+        treeShaking: true,
+      },
+    },
+  };
 });