feat(auth): enhance error handling in requireAuth and add authError state in AuthProvider

frontend/src/App.tsx

@@ -96,7 +96,7 @@ export default function App() {
 }
 
 function AppRouter() {
-	const { user, authState, loading } = useAuth();
+	const { user, authState, loading, authError } = useAuth();
 	const location = useLocation();
 	const navigate = useNavigate();
 
@@ -112,8 +112,45 @@ function AppRouter() {
 		);
 	}
 
+	// Show error if we couldn't connect to the server
+	if (authError) {
+		return (
+			<div className="auth-container">
+				<div className="auth-card" style={{ textAlign: "center" }}>
+					<h1 className="auth-title">💊 MedAssist</h1>
+					<div className="auth-error" style={{ marginBottom: "1rem" }}>
+						<strong>Connection Error</strong><br />
+						{authError}
+					</div>
+					<p style={{ fontSize: "0.9rem", color: "var(--text-muted)" }}>
+						Please check if the server is running and try again.
+					</p>
+					<button 
+						className="btn btn-primary" 
+						onClick={() => window.location.reload()}
+						style={{ marginTop: "1rem" }}
+					>
+						Retry
+					</button>
+				</div>
+			</div>
+		);
+	}
+
+	// If auth state is null (shouldn't happen after loading, but be safe)
+	if (!authState) {
+		return (
+			<div className="auth-container">
+				<div className="auth-card" style={{ textAlign: "center" }}>
+					<h1 className="auth-title">💊 MedAssist</h1>
+					<p>Initializing...</p>
+				</div>
+			</div>
+		);
+	}
+
 	// If auth is enabled
-	if (authState?.authEnabled) {
+	if (authState.authEnabled) {
 		// Need to register first user
 		if (authState.needsSetup) {
 			return <AuthPage />;

frontend/src/components/Auth.tsx

@@ -21,6 +21,7 @@ interface AuthContextType {
   user: User | null;
   authState: AuthState | null;
   loading: boolean;
+  authError: string | null;
   login: (username: string, password: string) => Promise<void>;
   register: (username: string, password: string) => Promise<void>;
   logout: () => Promise<void>;
@@ -48,6 +49,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   const [user, setUser] = useState<User | null>(null);
   const [authState, setAuthState] = useState<AuthState | null>(null);
   const [loading, setLoading] = useState(true);
+  const [authError, setAuthError] = useState<string | null>(null);
 
   // Fetch auth state on mount
   useEffect(() => {
@@ -56,7 +58,11 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 
   async function fetchAuthState() {
     try {
+      setAuthError(null);
       const res = await fetch("/api/auth/state");
+      if (!res.ok) {
+        throw new Error(`Server error: ${res.status}`);
+      }
       const state = await res.json();
       setAuthState(state);
 
@@ -66,6 +72,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
       }
     } catch (err) {
       console.error("Failed to fetch auth state:", err);
+      setAuthError(err instanceof Error ? err.message : "Failed to connect to server");
     } finally {
       setLoading(false);
     }
@@ -147,7 +154,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   }
 
   return (
-    <AuthContext.Provider value={{ user, authState, loading, login, register, logout, refreshUser, updateProfile }}>
+    <AuthContext.Provider value={{ user, authState, loading, authError, login, register, logout, refreshUser, updateProfile }}>
       {children}
     </AuthContext.Provider>
   );