UI/auth

web-frontend/package.json

@@ -53,6 +53,7 @@
     "@types/recharts": "^1.8.23",
     "@vitejs/plugin-react": "^5.0.1",
     "@vitest/coverage-v8": "^3.2.4",
+    "dotenv": "^17.2.3",
     "jsdom": "^26.1.0",
     "playwright": "^1.52.0",
     "prettier": "^3.6.2",

web-frontend/src/App.tsx

@@ -1,13 +1,17 @@
 import Container from "@mui/material/Container";
 import ErrorBoundary from "./components/error-boundary/error-boundary";
 import { Outlet } from "react-router-dom";
-import TiledAppBar from "./components/tiled-app-bar/tiled-app-bar";
+import { TiledAppBar } from "./components/tiled-app-bar/tiled-app-bar";
 import { useEffect, useState } from "react";
-import { fetchSettings } from "./settings";
+import { fetchSettings, getApiBaseUrl } from "./settings";
 import { SettingsContext, emptySettings } from "./context/settings";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { Suspense, lazy } from "react";
 import Skeleton from "@mui/material/Skeleton";
+import { LoginPage } from "./components/login-page/login-page";
+import { ProtectedRoute } from "./components/protected-route";
+import { Navigate } from "react-router-dom";
+import { AuthProvider } from "./auth/auth-provider";
 
 const Browse = lazy(() => import("./routes/browse"));
 
@@ -26,37 +30,49 @@ function MainContainer() {
 const basename = import.meta.env.BASE_URL;
 
 function App() {
-  const [settings, setSettings] = useState(emptySettings);
+  const [settings, setSettings] = useState({
+    ...emptySettings,
+    api_url: `${getApiBaseUrl()}/api/v1`,
+  });
+
   useEffect(() => {
     const controller = new AbortController();
-    async function initSettingsContext() {
-      const data = await fetchSettings(controller.signal);
-      setSettings(data);
-    }
-    initSettingsContext();
+    fetchSettings(controller.signal).then(setSettings);
+    return () => controller.abort();
   }, []);
   return (
-    <SettingsContext.Provider value={settings}>
-      <BrowserRouter basename={basename}>
-        <ErrorBoundary>
-          <Suspense fallback={<Skeleton variant="rectangular" />}>
-            <Routes>
-              <Route path="/" element={<MainContainer />}>
-                <Route path="/browse/*" element={<Browse />} />
-              </Route>
-              <Route
-                path="*"
-                element={
-                  <main style={{ padding: "1rem" }}>
-                    <p>There's nothing here!</p>
-                  </main>
-                }
-              />
-            </Routes>
-          </Suspense>
-        </ErrorBoundary>
-      </BrowserRouter>
-    </SettingsContext.Provider>
+    <BrowserRouter basename={basename}>
+      <ErrorBoundary>
+        <AuthProvider>
+          <SettingsContext.Provider value={settings}>
+            <Suspense fallback={<Skeleton variant="rectangular" />}>
+              <Routes>
+                <Route path="/login" element={<LoginPage />} />
+                <Route
+                  path="/"
+                  element={
+                    <ProtectedRoute>
+                      <MainContainer />
+                    </ProtectedRoute>
+                  }
+                >
+                  <Route index element={<Navigate to="/browse" replace />} />
+                  <Route path="browse/*" element={<Browse />} />
+                </Route>
+                <Route
+                  path="*"
+                  element={
+                    <main style={{ padding: "1rem" }}>
+                      <p>There's nothing here!</p>
+                    </main>
+                  }
+                />
+              </Routes>
+            </Suspense>
+          </SettingsContext.Provider>
+        </AuthProvider>
+      </ErrorBoundary>
+    </BrowserRouter>
   );
 }
 

web-frontend/src/auth/auth-api.ts

@@ -0,0 +1,62 @@
+import { AuthConfig, AuthTokens, User } from "./types";
+const API_BASE = "/api/v1";
+
+export const authService = {
+  async getAuthConfig(): Promise<AuthConfig> {
+    const res = await fetch(`${API_BASE}/`);
+    if (!res.ok) throw new Error("Failed to fetch auth config");
+
+    const data = await res.json();
+    return data.authentication;
+  },
+
+  async loginWithPassword(
+    provider: string,
+    username: string,
+    password: string,
+  ): Promise<AuthTokens> {
+    const body = new URLSearchParams({ username, password });
+
+    const res = await fetch(`${API_BASE}/auth/provider/${provider}/token`, {
+      method: "POST",
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      body,
+    });
+
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ detail: "Login failed" }));
+      throw new Error(err.detail || "Invalid credentials");
+    }
+
+    return res.json();
+  },
+
+  async refreshSession(refreshToken: string): Promise<AuthTokens> {
+    const res = await fetch(`${API_BASE}/auth/session/refresh`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ refresh_token: refreshToken }),
+    });
+
+    if (!res.ok) throw new Error("Failed to refresh session");
+    return res.json();
+  },
+
+  async getCurrentUser(accessToken: string): Promise<User> {
+    const res = await fetch(`${API_BASE}/auth/whoami`, {
+      headers: { Authorization: `Bearer ${accessToken}` },
+    });
+
+    if (!res.ok) throw new Error("Failed to get user info");
+
+    const data = await res.json();
+    return data.data;
+  },
+
+  async logout(accessToken: string): Promise<void> {
+    await fetch(`${API_BASE}/auth/logout`, {
+      method: "POST",
+      headers: { Authorization: `Bearer ${accessToken}` },
+    });
+  },
+};

web-frontend/src/auth/auth-context.tsx

@@ -0,0 +1,25 @@
+import { createContext, useContext } from "react";
+import { AuthState, AuthConfig } from "./types";
+
+interface AuthContextType extends AuthState {
+  login: (
+    provider: string,
+    username: string,
+    password: string,
+  ) => Promise<void>;
+  logout: () => Promise<void>;
+  refreshTokens: () => Promise<void>;
+  authConfig: AuthConfig | null;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("useAuth must be used within AuthProvider");
+  }
+  return context;
+}
+
+export { AuthContext };