Implement session management in the admin application by introducing session check API endpoint and updating authentication state handling. Refactor App component to manage authentication state with improved error handling and loading indicators.

Author: iutx

admin/src/main.tsx

@@ -19,7 +19,7 @@ import "./index.css";
 import { useListPageSize } from "./useListPageSize";
 import { AuditSection } from "./AuditSection";
 import { SettingsSection } from "./SettingsSection";
-import { api, withMinRefreshDuration } from "./lib/api";
+import { api, ApiError, withMinRefreshDuration } from "./lib/api";
 import {
   Button,
   EmptyState,
@@ -55,9 +55,12 @@ type Notice = {
 
 type AppSection = "bots" | "audit" | "settings";
 
+type AuthState = "checking" | "signed-out" | "signed-in";
+
 function App() {
   const reduceMotion = useReducedMotion();
-  const [isSignedIn, setIsSignedIn] = useState(false);
+  const [authState, setAuthState] = useState<AuthState>("checking");
+  const isSignedIn = authState === "signed-in";
   const [password, setPassword] = useState("");
   const [label, setLabel] = useState("");
   const [token, setToken] = useState("");
@@ -100,20 +103,43 @@ function App() {
         const data = await api<BotsResponse>("/api/bots");
         setBots(data.bots);
       });
+    } catch (error) {
+      if (error instanceof ApiError && error.status === 401) {
+        setAuthState("signed-out");
+        return;
+      }
+      setNotice({ kind: "error", text: "Refresh failed." });
     } finally {
       setIsRefreshingBots(false);
     }
   }, []);
 
+  useEffect(() => {
+    let cancelled = false;
+
+    void api<void>("/api/session")
+      .then(() => {
+        if (!cancelled) {
+          setAuthState("signed-in");
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setAuthState("signed-out");
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
 
   useEffect(() => {
     if (!isSignedIn) {
       return;
     }
 
-    void loadBots().catch(() => {
-      setNotice({ kind: "error", text: "Refresh failed." });
-    });
+    void loadBots();
   }, [isSignedIn, loadBots]);
 
 
@@ -128,7 +154,7 @@ function App() {
         body: JSON.stringify({ password }),
       });
       setPassword("");
-      setIsSignedIn(true);
+      setAuthState("signed-in");
       setNotice({ kind: "idle", text: "" });
     } catch {
       setNotice({ kind: "error", text: "Wrong password." });
@@ -180,9 +206,17 @@ function App() {
 
   const pageTransition = reduceMotion ? { duration: 0 } : { duration: 0.4, ease: [0.25, 0.1, 0.25, 1] as const };
 
+  if (authState === "checking") {
+    return (
+      <motion.div className="flex min-h-dvh items-center justify-center p-6" aria-busy aria-label="Checking session">
+        <Loader2 size={28} className="animate-spin text-zinc-500" aria-hidden />
+      </motion.div>
+    );
+  }
+
   return (
     <AnimatePresence mode="wait">
-      {!isSignedIn ? (
+      {authState === "signed-out" ? (
         <motion.div
           key="login"
           className="flex min-h-dvh items-center justify-center p-6"

src/app.rs

@@ -101,6 +101,7 @@ pub fn router(state: Arc<AppState>) -> Router {
         .route("/admin", get(admin_page))
         .route("/healthz", get(healthz))
         .route("/api/login", post(login))
+        .route("/api/session", get(session_check))
         .route("/api/bots", get(list_bots).post(register_bot))
         .route("/api/bots/{token_hash}", delete(delete_bot))
         .route("/api/settings", get(get_settings).put(update_settings))
@@ -316,6 +317,14 @@ fn with_security_headers(mut response: Response) -> Response {
     response
 }
 
+async fn session_check(State(state): State<Arc<AppState>>, headers: HeaderMap) -> impl IntoResponse {
+    if is_authorized(&state, &headers) {
+        StatusCode::NO_CONTENT.into_response()
+    } else {
+        StatusCode::UNAUTHORIZED.into_response()
+    }
+}
+
 async fn login(
     State(state): State<Arc<AppState>>,
     Json(payload): Json<LoginRequest>,
@@ -638,6 +647,25 @@ mod tests {
         assert!(response.headers().get(header::SET_COOKIE).is_some());
     }
 
+    #[tokio::test]
+    async fn session_check_accepts_valid_cookie() {
+        let state = test_state();
+        let token = state.auth.read().unwrap().session_token().to_string();
+
+        let response = router(state)
+            .oneshot(
+                Request::builder()
+                    .uri("/api/session")
+                    .header(header::COOKIE, format!("{SESSION_COOKIE}={token}"))
+                    .body(Body::empty())
+                    .unwrap(),
+            )
+            .await
+            .unwrap();
+
+        assert_eq!(response.status(), StatusCode::NO_CONTENT);
+    }
+
     #[tokio::test]
     async fn rejects_admin_api_without_session() {
         let response = router(test_state())