Merge pull request #331 from itsmo-ks/fix-docker-env-vars

Enhance Docker and environment variable handling for authentication

Dockerfile

@@ -7,6 +7,14 @@ WORKDIR /app
 RUN apk add --no-cache wget curl bash
 RUN apk add --no-cache python3 make g++ && ln -sf python3 /usr/bin/python
 
+# Accept build arguments for environment variables
+ARG AUTH_ENABLED
+ARG AUTH_SECRET
+ARG APPWRITE_ENDPOINT
+ARG APPWRITE_PROJECT_ID
+ARG POCKETBASE_URL
+ARG SESSION_MAX_AGE
+
 # Copy package files first for caching
 COPY package.json package-lock.json ./
 

docker-compose.yml

@@ -4,16 +4,16 @@ services:
         build:
             context: .
             dockerfile: Dockerfile
+            args:
+                - AUTH_ENABLED=${AUTH_ENABLED}
+                - AUTH_SECRET=${AUTH_SECRET}
+                - APPWRITE_ENDPOINT=${APPWRITE_ENDPOINT}
+                - APPWRITE_PROJECT_ID=${APPWRITE_PROJECT_ID}
+                - POCKETBASE_URL=${POCKETBASE_URL}
+                - SESSION_MAX_AGE=${SESSION_MAX_AGE}
         container_name: monochrome
         ports:
             - '${MONOCHROME_PORT:-3000}:4173'
-        environment:
-            AUTH_ENABLED: ${AUTH_ENABLED:-false}
-            AUTH_SECRET: ${AUTH_SECRET:-}
-            APPWRITE_ENDPOINT: ${APPWRITE_ENDPOINT:-https://auth.yourdomain.com/v1}
-            APPWRITE_PROJECT_ID: ${APPWRITE_PROJECT_ID:-auth-for-monochrome}
-            POCKETBASE_URL: ${POCKETBASE_URL:-}
-            SESSION_MAX_AGE: ${SESSION_MAX_AGE:-604800000}
         restart: unless-stopped
         networks:
             - monochrome-network

js/accounts/pocketbase.js

@@ -5,7 +5,7 @@ import { authManager } from './auth.js';
 
 const PUBLIC_COLLECTION = 'public_playlists';
 const DEFAULT_POCKETBASE_URL = 'https://data.samidy.xyz';
-const POCKETBASE_URL = localStorage.getItem('monochrome-pocketbase-url') || DEFAULT_POCKETBASE_URL;
+const POCKETBASE_URL = window.__POCKETBASE_URL__ || localStorage.getItem('monochrome-pocketbase-url') || DEFAULT_POCKETBASE_URL;
 
 console.log('[PocketBase] Using URL:', POCKETBASE_URL);
 

vite-plugin-auth-gate.js

@@ -19,17 +19,7 @@ function parseBody(req) {
     });
 }
 
-export default function authGatePlugin() {
+function buildInjectionScript(env) {
-    let env = {};
-
-    return {
-        name: 'auth-gate',
-
-        config(_, { mode }) {
-            env = loadEnv(mode, process.cwd(), '');
-        },
-
-        configurePreviewServer(server) {
     const AUTH_ENABLED = (env.AUTH_ENABLED ?? 'false') !== 'false';
     const APPWRITE_ENDPOINT = env.APPWRITE_ENDPOINT;
     const APPWRITE_PROJECT_ID = env.APPWRITE_PROJECT_ID;
@@ -37,8 +27,6 @@ export default function authGatePlugin() {
     const AUTH_GOOGLE_ENABLED = env.AUTH_GOOGLE_ENABLED;
     const AUTH_EMAIL_ENABLED = env.AUTH_EMAIL_ENABLED;
 
-            // --- Build injection script (always, for both auth gate and env config) ---
-
     const flags = [];
     if (AUTH_ENABLED) flags.push('window.__AUTH_GATE__=true');
     const authProviderOverrides = {};
@@ -52,10 +40,29 @@ export default function authGatePlugin() {
         flags.push(`window.__AUTH_PROVIDERS__=${JSON.stringify(authProviderOverrides)}`);
     }
     if (APPWRITE_ENDPOINT) flags.push(`window.__APPWRITE_ENDPOINT__=${JSON.stringify(APPWRITE_ENDPOINT)}`);
-            if (APPWRITE_PROJECT_ID)
+    if (APPWRITE_PROJECT_ID) flags.push(`window.__APPWRITE_PROJECT_ID__=${JSON.stringify(APPWRITE_PROJECT_ID)}`);
-                flags.push(`window.__APPWRITE_PROJECT_ID__=${JSON.stringify(APPWRITE_PROJECT_ID)}`);
     if (POCKETBASE_URL) flags.push(`window.__POCKETBASE_URL__=${JSON.stringify(POCKETBASE_URL)}`);
-            const configScript = flags.length > 0 ? `<script>${flags.join(';')};</script>` : null;
+
+    return flags.length > 0 ? `<script>${flags.join(';')};</script>` : null;
+}
+
+export default function authGatePlugin() {
+    let env = {};
+
+    return {
+        name: 'auth-gate',
+
+        config(_, { mode }) {
+            env = loadEnv(mode, process.cwd(), '');
+        },
+
+        transformIndexHtml(html) {
+            const scriptTag = buildInjectionScript(env);
+            return scriptTag ? html.replace('</head>', `${scriptTag}\n</head>`) : html;
+        },
+
+        configurePreviewServer(server) {
+            const configScript = buildInjectionScript(env);
 
             // --- Pre-build injected HTML pages ---
 
@@ -69,6 +76,7 @@ export default function authGatePlugin() {
             }
 
             let loginHtml = null;
+            const AUTH_ENABLED = (env.AUTH_ENABLED ?? 'false') !== 'false';
             if (AUTH_ENABLED) {
                 const loginPath = join(distDir, 'login.html');
                 if (existsSync(loginPath)) {
@@ -98,7 +106,7 @@ export default function authGatePlugin() {
                     process.exit(1);
                 }
 
-                console.log(`Auth gate enabled (Project: ${APPWRITE_PROJECT_ID})`);
+                console.log(`Auth gate enabled (Project: ${env.APPWRITE_PROJECT_ID})`);
 
                 server.middlewares.use(
                     cookieSession({