fix: MAPBOX token usage and auth redirects

Author: lkstrp

compose/.env.example

@@ -19,7 +19,7 @@ POSTGRES_PORT=5432
 # -----------------------------
 
 # To use the interactive Network map, a mapbox token is needed
-VITE_MAPBOX_TOKEN=your_mapbox_token_here
+MAPBOX_TOKEN=your_mapbox_token_here
 
 # Authentication Configuration (Optional)
 # ---------------------------------------

compose/compose.dev.yaml

@@ -48,6 +48,8 @@ services:
       - REDIS_URL=redis://redis:6379/0
       - SERVE_FRONTEND=${SERVE_FRONTEND:-false}
       - DEBUG=true
+      # Map configuration
+      - MAPBOX_TOKEN=${MAPBOX_TOKEN}
       # Authentication
       - ENABLE_AUTH=${ENABLE_AUTH:-false}
       - GITHUB_CLIENT_ID=${GITHUB_CLIENT_ID:-}

compose/compose.full.yaml

@@ -44,6 +44,8 @@ services:
     environment:
       - DATABASE_URL=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST:-postgres}:${POSTGRES_PORT:-5432}/${POSTGRES_DB}
       - REDIS_URL=redis://redis:6379/0
+      # Map configuration
+      - MAPBOX_TOKEN=${MAPBOX_TOKEN}
       # Authentication
       - ENABLE_AUTH=${ENABLE_AUTH}
       - GITHUB_CLIENT_ID=${GITHUB_CLIENT_ID}

frontend/app/src/routes/+layout.svelte

@@ -54,13 +54,12 @@
 
 		// If auth is enabled and user is not authenticated, redirect to login
 		// (except if already on login page)
+		// Note: The API client's automatic 401 redirect skips /auth/ endpoints
+		// to prevent redirect loops, so we handle the redirect manually here
 		const currentPath = $page.url.pathname;
-		if (!authStore.loading && !authStore.isAuthenticated && authStore.error === null) {
-			// Only redirect if we got a 401/400 response (auth is enabled)
-			// If auth is disabled, we won't redirect
+		if (!authStore.loading && !authStore.isAuthenticated) {
 			if (currentPath !== '/login') {
-				// Try to make a test request to see if auth is required
-				// The API client will handle the redirect if needed
+				goto('/login');
 			}
 		}
 	});

frontend/map/src/App.jsx

@@ -2,9 +2,6 @@ import React, { useState, useEffect } from 'react';
 import { Routes, Route, useSearchParams, useNavigate } from 'react-router-dom';
 import KeplerMap from './KeplerMap';
 
-// Get Mapbox token from environment variable
-const MAPBOX_TOKEN = import.meta.env.VITE_MAPBOX_TOKEN || '';
-
 function NetworkMap() {
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
@@ -13,17 +10,64 @@ function NetworkMap() {
   const [config, setConfig] = useState({});
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [mapboxToken, setMapboxToken] = useState('');
 
   // Back URL
   const backUrl = id
     ? (import.meta.env.DEV ? `http://localhost:5173/network?id=${id}` : `/network?id=${id}`)
     : '/network';
 
+  // Login URL - in dev mode, the SvelteKit app runs on port 5173
+  const loginUrl = import.meta.env.DEV ? 'http://localhost:5173/login' : '/login';
+
+  // Check authentication on mount
+  useEffect(() => {
+    async function checkAuth() {
+      try {
+        const response = await fetch('/api/v1/auth/me');
+        // If we get 401, redirect to login (auth is enabled and user not authenticated)
+        if (response.status === 401) {
+          window.location.href = loginUrl;
+        }
+      } catch (err) {
+        // Network errors - continue anyway (auth might be disabled)
+        console.warn('Auth check failed:', err);
+      }
+    }
+
+    checkAuth();
+  }, []);
+
+  useEffect(() => {
+    // Fetch mapbox token from backend config
+    async function fetchMapConfig() {
+      try {
+        const response = await fetch('/api/v1/map/config');
+        if (response.ok) {
+          const data = await response.json();
+          setMapboxToken(data.mapbox_token || '');
+        }
+      } catch (err) {
+        console.warn('Failed to fetch map config:', err);
+        // Token will remain empty, map will show warning
+      }
+    }
+
+    fetchMapConfig();
+  }, []);
+
   useEffect(() => {
     // Poll task status until complete
     async function pollTaskStatus(statusUrl, maxAttempts = 60) {
       for (let i = 0; i < maxAttempts; i++) {
         const response = await fetch(statusUrl);
+
+        // Check for auth errors
+        if (response.status === 401) {
+          window.location.href = loginUrl;
+          return;
+        }
+
         const result = await response.json();
 
         if (result.state === 'SUCCESS') {
@@ -43,6 +87,11 @@ function NetworkMap() {
     async function fetchData(endpoint, dataType) {
       const response = await fetch(endpoint);
       if (!response.ok) {
+        if (response.status === 401) {
+          // User not authenticated - redirect to login
+          window.location.href = loginUrl;
+          return;
+        }
         if (response.status === 404) {
           throw new Error(`Network "${id}" not found`);
         }
@@ -209,14 +258,14 @@ function NetworkMap() {
     );
   }
 
-  if (!MAPBOX_TOKEN) {
+  if (!mapboxToken) {
     return (
       <div style={styles.center}>
         <div style={styles.warning}>
           <h2>Mapbox Token Required</h2>
           <p>To display the network map, configure a Mapbox access token in your environment.</p>
           <p style={styles.small}>
-            Set <code>VITE_MAPBOX_TOKEN</code> in your <code>.env</code> file.
+            Set <code>MAPBOX_TOKEN</code> environment variable when running the application.
           </p>
           <p style={styles.small}>
             Create a free account and obtain a token at <a href="https://www.mapbox.com/" target="_blank" rel="noopener">mapbox.com</a>
@@ -238,7 +287,7 @@ function NetworkMap() {
         <KeplerMap
           datasets={datasets}
           config={config}
-          mapboxToken={MAPBOX_TOKEN}
+          mapboxToken={mapboxToken}
         />
       </div>
     </div>

src/pypsa_app/backend/api/routes/map.py

@@ -6,12 +6,21 @@
 from pypsa_app.backend.api.utils.task_utils import queue_task
 from pypsa_app.backend.models import Network, User
 from pypsa_app.backend.schemas.common import TaskResponse
+from pypsa_app.backend.settings import settings
 from pypsa_app.backend.tasks import extract_geographic_layer_task
 
 router = APIRouter()
 logger = logging.getLogger(__name__)
 
 
+@router.get("/config")
+def get_map_config():
+    """Get map configuration including Mapbox token"""
+    return {
+        "mapbox_token": settings.mapbox_token or "",
+    }
+
+
 @router.get("/{network_id}/buses", response_model=TaskResponse)
 def get_buses(
     network: Network = Depends(get_network_or_404),

src/pypsa_app/backend/settings.py

@@ -63,5 +63,8 @@ def networks_path(self) -> Path:
     session_cookie_name: str = "pypsa_session"
     session_ttl: int = 604800  # 7 days in seconds
 
+    # Map configuration
+    mapbox_token: str | None = None
+
 
 settings = Settings()