Improve login UI with error handling and callback page

crawler/frontend/src/App.tsx

@@ -1,9 +1,10 @@
 import type { User } from 'oidc-client-ts';
 import { useEffect, useState, useRef, useCallback } from 'react';
 import './App.css';
-import { getUser, handleCallback } from './auth/authService';
+import { getUser } from './auth/authService';
 import AlertError from './components/AlertError';
 import LoginModal from './components/LoginModal';
+import AuthCallback from './components/AuthCallback';
 import { Map } from './components/Map';
 import { FilterPanel, type ParameterValues, DEFAULT_FILTER_VALUES } from './components/FilterPanel';
 import { Header } from './components/Header';
@@ -34,15 +35,12 @@ function App() {
   // Ref to track if initial load has been triggered
   const initialLoadTriggeredRef = useRef(false);
 
-  useEffect(() => {
-    // Check if this is a callback from Authentik (after login)
-    if (window.location.pathname === '/callback') {
-      handleCallback().then(() => {
-        window.location.href = '/'; // Redirect to home after login
-      });
-      return;
-    }
+  // Check if this is the callback route - render dedicated component
+  if (window.location.pathname === '/callback') {
+    return <AuthCallback />;
+  }
 
+  useEffect(() => {
     // Load user data
     getUser().then(setUser);
   }, []);