feat(frontend): Refactor to cookie-based auth and add /api/v1 prefix

frontend/src/App.tsx

@@ -2,23 +2,66 @@ import { useState, useEffect } from "react"
 import { MainLayout } from "./components/layout/MainLayout"
 import { LoginForm } from "./components/auth/LoginForm"
 import { RegisterForm } from "./components/auth/RegisterForm"
-import { AuthService } from "./services/auth"
+import { AuthService, type UserResponse } from "./services/auth"
 
 function App() {
   const [isAuthenticated, setIsAuthenticated] = useState(false)
+  const [user, setUser] = useState<UserResponse | null>(null)
   const [authMode, setAuthMode] = useState<"login" | "register">("login")
+  const [isLoading, setIsLoading] = useState(true)
 
   useEffect(() => {
-    setIsAuthenticated(AuthService.isAuthenticated())
+    const initAuth = async () => {
+      // Check for token in URL (OIDC callback)
+      const urlParams = new URLSearchParams(window.location.search)
+      const tokenFromUrl = urlParams.get("token")
+      if (tokenFromUrl) {
+        localStorage.setItem("token", tokenFromUrl)
+        // Clean URL
+        window.history.replaceState({}, document.title, "/")
+      }
+
+      const authStatus = AuthService.isAuthenticated()
+      setIsAuthenticated(authStatus)
+      
+      if (authStatus) {
+        try {
+          const userData = await AuthService.getMe()
+          setUser(userData)
+        } catch (err) {
+          console.error("Failed to fetch user profile:", err)
+          AuthService.logout()
+          setIsAuthenticated(false)
+        }
+      }
+      setIsLoading(false)
+    }
+
+    initAuth()
   }, [])
 
-  const handleAuthSuccess = () => {
+  const handleAuthSuccess = async () => {
     setIsAuthenticated(true)
+    try {
+      const userData = await AuthService.getMe()
+      setUser(userData)
+    } catch (err) {
+      console.error("Failed to fetch user profile after login:", err)
+    }
   }
 
   const handleLogout = () => {
     AuthService.logout()
     setIsAuthenticated(false)
+    setUser(null)
+  }
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+      </div>
+    )
   }
 
   if (!isAuthenticated) {
@@ -43,7 +86,10 @@ function App() {
     <MainLayout>
       <div className="flex flex-col gap-4">
         <div className="flex justify-between items-center">
-          <h1 className="text-2xl font-bold">Welcome to Election Analytics</h1>
+          <div>
+            <h1 className="text-2xl font-bold">Welcome, {user?.display_name || user?.email || "User"}!</h1>
+            <p className="text-sm text-muted-foreground">{user?.email}</p>
+          </div>
           <button
             onClick={handleLogout}
             className="text-sm text-muted-foreground hover:text-primary underline"
@@ -51,7 +97,7 @@ function App() {
             Logout
           </button>
         </div>
-        <p className="text-muted-foreground">
+        <p className="text-muted-foreground mt-4">
           Select a conversation from the sidebar or start a new one to begin your analysis.
         </p>
       </div>