Fix #298: move Sentinel credentials from browser storage to backend .env

Reported by @tg12. Pre-fix, the Settings panel stored real third-party
Copernicus CDSE client_id + client_secret in browser localStorage /
sessionStorage via the privacy storage helper, and the proxy routes
required those values to come back in every tile/token request body.
Any same-origin script (XSS, malicious browser extension, dev-tools
HAR export) had read access to the credentials.

This change moves them server-side, behind the same .env-backed admin
flow every other third-party API key (OpenSky, AIS Stream, Finnhub,
Shodan, …) already uses.

Backend
-------
backend/services/api_settings.py
  * Added SENTINEL_CLIENT_ID and SENTINEL_CLIENT_SECRET entries to
    API_REGISTRY. The existing GET/PUT /api/settings/api-keys flow
    (already require_local_operator-gated, .env-backed) now manages
    them — no new route surface.

backend/routers/tools.py
  * /api/sentinel/token and /api/sentinel/tile resolve credentials via
    a new _resolve_sentinel_credentials() helper: body fields win for
    back-compat with any legacy callers, otherwise the helper reads
    SENTINEL_CLIENT_ID / SENTINEL_CLIENT_SECRET from os.environ.
  * When neither source has a value, the route returns 400 with a
    friendly pointer ("Set SENTINEL_CLIENT_ID and SENTINEL_CLIENT_SECRET
    in the API Keys panel") instead of the curt "required" message.
    The user's standing rule against hostile errors applies.
  * Function bodies only — decorator lines untouched, so this PR does
    not conflict with #303 (which adds Depends(require_local_operator)
    to the same routes).

Frontend
--------
frontend/src/lib/sentinelHub.ts — rewritten
  * Removed: getSentinelCredentials / setSentinelCredentials /
    clearSentinelCredentials / getSentinelCredentialStorageMode.
    These were the browser-storage read/write helpers; their existence
    was the bug.
  * Added: checkBackendSentinelStatus(), refreshSentinelStatus(),
    getCachedSentinelStatus(), and a kept-for-back-compat
    hasSentinelCredentials() shim. Status is sourced from
    /api/settings/api-keys (the same endpoint the API Keys panel
    already uses), so we don't add a new route just for this read.
  * Added: migrateLegacySentinelBrowserKeys() — one-shot, idempotent
    helper that clears sb_sentinel_client_id / _secret / _instance_id
    from BOTH localStorage and sessionStorage. We deliberately do NOT
    auto-POST those legacy browser values to the backend; doing so
    would silently migrate a secret across a trust boundary without
    operator consent. Operators re-enter once in the API Keys panel
    and the legacy keys get wiped here.
  * fetchSentinelTile and getSentinelToken no longer send client_id /
    client_secret in the request body. The backend uses .env.

frontend/src/components/SettingsPanel.tsx
  * Dropped sb_sentinel_client_id / _secret / _instance_id from
    PRIVACY_SENSITIVE_BROWSER_KEYS — they're no longer written.
  * SentinelTab rewritten: removed the inline Client ID / Client Secret
    inputs + Save / Clear / Test buttons. Replaced with a status panel
    that calls checkBackendSentinelStatus() on mount, a one-click
    "Open API Keys Panel" button, and a migration banner that appears
    only when migrateLegacySentinelBrowserKeys() actually cleared
    something.
  * Setup guide STEP 3 now points to the API Keys panel instead of
    the local form.

frontend/src/app/page.tsx
  * Added a one-time useEffect that fires checkBackendSentinelStatus()
    on mount so the cached value (which the synchronous
    hasSentinelCredentials() shim reads) is populated before
    MaplibreViewer's tile-URL memo runs.

Tests
-----
backend/tests/test_sentinel_credentials_server_side.py (new)
  * API_REGISTRY surface — sentinel_client_id / sentinel_client_secret
    are registered with the right env_keys, ALLOWED_ENV_KEYS lets
    /api/settings/api-keys PUT them.
  * Resolution order — body wins, env is fallback, neither → 400 with
    the friendly pointer message, and NO upstream HTTP call when
    neither source has credentials (asserted via
    MagicMock(side_effect=AssertionError)).
  * /api/sentinel/tile same shape.

frontend/src/__tests__/utils/sentinelHub.test.ts (new)
  * migrateLegacySentinelBrowserKeys clears localStorage AND
    sessionStorage, reports what it cleared, idempotent.
  * fetchSentinelTile + getSentinelToken POST WITHOUT client_id /
    client_secret in the body (plants leaked credentials in browser
    storage first to prove they are NOT picked up).
  * checkBackendSentinelStatus parses /api/settings/api-keys correctly:
    true only when both keys is_set, false on partial config or
    network errors.

All 7 backend tests + 8 frontend tests pass locally. The
test_no_new_duplicate_routes guard and the api-settings test suite
still pass.

Credit: @tg12 for the audit report.

frontend/src/__tests__/utils/sentinelHub.test.ts

@@ -0,0 +1,169 @@
+/**
+ * Issue #298 (tg12): Sentinel credentials must no longer live in browser
+ * storage, and the proxy calls must not forward them in request bodies.
+ * These tests pin both invariants on ``lib/sentinelHub``:
+ *
+ *  1. ``migrateLegacySentinelBrowserKeys()`` clears the legacy keys
+ *     idempotently and reports what it cleared.
+ *  2. ``fetchSentinelTile()`` and ``getSentinelToken()`` POST WITHOUT
+ *     ``client_id`` or ``client_secret`` in the body — the backend
+ *     resolves credentials from its ``.env``. A future refactor that
+ *     accidentally re-introduces browser-storage reads (e.g. by
+ *     restoring ``getSentinelCredentials()`` and forwarding it) gets a
+ *     loud test failure here rather than a silent privacy regression.
+ *  3. ``checkBackendSentinelStatus()`` queries ``/api/settings/api-keys``
+ *     and returns true only when both Sentinel keys report ``is_set``.
+ */
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import {
+  migrateLegacySentinelBrowserKeys,
+  fetchSentinelTile,
+  getSentinelToken,
+  checkBackendSentinelStatus,
+  refreshSentinelStatus,
+} from '@/lib/sentinelHub';
+
+const originalFetch = globalThis.fetch;
+
+describe('lib/sentinelHub — issue #298 server-side credentials', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    window.sessionStorage.clear();
+    refreshSentinelStatus();
+  });
+
+  afterEach(() => {
+    globalThis.fetch = originalFetch;
+    window.localStorage.clear();
+    window.sessionStorage.clear();
+    refreshSentinelStatus();
+  });
+
+  describe('migrateLegacySentinelBrowserKeys', () => {
+    it('clears legacy localStorage keys and reports what it cleared', () => {
+      window.localStorage.setItem('sb_sentinel_client_id', 'sh-leaked-id');
+      window.localStorage.setItem('sb_sentinel_client_secret', 'leaked-secret');
+      window.localStorage.setItem('sb_sentinel_instance_id', 'leaked-instance');
+
+      const result = migrateLegacySentinelBrowserKeys();
+
+      expect(window.localStorage.getItem('sb_sentinel_client_id')).toBeNull();
+      expect(window.localStorage.getItem('sb_sentinel_client_secret')).toBeNull();
+      expect(window.localStorage.getItem('sb_sentinel_instance_id')).toBeNull();
+      expect(result.cleared.sort()).toEqual([
+        'sb_sentinel_client_id',
+        'sb_sentinel_client_secret',
+        'sb_sentinel_instance_id',
+      ].sort());
+    });
+
+    it('clears sessionStorage too (privacy-strict mode used to put them there)', () => {
+      window.sessionStorage.setItem('sb_sentinel_client_id', 'sh-session-id');
+      window.sessionStorage.setItem('sb_sentinel_client_secret', 'session-secret');
+
+      const result = migrateLegacySentinelBrowserKeys();
+
+      expect(window.sessionStorage.getItem('sb_sentinel_client_id')).toBeNull();
+      expect(window.sessionStorage.getItem('sb_sentinel_client_secret')).toBeNull();
+      expect(result.cleared).toContain('sb_sentinel_client_id');
+      expect(result.cleared).toContain('sb_sentinel_client_secret');
+    });
+
+    it('is idempotent — calling it on a clean store reports nothing cleared', () => {
+      const result = migrateLegacySentinelBrowserKeys();
+      expect(result.cleared).toEqual([]);
+    });
+  });
+
+  describe('proxy requests no longer forward credentials', () => {
+    it('fetchSentinelTile POSTs without client_id/client_secret in the body', async () => {
+      // Plant credentials in browser storage to prove they would NOT be
+      // picked up even if present. Pre-#298, this would have been read
+      // from localStorage and posted in the body.
+      window.localStorage.setItem('sb_sentinel_client_id', 'sh-leaked-id');
+      window.localStorage.setItem('sb_sentinel_client_secret', 'leaked-secret');
+
+      const fetchMock = vi.fn(async () => new Response(new ArrayBuffer(0), { status: 200 }));
+      globalThis.fetch = fetchMock as unknown as typeof globalThis.fetch;
+
+      await fetchSentinelTile(6, 30, 20, 'TRUE-COLOR', '2026-01-01');
+
+      expect(fetchMock).toHaveBeenCalledTimes(1);
+      const [, init] = fetchMock.mock.calls[0] as [unknown, RequestInit];
+      const body = JSON.parse(String(init.body));
+      expect(body).not.toHaveProperty('client_id');
+      expect(body).not.toHaveProperty('client_secret');
+      // Sanity: the legitimate fields are still there.
+      expect(body).toMatchObject({ preset: 'TRUE-COLOR', date: '2026-01-01', z: 6, x: 30, y: 20 });
+    });
+
+    it('getSentinelToken POSTs with an empty form body (backend uses env)', async () => {
+      window.localStorage.setItem('sb_sentinel_client_id', 'sh-leaked-id');
+      window.localStorage.setItem('sb_sentinel_client_secret', 'leaked-secret');
+
+      const fetchMock = vi.fn(async () =>
+        new Response(JSON.stringify({ access_token: 'stub', expires_in: 300 }), { status: 200 }),
+      );
+      globalThis.fetch = fetchMock as unknown as typeof globalThis.fetch;
+
+      const token = await getSentinelToken();
+
+      expect(token).toBe('stub');
+      expect(fetchMock).toHaveBeenCalledTimes(1);
+      const [, init] = fetchMock.mock.calls[0] as [unknown, RequestInit];
+      const body = String(init.body);
+      // Body is a URLSearchParams stringification. We assert that the
+      // leaked credential never appears in it.
+      expect(body).not.toContain('sh-leaked-id');
+      expect(body).not.toContain('leaked-secret');
+    });
+  });
+
+  describe('checkBackendSentinelStatus', () => {
+    it('returns true when both Sentinel keys report is_set on /api/settings/api-keys', async () => {
+      const fetchMock = vi.fn(async (input: unknown) => {
+        const url = String(input);
+        if (url.endsWith('/api/settings/api-keys')) {
+          return new Response(
+            JSON.stringify([
+              { id: 'sentinel_client_id', env_key: 'SENTINEL_CLIENT_ID', is_set: true },
+              { id: 'sentinel_client_secret', env_key: 'SENTINEL_CLIENT_SECRET', is_set: true },
+              { id: 'opensky_client_id', env_key: 'OPENSKY_CLIENT_ID', is_set: false },
+            ]),
+            { status: 200 },
+          );
+        }
+        return new Response('not found', { status: 404 });
+      });
+      globalThis.fetch = fetchMock as unknown as typeof globalThis.fetch;
+
+      const configured = await checkBackendSentinelStatus();
+      expect(configured).toBe(true);
+    });
+
+    it('returns false when only one of the two keys is set', async () => {
+      const fetchMock = vi.fn(async () =>
+        new Response(
+          JSON.stringify([
+            { id: 'sentinel_client_id', env_key: 'SENTINEL_CLIENT_ID', is_set: true },
+            { id: 'sentinel_client_secret', env_key: 'SENTINEL_CLIENT_SECRET', is_set: false },
+          ]),
+          { status: 200 },
+        ),
+      );
+      globalThis.fetch = fetchMock as unknown as typeof globalThis.fetch;
+
+      const configured = await checkBackendSentinelStatus();
+      expect(configured).toBe(false);
+    });
+
+    it('fails safely (false) when the backend errors', async () => {
+      const fetchMock = vi.fn(async () => { throw new Error('network down'); });
+      globalThis.fetch = fetchMock as unknown as typeof globalThis.fetch;
+
+      const configured = await checkBackendSentinelStatus();
+      expect(configured).toBe(false);
+    });
+  });
+});

frontend/src/app/page.tsx

@@ -50,6 +50,7 @@ import {
   hasSentinelInfoBeenSeen,
   markSentinelInfoSeen,
   hasSentinelCredentials,
+  checkBackendSentinelStatus,
 } from '@/lib/sentinelHub';
 import { useTranslation } from '@/i18n';
 import { LocateBar } from './LocateBar';
@@ -107,6 +108,15 @@ export default function Dashboard() {
   useEffect(() => {
     localStorage.setItem('sb_ticker_open', tickerOpen.toString());
   }, [tickerOpen]);
+
+  // Issue #298: kick the one-time backend Sentinel-status check on mount.
+  // This populates the cached value that ``hasSentinelCredentials()`` reads
+  // synchronously elsewhere (MaplibreViewer's tile-URL memo, the
+  // Sentinel-info modal flow). Fire-and-forget — the cache stays false
+  // until resolved so the UI fails safely.
+  useEffect(() => {
+    void checkBackendSentinelStatus();
+  }, []);
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [legendOpen, setLegendOpen] = useState(false);
   const [shortcutsOpen, setShortcutsOpen] = useState(false);

frontend/src/components/SettingsPanel.tsx

@@ -74,17 +74,18 @@ import {
   Trash2,
   RotateCcw,
   Satellite,
-  Eye,
-  EyeOff,
   Copy,
   Check,
   Radar,
 } from 'lucide-react';
 import {
-  clearSentinelCredentials,
-  getSentinelCredentialStorageMode,
-  getSentinelCredentials,
-  setSentinelCredentials,
+  // Issue #298: Sentinel credentials now live server-side. The legacy
+  // browser-storage helpers (getSentinelCredentials / setSentinelCredentials
+  // / clearSentinelCredentials / getSentinelCredentialStorageMode) have
+  // been removed from sentinelHub.ts. We use the new status check + the
+  // one-time migration helper instead.
+  checkBackendSentinelStatus,
+  migrateLegacySentinelBrowserKeys,
 } from '@/lib/sentinelHub';
 import {
   getPrivacyProfilePreference,
@@ -143,10 +144,14 @@ const WEIGHT_COLORS: Record<number, string> = {
 const SETTINGS_FOCUS_KEY = 'sb_settings_focus';
 const WORMHOLE_RETURN_KEY = 'sb_wormhole_return_target';
 const WORMHOLE_READY_EVENT = 'sb:wormhole-ready';
+// Issue #298 (tg12): Sentinel credentials moved from browser storage to
+// the backend ``.env`` (managed through the API Keys panel). The legacy
+// keys (``sb_sentinel_client_id`` / ``sb_sentinel_client_secret`` /
+// ``sb_sentinel_instance_id``) are no longer treated as sensitive
+// browser state because they are no longer written. ``SentinelTab``
+// runs ``migrateLegacySentinelBrowserKeys()`` once on mount to clear
+// any leftover values from pre-#298 installs.
 const PRIVACY_SENSITIVE_BROWSER_KEYS = [
-  'sb_sentinel_client_id',
-  'sb_sentinel_client_secret',
-  'sb_sentinel_instance_id',
   'sb_infonet_head',
   'sb_infonet_head_history',
   'sb_infonet_peers',
@@ -2615,7 +2620,9 @@ const SettingsPanel = React.memo(function SettingsPanel({
             )}
 
             {/* ==================== SENTINEL HUB TAB ==================== */}
-            {activeTab === 'sentinel' && <SentinelTab />}
+            {activeTab === 'sentinel' && (
+              <SentinelTab onGoToApiKeys={() => setActiveTab('api-keys')} />
+            )}
             {activeTab === 'sar' && <SarSettingsTab />}
           </motion.div>
         </>
@@ -2625,63 +2632,58 @@ const SettingsPanel = React.memo(function SettingsPanel({
 });
 
 // ─── Sentinel Hub Settings Tab ─────────────────────────────────────────────
-function SentinelTab() {
-  const [clientId, setClientId] = useState(() => getSentinelCredentials().clientId);
-  const [clientSecret, setClientSecret] = useState(() => getSentinelCredentials().clientSecret);
-  const [testing, setTesting] = useState(false);
-  const [status, setStatus] = useState<{ ok: boolean; msg: string } | null>(null);
-  const [dirty, setDirty] = useState(false);
-  const [showSecret, setShowSecret] = useState(false);
-  const storageMode = getSentinelCredentialStorageMode();
+// Issue #298 (tg12): Sentinel credentials now live in the backend ``.env``
+// and are managed through the existing API Keys panel — same flow as every
+// other third-party API key (OpenSky, AIS Stream, Finnhub, …). This tab no
+// longer collects credentials. It does three things:
+//   1. Runs migrateLegacySentinelBrowserKeys() once to wipe pre-#298
+//      values out of localStorage / sessionStorage.
+//   2. Shows the operator whether the backend has the credentials.
+//   3. Offers a one-click jump to the API Keys panel where they enter them.
+function SentinelTab({ onGoToApiKeys }: { onGoToApiKeys: () => void }) {
+  const [backendConfigured, setBackendConfigured] = useState<boolean | null>(null);
+  const [migrationResult, setMigrationResult] = useState<{ cleared: string[] } | null>(null);
+  const [refreshing, setRefreshing] = useState(false);
 
-  const save = () => {
-    setSentinelCredentials(clientId.trim(), clientSecret.trim());
-    setDirty(false);
-    setStatus({
-      ok: true,
-      msg: `Credentials saved to browser ${storageMode === 'session' ? 'session' : 'local'} storage.`,
-    });
-  };
+  useEffect(() => {
+    // One-time legacy browser-key wipe. Idempotent — does nothing on a
+    // fresh install. We do NOT silently POST any browser-stored values
+    // to the backend; operators who relied on them re-enter once in the
+    // API Keys panel. Doing the wipe regardless ensures pre-#298 secrets
+    // don't linger in localStorage indefinitely.
+    setMigrationResult(migrateLegacySentinelBrowserKeys());
 
-  const testConnection = async () => {
-    setTesting(true);
-    setStatus(null);
+    // Check whether the backend has SENTINEL_CLIENT_ID/SECRET set.
+    void checkBackendSentinelStatus().then(setBackendConfigured);
+  }, []);
+
+  const refresh = async () => {
+    setRefreshing(true);
     try {
-      const resp = await fetch(`${API_BASE}/api/sentinel/token`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-        body: new URLSearchParams({
-          client_id: clientId.trim(),
-          client_secret: clientSecret.trim(),
-        }),
-      });
-      if (resp.ok) {
-        setStatus({ ok: true, msg: 'Connected — token acquired successfully.' });
-      } else {
-        const text = await resp.text().catch(() => '');
-        setStatus({ ok: false, msg: `Auth failed (${resp.status}): ${text.slice(0, 120)}` });
-      }
-    } catch (err) {
-      const msg =
-        typeof err === 'object' && err !== null && 'message' in err
-          ? String((err as { message?: string }).message)
-          : 'unknown';
-      setStatus({ ok: false, msg: `Network error: ${msg}` });
+      // refreshSentinelStatus() invalidates the module-level cache so the
+      // next check actually hits the backend instead of returning the
+      // memoized value. Lazy-imported so SSR/tests don't choke.
+      const { refreshSentinelStatus } = await import('@/lib/sentinelHub');
+      refreshSentinelStatus();
+      const ok = await checkBackendSentinelStatus();
+      setBackendConfigured(ok);
     } finally {
-      setTesting(false);
+      setRefreshing(false);
     }
   };
 
-  const clear = () => {
-    clearSentinelCredentials();
-    setClientId('');
-    setClientSecret('');
-    setDirty(false);
-    setStatus({ ok: true, msg: 'Credentials cleared.' });
-  };
-
-  const inputCls =
-    'w-full bg-[var(--bg-primary)]/60 border border-[var(--border-primary)] px-3 py-2 text-[11px] font-mono text-[var(--text-secondary)] outline-none focus:border-purple-500 placeholder:text-[var(--text-muted)]/50 transition-colors';
+  const statusColor =
+    backendConfigured === null
+      ? 'text-[var(--text-muted)]'
+      : backendConfigured
+      ? 'text-green-400'
+      : 'text-yellow-400';
+  const statusLabel =
+    backendConfigured === null
+      ? 'CHECKING…'
+      : backendConfigured
+      ? 'CONFIGURED ON BACKEND'
+      : 'NOT CONFIGURED';
 
   return (
     <div className="flex-1 flex flex-col overflow-y-auto styled-scrollbar">
@@ -2733,106 +2735,73 @@ function SentinelTab() {
               </p>
               <p>
                 <span className="text-purple-400 font-bold">STEP 3:</span>{' '}
-                Paste both values in the fields below, hit{' '}
-                <span className="text-cyan-400">SAVE</span>, then{' '}
-                <span className="text-cyan-400">TEST CONNECTION</span> to verify.
-                That&apos;s it!
+                Paste both values into the <span className="text-cyan-400">API Keys</span> panel
+                under <span className="text-white">SENTINEL_CLIENT_ID</span> and{' '}
+                <span className="text-white">SENTINEL_CLIENT_SECRET</span>, then hit Save.
+                The backend uses them to mint short-lived tokens — your browser never sees
+                the secret again.
               </p>
             </div>
           </div>
         </div>
       </div>
 
-      {/* Credential Inputs */}
-      <div className="p-4 space-y-3">
-        <div>
-          <label className="text-[13px] font-mono text-[var(--text-muted)] tracking-widest mb-1 block">
-            CLIENT ID
-          </label>
-          <input
-            type="text"
-            value={clientId}
-            onChange={(e) => {
-              setClientId(e.target.value);
-              setDirty(true);
-            }}
-            placeholder="sh-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
-            spellCheck={false}
-            autoComplete="off"
-            className={inputCls}
-          />
+      {/* Backend status */}
+      <div className="mx-4 mt-3 p-3 border border-[var(--border-primary)] bg-[var(--bg-primary)]/30">
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-[13px] font-mono text-[var(--text-muted)] tracking-widest">
+            BACKEND STATUS
+          </span>
+          <span className={`text-[11px] font-mono font-bold ${statusColor}`}>
+            {statusLabel}
+          </span>
         </div>
-        <div>
-          <label className="text-[13px] font-mono text-[var(--text-muted)] tracking-widest mb-1 block">
-            CLIENT SECRET
-          </label>
-          <input
-            type={showSecret ? 'text' : 'password'}
-            value={clientSecret}
-            onChange={(e) => {
-              setClientSecret(e.target.value);
-              setDirty(true);
-            }}
-            placeholder="Paste client secret here..."
-            spellCheck={false}
-            autoComplete="new-password"
-            className={inputCls}
-          />
+        <p className="text-[13px] text-[var(--text-muted)] font-mono leading-relaxed">
+          {backendConfigured === false
+            ? 'Sentinel credentials are not yet set in the backend .env. Open the API Keys panel to enter them — the tile overlay and Sentinel-2 Intel Card will work as soon as both fields are saved.'
+            : backendConfigured === true
+            ? 'Sentinel credentials are configured on the backend. The dashboard fetches tokens automatically; your browser does not handle the secret.'
+            : 'Checking backend configuration…'}
+        </p>
+        <div className="mt-3 flex items-center gap-2">
           <button
-            type="button"
-            onClick={() => setShowSecret((current) => !current)}
-            className="mt-2 inline-flex items-center gap-1.5 text-[13px] font-mono text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors"
+            onClick={onGoToApiKeys}
+            className="flex-1 px-4 py-2 bg-purple-500/20 border border-purple-500/40 text-purple-400 hover:bg-purple-500/30 transition-colors text-sm font-mono flex items-center justify-center gap-1.5"
           >
-            {showSecret ? <EyeOff size={10} /> : <Eye size={10} />}
-            {showSecret ? 'HIDE SECRET' : 'SHOW SECRET'}
+            OPEN API KEYS PANEL
+          </button>
+          <button
+            onClick={refresh}
+            disabled={refreshing}
+            className="px-3 py-2 border border-[var(--border-primary)] text-[var(--text-muted)] hover:text-cyan-400 hover:border-cyan-500/50 transition-all text-sm font-mono disabled:opacity-40"
+            title="Re-check backend status"
+          >
+            {refreshing ? 'CHECKING…' : 'REFRESH'}
           </button>
         </div>
       </div>
 
-      {/* Status */}
-      {status && (
-        <div
-          className={`mx-4 mb-2 px-3 py-2 text-sm font-mono ${status.ok ? 'text-green-400 bg-green-950/20 border border-green-900/30' : 'text-red-400 bg-red-950/20 border border-red-900/30'}`}
-        >
-          {status.msg}
+      {/* Migration notice (only if we actually cleared anything) */}
+      {migrationResult && migrationResult.cleared.length > 0 && (
+        <div className="mx-4 mt-3 px-3 py-2 text-sm font-mono text-cyan-400 bg-cyan-950/20 border border-cyan-900/30">
+          <p className="font-bold mb-1">LEGACY BROWSER CREDENTIALS CLEARED</p>
+          <p className="text-[13px] leading-relaxed text-[var(--text-muted)]">
+            Found and removed pre-#298 Sentinel credentials from browser storage
+            ({migrationResult.cleared.join(', ')}). Re-enter them in the API Keys panel
+            above; they&apos;ll be stored server-side from now on and never sent back to
+            the browser.
+          </p>
         </div>
       )}
 
-      {/* Actions */}
+      {/* Footer + Usage Meter */}
       <div className="p-4 border-t border-[var(--border-primary)]/80 mt-auto">
-        <div className="flex items-center gap-2">
-          <button
-            onClick={save}
-            disabled={!dirty}
-            className="flex-1 px-4 py-2 bg-purple-500/20 border border-purple-500/40 text-purple-400 hover:bg-purple-500/30 transition-colors text-sm font-mono flex items-center justify-center gap-1.5 disabled:opacity-30 disabled:cursor-not-allowed"
-          >
-            <Save size={10} />
-            SAVE
-          </button>
-          <button
-            onClick={testConnection}
-            disabled={testing || !clientId || !clientSecret}
-            className="flex-1 px-4 py-2 bg-cyan-500/20 border border-cyan-500/40 text-cyan-400 hover:bg-cyan-500/30 transition-colors text-sm font-mono flex items-center justify-center gap-1.5 disabled:opacity-30 disabled:cursor-not-allowed"
-          >
-            {testing ? 'TESTING...' : 'TEST CONNECTION'}
-          </button>
-          <button
-            onClick={clear}
-            className="px-3 py-2 border border-[var(--border-primary)] text-[var(--text-muted)] hover:text-red-400 hover:border-red-500/50 hover:bg-red-950/10 transition-all text-sm font-mono flex items-center gap-1.5"
-            title="Clear credentials"
-          >
-            <Trash2 size={10} />
-          </button>
-        </div>
-        {/* Usage Meter */}
         <UsageMeter />
-
         <div className="mt-2 p-2 border border-[var(--border-primary)]/40 bg-[var(--bg-primary)]/30">
           <p className="text-[13px] text-[var(--text-muted)] font-mono leading-relaxed">
-            Credentials stay in browser-only storage and never touch ShadowBroker servers.
-            {storageMode === 'session'
-              ? ' Current privacy mode keeps them in session storage only.'
-              : ' Current privacy mode keeps them in local storage for persistence.'}
+            Credentials are stored in the backend <span className="text-cyan-400">.env</span>{' '}
+            and never sent to the browser. The tile proxy mints short-lived OAuth tokens
+            on demand using those values.
           </p>
         </div>
       </div>

frontend/src/lib/sentinelHub.ts

@@ -1,77 +1,137 @@
 /**
- * Sentinel Hub (Copernicus CDSE) — client-side token management & Process API tile fetcher.
+ * Sentinel Hub (Copernicus CDSE) — client-side token + Process API tile fetcher.
  *
- * Credentials are stored in browser-controlled storage only. In privacy/session
- * mode they stay session-scoped; otherwise they persist in local storage. Token
- * exchange is proxied through the ShadowBroker backend (/api/sentinel/token) to
- * avoid CORS blocks from the Copernicus identity provider. Credentials are
- * forwarded, never stored server-side.
+ * Issue #298 (tg12): Credentials are now stored server-side in the backend
+ * ``.env`` (managed through the existing ``/api/settings/api-keys`` flow,
+ * same as every other third-party API key). The browser no longer holds
+ * ``client_id`` / ``client_secret`` in localStorage or sessionStorage and
+ * no longer forwards them in proxy requests.
  *
- * Uses the Process API with inline evalscripts — no Instance ID / Configuration needed.
+ * Old browser-storage keys (``sb_sentinel_client_id`` / ``sb_sentinel_client_secret``
+ * / ``sb_sentinel_instance_id``) are migrated out by ``SettingsPanel`` on
+ * first mount after the upgrade — see ``migrateLegacySentinelBrowserKeys()``
+ * exported below.
  */
 
 import { API_BASE } from '@/lib/api';
-import {
-  getSensitiveBrowserItem,
-  getSensitiveBrowserStorageMode,
-  removeSensitiveBrowserItem,
-  setSensitiveBrowserItem,
-} from '@/lib/privacyBrowserStorage';
 
-// Token exchange proxied through our backend (Copernicus blocks browser CORS)
+// Token exchange proxied through our backend (Copernicus blocks browser CORS).
 const TOKEN_PROXY_URL = `${API_BASE}/api/sentinel/token`;
 
-// browser-storage keys
-const LS_CLIENT_ID = 'sb_sentinel_client_id';
-const LS_CLIENT_SECRET = 'sb_sentinel_client_secret';
-
 // In-memory token cache (never persisted)
 let cachedToken: string | null = null;
 let tokenExpiry = 0;
 // Dedup: only one in-flight token request at a time
 let _tokenPromise: Promise<string | null> | null = null;
 
-// ─── Credential helpers ────────────────────────────────────────────────────
+// In-memory cache of "does the backend have Sentinel credentials configured?"
+// so the rest of the UI can short-circuit tile load attempts without a server
+// round-trip per tile. Refreshed by callers via `refreshSentinelStatus()`.
+let _backendCredentialsConfigured: boolean | null = null;
+let _backendStatusPromise: Promise<boolean> | null = null;
 
-export function getSentinelCredentials(): {
-  clientId: string;
-  clientSecret: string;
-} {
-  if (typeof window === 'undefined') return { clientId: '', clientSecret: '' };
-  return {
-    clientId: getSensitiveBrowserItem(LS_CLIENT_ID) || '',
-    clientSecret: getSensitiveBrowserItem(LS_CLIENT_SECRET) || '',
-  };
+// ─── Credential status (server-side) ───────────────────────────────────────
+
+/**
+ * Ask the backend whether Sentinel credentials are configured in ``.env``.
+ * Caches the result in memory; call ``refreshSentinelStatus()`` after the
+ * operator saves new API keys in the settings panel.
+ *
+ * Returns ``false`` on network errors so the UI fails safely (no broken
+ * tile requests). Never returns the secret itself — that stays server-side.
+ */
+export async function checkBackendSentinelStatus(): Promise<boolean> {
+  if (_backendCredentialsConfigured !== null) return _backendCredentialsConfigured;
+  if (_backendStatusPromise) return _backendStatusPromise;
+
+  _backendStatusPromise = (async () => {
+    try {
+      const resp = await fetch(`${API_BASE}/api/settings/api-keys`, {
+        headers: { Accept: 'application/json' },
+      });
+      if (!resp.ok) return false;
+      const list = await resp.json();
+      // /api/settings/api-keys returns an array of { id, env_key, is_set, ... }
+      const ids = new Set(['sentinel_client_id', 'sentinel_client_secret']);
+      const configured = Array.isArray(list)
+        && list.filter((row: { id?: string; is_set?: boolean }) =>
+              row && row.id && ids.has(row.id) && row.is_set === true,
+           ).length === 2;
+      _backendCredentialsConfigured = configured;
+      return configured;
+    } catch {
+      _backendCredentialsConfigured = false;
+      return false;
+    } finally {
+      _backendStatusPromise = null;
+    }
+  })();
+
+  return _backendStatusPromise;
 }
 
-export function setSentinelCredentials(clientId: string, clientSecret: string): void {
-  setSensitiveBrowserItem(LS_CLIENT_ID, clientId);
-  setSensitiveBrowserItem(LS_CLIENT_SECRET, clientSecret);
-  // Invalidate cached token when credentials change
+/** Invalidate the cached status — call this after the API Keys panel saves. */
+export function refreshSentinelStatus(): void {
+  _backendCredentialsConfigured = null;
+  // Drop any cached token too — credentials may have changed.
   cachedToken = null;
   tokenExpiry = 0;
 }
 
-export function clearSentinelCredentials(): void {
-  removeSensitiveBrowserItem(LS_CLIENT_ID);
-  removeSensitiveBrowserItem(LS_CLIENT_SECRET);
-  // Also remove legacy instance ID if present
-  removeSensitiveBrowserItem('sb_sentinel_instance_id');
-  if (typeof window !== 'undefined') {
-    localStorage.removeItem('sb_sentinel_instance_id');
-    sessionStorage.removeItem('sb_sentinel_instance_id');
-  }
-  cachedToken = null;
-  tokenExpiry = 0;
-}
-
-export function getSentinelCredentialStorageMode(): 'local' | 'session' {
-  return getSensitiveBrowserStorageMode();
+/**
+ * Synchronous getter — returns the last known status without a network call.
+ * Returns ``null`` until ``checkBackendSentinelStatus()`` has run at least once.
+ */
+export function getCachedSentinelStatus(): boolean | null {
+  return _backendCredentialsConfigured;
 }
 
+/**
+ * Back-compat shim. Pre-#298 callers asked ``hasSentinelCredentials()`` to
+ * decide whether to render the Sentinel layer / open the API key prompt.
+ * The credential now lives server-side, so this is just the cached
+ * server-status check. Returns ``false`` until the first
+ * ``checkBackendSentinelStatus()`` resolves (callers should kick that off
+ * once at app startup — see ``page.tsx`` mount effect).
+ */
 export function hasSentinelCredentials(): boolean {
-  const { clientId, clientSecret } = getSentinelCredentials();
-  return Boolean(clientId && clientSecret);
+  return _backendCredentialsConfigured === true;
+}
+
+/**
+ * One-time migration helper: clear the legacy browser-storage keys that
+ * pre-#298 versions used to persist Sentinel credentials. Idempotent and
+ * safe to call on every page load — does nothing if no keys are present.
+ *
+ * Called by ``SettingsPanel`` on mount. We do NOT auto-POST the legacy
+ * browser values to the backend, because doing so would silently migrate
+ * a secret across a trust boundary without operator consent. Operators
+ * who relied on browser-stored credentials will re-enter them once in
+ * the API Keys panel, and the legacy keys get wiped here.
+ */
+export function migrateLegacySentinelBrowserKeys(): { cleared: string[] } {
+  if (typeof window === 'undefined') return { cleared: [] };
+  const legacy = [
+    'sb_sentinel_client_id',
+    'sb_sentinel_client_secret',
+    'sb_sentinel_instance_id',
+  ];
+  const cleared: string[] = [];
+  for (const key of legacy) {
+    try {
+      if (window.localStorage?.getItem(key) !== null) {
+        window.localStorage.removeItem(key);
+        cleared.push(key);
+      }
+    } catch { /* ignore quota / privacy mode errors */ }
+    try {
+      if (window.sessionStorage?.getItem(key) !== null) {
+        window.sessionStorage.removeItem(key);
+        if (!cleared.includes(key)) cleared.push(key);
+      }
+    } catch { /* ignore */ }
+  }
+  return { cleared };
 }
 
 // ─── OAuth2 token ──────────────────────────────────────────────────────────
@@ -79,14 +139,16 @@ export function hasSentinelCredentials(): boolean {
 /**
  * Fetch an OAuth2 access token using the client_credentials grant.
  * Caches in memory; auto-refreshes 30 s before expiry.
+ *
+ * The request body NO LONGER carries client_id/secret — the backend
+ * resolves credentials from its ``.env`` via the API Keys flow. The
+ * server-side proxy still accepts body credentials for legacy callers,
+ * but the dashboard does not supply them.
  */
 export function getSentinelToken(): Promise<string | null> {
   // Return cached token if still valid (with 30 s margin)
   if (cachedToken && Date.now() < tokenExpiry - 30_000) return Promise.resolve(cachedToken);
 
-  const { clientId, clientSecret } = getSentinelCredentials();
-  if (!clientId || !clientSecret) return Promise.resolve(null);
-
   // Dedup: reuse in-flight request so 20 tiles don't each trigger a token fetch
   if (_tokenPromise) return _tokenPromise;
 
@@ -94,11 +156,9 @@ export function getSentinelToken(): Promise<string | null> {
     try {
       const resp = await fetch(TOKEN_PROXY_URL, {
         method: 'POST',
+        // Backend resolves credentials from env. Empty body = "use server-side".
         headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-        body: new URLSearchParams({
-          client_id: clientId,
-          client_secret: clientSecret,
-        }),
+        body: new URLSearchParams({}),
       });
 
       if (!resp.ok) {
@@ -131,6 +191,8 @@ const TILE_PROXY_URL = `${API_BASE}/api/sentinel/tile`;
 /**
  * Fetch a single 256×256 tile via backend proxy to Sentinel Hub Process API.
  * Returns a PNG ArrayBuffer or null on failure.
+ *
+ * Body no longer carries client_id/secret — the backend uses .env values.
  */
 export async function fetchSentinelTile(
   z: number,
@@ -139,21 +201,10 @@ export async function fetchSentinelTile(
   preset: string,
   date: string,
 ): Promise<ArrayBuffer | null> {
-  const { clientId, clientSecret } = getSentinelCredentials();
-  if (!clientId || !clientSecret) return null;
-
   const resp = await fetch(TILE_PROXY_URL, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-      client_id: clientId,
-      client_secret: clientSecret,
-      preset,
-      date,
-      z,
-      x,
-      y,
-    }),
+    body: JSON.stringify({ preset, date, z, x, y }),
   });
 
   if (!resp.ok) return null;