add auth

frontend/src/App.tsx

@@ -3,9 +3,11 @@ import { Alert, Box, CssBaseline, LinearProgress, Snackbar, ThemeProvider, useMe
 import { Navigate, Route, Routes } from "react-router-dom";
 
 import AppShell from "./components/AppShell";
+import { AuthProvider, useAuth } from "./lib/auth";
 import { SettingsProvider, useSettings } from "./lib/settings";
 import { buildTheme, type ThemeMode } from "./theme";
 import BlockerPage from "./pages/BlockerPage";
+import LoginPage from "./pages/LoginPage";
 import ReportPage from "./pages/ReportPage";
 import SettingsPage from "./pages/SettingsPage";
 import TasksPage from "./pages/TasksPage";
@@ -66,10 +68,43 @@ function Shell() {
   );
 }
 
-export default function App() {
+function Gate() {
+  const { me, loading } = useAuth();
+  const prefersDark = useMediaQuery("(prefers-color-scheme: dark)");
+
+  if (loading || !me) {
+    // The paper theme, so the blank moment before `/api/auth/me` answers
+    // doesn't flash a default MUI white.
+    const theme = buildTheme(prefersDark ? "dark" : "light", false);
+    return (
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <LinearProgress />
+      </ThemeProvider>
+    );
+  }
+
+  if (!me.authenticated) {
+    const theme = buildTheme(prefersDark ? "dark" : "light", false);
+    return (
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <LoginPage />
+      </ThemeProvider>
+    );
+  }
+
   return (
     <SettingsProvider>
       <Shell />
     </SettingsProvider>
   );
 }
+
+export default function App() {
+  return (
+    <AuthProvider>
+      <Gate />
+    </AuthProvider>
+  );
+}