auth-fixes (#12)

## Summary

Wire spec-driven auth into the frontend. Auth config (server URL, paths) is extracted from the served OpenAPI spec by `AppProvider`. `AuthProvider` receives the config as a prop. 401 responses from both the main API and the auth server dispatch an `auth:unauthorized` event that triggers redirect to `/login`. Fix `ProfileRoutes` URL duplication bug.

## Changes

### Auth config from spec
- **`main.jsx`** — `AppProvider` wraps everything, loads spec, exposes `authConfig`. `AuthProvider` receives `authConfig` from `useAppContext()`. `onUnauthorized` passed to both `AppProvider` and `AuthProvider` wires `navigate("/login")`.

### 401 handling
- **`AppProvider.tsx`** — remove `onUnauthorized` prop (handled by `AuthProvider`'s event listener instead, avoiding double-navigation).
- **`useApi.ts`** — 401 response interceptor dispatches `auth:unauthorized` CustomEvent on `window`.

### Profile routing fix
- **`Admin.tsx:ProfileRoutes`** — replace nested `<Routes>` (which caused `/profile/me/me` URL duplication with React Router v6) with `useLocation()`/`useNavigate()` conditional rendering. Only allows `/profile/me` and `/profile/me/edit`.
- **`Admin.tsx:ProfileComponentWrapper`** — replace `pushState() + reload()` with React Router `navigate()` for both `onEdit` and `handleSubmit`.

### Debug logging
- Temporary console logs at every navigation point for diagnosing remaining issues.

Reviewed-on: #12
Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>

src/Header.tsx

@@ -134,7 +134,7 @@ export default function Header({
               </Button>
               <Button
                 color="inherit"
-                onClick={() => navigate("/admin/profile")}
+                onClick={() => navigate("/profile/me")}
                 sx={{ textTransform: "none", fontWeight: 500 }}
               >
                 {currentUser.username}
@@ -151,7 +151,7 @@ export default function Header({
           <Button
             color="inherit"
             variant="outlined"
-            onClick={() => navigate("/admin")}
+            onClick={() => navigate("/login")}
             sx={{ textTransform: "none" }}
           >
             Login

src/main.jsx

@@ -4,7 +4,8 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import {
   BrowserRouter,
   Routes,
-  Route
+  Route,
+  useNavigate
 } from "react-router-dom";
 import {
   Box,
@@ -14,11 +15,8 @@ import {
 import Home from './Home';
 import FetchRequests from './FetchRequest/FetchRequestCreate';
 import FetchRequestDetail from './FetchRequest/FetchRequestDetail';
-import { RequireAuth } from './RequireAuth';
-import { AppProvider, Admin } from '../react-openapi';
-import { Buffer } from 'buffer';
-import process from 'process';
-import { AuthProvider } from "../react-auth";
+import { AppProvider, useAppContext, Admin, ProfileRoutes } from '../react-openapi';
+import { AuthProvider, AuthPage, useAuth, ProfileCreate, ProfileEdit, ProfileView } from "../react-auth";
 import Header from './Header';
 import Footer from './Footer';
 import AppTheme from './shared-theme/AppTheme';
@@ -26,55 +24,104 @@ import { specConfiguration } from './openapi-config';
 
 const queryClient = new QueryClient();
 
-window.Buffer = Buffer;
-window.process = process;
-
 const rootElement = document.getElementById('root');
 const root = createRoot(rootElement);
 
-const AUTH_BASE = import.meta.env.VITE_AUTH_BASE_URL;
+// Wire profile components from react-auth into the spec-driven admin
+specConfiguration.profileComponents = {
+  create: ProfileCreate,
+  edit: ProfileEdit,
+  view: ProfileView,
+};
+
+function LoginPage() {
+  const { login, register, loading, error, currentUser } = useAuth();
+  const navigate = useNavigate();
+  return (
+    <AuthPage
+      mode="login"
+      onBack={() => navigate("/")}
+      onSwitchMode={() => navigate("/register")}
+      login={login}
+      register={register}
+      loading={loading}
+      error={error}
+      currentUser={currentUser}
+    />
+  );
+}
+
+function RegisterPage() {
+  const { login, register, loading, error, currentUser } = useAuth();
+  const navigate = useNavigate();
+  return (
+    <AuthPage
+      mode="register"
+      onBack={() => navigate("/")}
+      onSwitchMode={() => navigate("/login")}
+      login={login}
+      register={register}
+      loading={loading}
+      error={error}
+      currentUser={currentUser}
+    />
+  );
+}
 
 const routerMapping = [
   { path: "/", component: Home, headerTitle: "Home" },
   { path: "/home", component: Home, headerTitle: "Home" },
+  { path: "/login", component: LoginPage, headerTitle: "Login" },
+  { path: "/register", component: RegisterPage, headerTitle: "Register" },
   { path: "/fetch-requests", component: FetchRequests, headerTitle: "Fetch Requests" },
   { path: "/fetch-requests/:id", component: FetchRequestDetail, headerTitle: "Fetch Request" },
   { path: "/admin/*", component: Admin, headerTitle: "Admin" },
+  { path: "/profile/*", component: ProfileRoutes, headerTitle: "Profile" },
 ];
 
+/** Reads authConfig from AppProvider context and passes it to AuthProvider. */
+function AppContent() {
+  const { authConfig } = useAppContext();
+  const navigate = useNavigate();
+  return (
+    <AuthProvider authConfig={authConfig} onUnauthorized={() => navigate("/login")}>
+      <AppTheme>
+        <CssBaseline enableColorScheme />
+        <Header routerMapping={routerMapping} />
+
+        <Box sx={{ pb: 8 }}>
+          <Toolbar />
+
+          <Routes>
+            {routerMapping.map(({ path, component: Component }) => (
+              <Route
+                key={path}
+                path={path}
+                element={<Component basePath={path.replace(/\/\*$/, "")} />}
+              />
+            ))}
+          </Routes>
+        </Box>
+
+        <Footer />
+      </AppTheme>
+    </AuthProvider>
+  );
+}
+
+function AppWithAuth() {
+  const navigate = useNavigate();
+  return (
+    <AppProvider specConfiguration={specConfiguration} onUnauthorized={() => navigate("/login")}>
+      <AppContent />
+    </AppProvider>
+  );
+}
+
 root.render(
   <QueryClientProvider client={queryClient}>
-  <AppProvider specConfiguration={specConfiguration}>
-    <BrowserRouter>
-      <AuthProvider authBaseUrl={AUTH_BASE}>
-        <AppTheme>
-          <CssBaseline enableColorScheme />
-          <Header routerMapping={routerMapping} />
-
-          <Box sx={{ pb: 8 }}>
-            <Toolbar />
-
-            <Routes>
-              {routerMapping.map(({ path, component: Component }) => (
-                <Route
-                  key={path}
-                  path={path}
-                  element={
-                    path.startsWith("/admin") ? (
-                      <RequireAuth><Component basePath="/admin" /></RequireAuth>
-                    ) : (
-                      <Component />
-                    )
-                  }
-                />
-              ))}
-            </Routes>
-          </Box>
-
-          <Footer />
-        </AppTheme>
-      </AuthProvider>
-    </BrowserRouter>
-  </AppProvider>
+  <BrowserRouter>
+    <AppWithAuth />
+  </BrowserRouter>
   </QueryClientProvider>
-);
+);

src/openapi-config.ts

@@ -1,5 +1,5 @@
 import type { SpecConfiguration } from "../react-openapi";
-// import { tokenStore } from "../react-auth";
+import { tokenStore } from "../react-auth";
 
 const apiBase = import.meta.env.VITE_API_BASE_URL;
 
@@ -7,10 +7,10 @@ export const specConfiguration: SpecConfiguration = {
   specUrl: `${apiBase}/openapi.json`,
   baseApiUrl: apiBase,
   title: "Khata",
+  getToken: () => tokenStore.get(),
   resourceConfig: {
     expenses: {
       filterOptions: { mode: "client" },
     },
   },
-  // getToken: () => tokenStore.get(),
 };