feat: Configure Vite to inject Supabase env vars directly for Hugging Face compatibility

frontend/src/services/supabaseClient.js

@@ -1,36 +1,30 @@
 import { createClient } from '@supabase/supabase-js';
 
-// Supabase configuration from environment variables
-// Vite only exposes variables prefixed with VITE_ to the frontend
-const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
-const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
-
-// Validate configuration
-if (!supabaseUrl) {
-  console.error('Missing VITE_SUPABASE_URL environment variable. Please check your .env file or deployment settings.');
+// Utilise les constantes définies par Vite au lieu de import.meta.env
+// Ces constantes sont des chaînes littérales injectées lors du build
+const supabaseUrl = __VITE_SUPABASE_URL__;
+const supabaseAnonKey = __VITE_SUPABASE_ANON_KEY__;
+
+// Validation de la configuration (toujours une bonne pratique)
+if (!supabaseUrl || supabaseUrl === 'https://your-project.supabase.co') {
+  console.error('❌ VITE_SUPABASE_URL n\'est pas correctement définie. Veuillez vérifier vos variables d\'environnement ou la configuration de Vite.');
 }
 
-if (!supabaseAnonKey) {
-  console.error('Missing VITE_SUPABASE_ANON_KEY environment variable. Please check your .env file or deployment settings.');
+if (!supabaseAnonKey || supabaseAnonKey === 'your-anon-key') {
+  console.error('❌ VITE_SUPABASE_ANON_KEY n\'est pas correctement définie. Veuillez vérifier vos variables d\'environnement ou la configuration de Vite.');
 }
 
 // Create Supabase client instance
 export const supabase = createClient(
-  supabaseUrl || 'https://your-project.supabase.co', 
-  supabaseAnonKey || 'your-anon-key',
+  supabaseUrl,
+  supabaseAnonKey,
   {
-    // Optional: Add any additional configuration options here
     auth: {
-      // Automatically refresh the session if it's close to expiring
       autoRefreshToken: true,
-      // Persist the session in local storage
       persistSession: true,
-      // Detect changes to the session (e.g., token refresh)
       detectSessionInUrl: true
     },
-    // Global fetch options
     global: {
-      // Set a default timeout for requests (in milliseconds)
       headers: {
         'X-Client-Info': 'lin-app/1.0'
       }
@@ -38,58 +32,23 @@ export const supabase = createClient(
   }
 );
 
-// --- Add comprehensive logging for auth state changes ---
-let initialSessionCheckDone = false;
+// --- Logging et vérification de la session initiale ---
+console.log("Supabase client initialized with URL:", supabaseUrl);
 
 // Listen for auth state changes
 const { data: authListener } = supabase.auth.onAuthStateChange((event, session) => {
   console.log('Supabase Auth State Change Event:', event);
   console.log('Supabase Auth State Change Session:', session ? `User: ${session.user?.id || 'N/A'}` : 'No session');
-
-  // Handle specific events
-  if (event === 'PASSWORD_RECOVERY') {
-    console.log('*** PASSWORD_RECOVERY event detected. A password reset link was used. ***');
-    // The session provided here should be the temporary recovery session.
-    // The app should now allow the user to set a new password.
-  } else if (event === 'SIGNED_IN') {
-    console.log('User signed in.');
-  } else if (event === 'SIGNED_OUT') {
-    console.log('User signed out.');
-  } else if (event === 'TOKEN_REFRESHED') {
-    console.log('Session token refreshed.');
-  } else if (event === 'USER_UPDATED') {
-    console.log('User data updated.');
-  }
 });
 
-console.log("Supabase client initialized with URL:", supabaseUrl);
-
-// Initial session check on app load
+// Initial session check
 supabase.auth.getSession()
   .then(({ data: { session }, error }) => {
-    initialSessionCheckDone = true;
     if (error) {
       console.error("Error getting initial session:", error);
     } else {
       console.log("Initial session check result (on app load):", session ? `Session exists for user: ${session.user?.id || 'N/A'}` : "No active session found");
-      // If session is null here when coming from a reset link, it means processing failed or the token was already used/expired.
     }
   });
 
-// Fallback check in case the initial check happens too early or misses something
-setTimeout(() => {
-    if (!initialSessionCheckDone) {
-        console.warn("Initial session check might have been missed or delayed. Checking again...");
-        supabase.auth.getSession()
-        .then(({ data: { session }, error }) => {
-            initialSessionCheckDone = true; // Mark as done even on retry
-            if (error) {
-            console.error("Fallback - Error getting session:", error);
-            } else {
-            console.log("Fallback - Session check result:", session ? `Session exists for user: ${session.user?.id || 'N/A'}` : "No active session found (Fallback)");
-            }
-        });
-    }
-}, 1000); // Check again after 1 second
-
 export default supabase;

frontend/vite.config.js

@@ -1,70 +1,91 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import path from 'path'
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react({
-    jsx: 'transform',
-    jsxFactory: 'React.createElement',
-    jsxFragment: 'React.Fragment',
-  })],
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, './src'),
+export default defineConfig(({ mode }) => {
+  // Charge les variables d'environnement pour le mode actuel ('development', 'production', etc.)
+  // Cela inclut les variables définies dans l'environnement d'exécution (comme sur Hugging Face)
+  const env = loadEnv(mode, process.cwd(), '');
+  
+  // --- Vérification des variables critiques pour le frontend ---
+  if (!env.VITE_SUPABASE_URL) {
+    console.warn('⚠️  Variable d\'environnement VITE_SUPABASE_URL non définie. Utilisation d\'une valeur par défaut pour le développement.');
+  }
+  if (!env.VITE_SUPABASE_ANON_KEY) {
+    console.warn('⚠️  Variable d\'environnement VITE_SUPABASE_ANON_KEY non définie. Utilisation d\'une valeur par défaut pour le développement.');
+  }
+  
+  // --- Configuration de base ---
+  const config = {
+    plugins: [react({
+      jsx: 'transform',
+      jsxFactory: 'React.createElement',
+      jsxFragment: 'React.Fragment',
+    })],
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './src'),
+      },
     },
-  },
-  server: {
-    port: 3000,
-    host: 'localhost', // Explicitly bind to localhost
-    proxy: {
-      '/api': {
-        target: 'http://localhost:5000',
-        changeOrigin: true,
-        secure: false,
-        // Configure proxy to handle WebSocket connections if needed
-        ws: true,
-        // Configure proxy to handle CORS headers
-        configure: (proxy, _options) => {
-          proxy.on('error', (err, _req, _res) => {
-            console.log('proxy error', err);
-          });
-          proxy.on('proxyReq', (proxyReq, req, _res) => {
-            console.log('Sending Request to the Target:', req.method, req.url);
-          });
-          proxy.on('proxyRes', (proxyRes, req, _res) => {
-            console.log('Received Response from the Target:', proxyRes.statusCode, req.url);
-          });
+    server: {
+      port: 3000,
+      host: 'localhost', // Explicitly bind to localhost
+      proxy: {
+        '/api': {
+          target: 'http://localhost:5000',
+          changeOrigin: true,
+          secure: false,
+          // Configure proxy to handle WebSocket connections if needed
+          ws: true,
+          // Configure proxy to handle CORS headers
+          configure: (proxy, _options) => {
+            proxy.on('error', (err, _req, _res) => {
+              console.log('proxy error', err);
+            });
+            proxy.on('proxyReq', (proxyReq, req, _res) => {
+              console.log('Sending Request to the Target:', req.method, req.url);
+            });
+            proxy.on('proxyRes', (proxyRes, req, _res) => {
+              console.log('Received Response from the Target:', proxyRes.statusCode, req.url);
+            });
+          },
+        },
+        // Proxy for WebSocket connections (if needed for real-time features)
+        '/ws': {
+          target: 'http://localhost:5000',
+          ws: true,
+          changeOrigin: true,
+          secure: false,
         },
-      },
-      // Proxy for WebSocket connections (if needed for real-time features)
-      '/ws': {
-        target: 'http://localhost:5000',
-        ws: true,
-        changeOrigin: true,
-        secure: false,
       },
     },
-  },
-  build: {
-    outDir: 'dist',
-    sourcemap: true,
-    // Configure build for production
-    rollupOptions: {
-      output: {
-        manualChunks: {
-          // Create separate chunks for vendor libraries
-          vendor: ['react', 'react-dom', 'react-router-dom', 'react-redux'],
+    build: {
+      outDir: 'dist',
+      sourcemap: true,
+      // Configure build for production
+      rollupOptions: {
+        output: {
+          manualChunks: {
+            // Create separate chunks for vendor libraries
+            vendor: ['react', 'react-dom', 'react-router-dom', 'react-redux'],
+          },
         },
       },
+      // Ensure JSX is processed during build
+      commonjsOptions: {
+        include: [/node_modules/],
+      },
     },
-    // Ensure JSX is processed during build
-    commonjsOptions: {
-      include: [/node_modules/],
+    // --- Injection directe des variables dans le code bundle ---
+    define: {
+      // Ces variables seront remplacées par leurs valeurs littérales dans le bundle JS
+      __VITE_SUPABASE_URL__: JSON.stringify(env.VITE_SUPABASE_URL || 'https://your-project.supabase.co'),
+      __VITE_SUPABASE_ANON_KEY__: JSON.stringify(env.VITE_SUPABASE_ANON_KEY || 'your-anon-key'),
+      // Conserver l'ancienne définition si elle est utilisée ailleurs
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
     },
-  },
-  // Define environment variables that should be exposed to the browser
-  define: {
-    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
-  },
-})
+  };
+
+  return config;
+});