require auth

react-openapi/src/context/AppProvider.tsx

@@ -27,7 +27,7 @@ export function AppProvider({ specConfiguration, children }: AppProviderProps) {
 
         const spec = await loadSpec(specConfiguration.specUrl);
 
-        const allMessages = validateSpec(spec);
+        const allMessages = validateSpec(spec, specConfiguration);
 
         const errs = allMessages.filter((m) => m.type === "error");
         const warns = allMessages.filter((m) => m.type === "warning");

react-openapi/src/hooks/useApi.ts

@@ -1,4 +1,5 @@
 import axios, { AxiosInstance } from "axios";
+import { tokenStore } from "../../../react-auth/token";
 
 let apiClient: AxiosInstance | null = null;
 
@@ -26,7 +27,6 @@ export function initApi(baseUrl: string, getToken?: () => string | null): AxiosI
       if (error.response?.status === 401 && getToken) {
         const currentToken = getToken();
         if (currentToken) {
-          const tokenStore = { clear: () => localStorage.removeItem("token") };
           tokenStore.clear();
         }
       }

react-openapi/src/spec-validator.ts

@@ -1,6 +1,6 @@
-import type { OpenApiSpec, ValidationMessage } from "./types";
+import type { OpenApiSpec, ValidationMessage, SpecConfiguration } from "./types";
 
-export function validateSpec(spec: OpenApiSpec): ValidationMessage[] {
+export function validateSpec(spec: OpenApiSpec, specConfig?: SpecConfiguration): ValidationMessage[] {
   const messages: ValidationMessage[] = [];
   const schemas = (spec.components?.schemas ?? {}) as Record<string, any>;
   const paths = spec.paths ?? {};
@@ -13,7 +13,7 @@ export function validateSpec(spec: OpenApiSpec): ValidationMessage[] {
     messages.push({ type: "error", message: "Missing 'info.title'" });
   }
 
-  if (!spec.servers?.[0]?.url) {
+  if (!spec.servers?.[0]?.url && !specConfig?.baseApiUrl) {
     messages.push({ type: "warning", message: "No 'servers[0].url' defined — provide 'baseApiUrl' in specConfiguration" });
   }
 

src/RequireAuth.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { useNavigate } from "react-router-dom";
+import { useAuth, AuthPage } from "../react-auth";
+
+export function RequireAuth({ children }: { children: React.ReactNode }) {
+  const { currentUser, loading, error, login, register } = useAuth();
+  const navigate = useNavigate();
+  const [mode, setMode] = React.useState<"login" | "register">("login");
+
+  if (currentUser) {
+    return <>{children}</>;
+  }
+
+  return (
+    <AuthPage
+      mode={mode}
+      onBack={() => navigate("/")}
+      onSwitchMode={() => setMode(mode === "login" ? "register" : "login")}
+      login={login}
+      register={register}
+      loading={loading}
+      error={error}
+      currentUser={currentUser}
+    />
+  );
+}

src/main.jsx

@@ -16,6 +16,7 @@ import Dashboard from './Dashboard';
 import FetchRequests from './FetchRequests';
 import FetchRequestDetail from './FetchRequestDetail';
 import ReportSnapshots from './ReportSnapshots';
+import { RequireAuth } from './RequireAuth';
 import { AppProvider, Admin } from '../react-openapi';
 import { Buffer } from 'buffer';
 import process from 'process';
@@ -64,7 +65,7 @@ root.render(
                   path={path}
                   element={
                     path.startsWith("/admin") ? (
-                      <Component basePath="/admin" />
+                      <RequireAuth><Component basePath="/admin" /></RequireAuth>
                     ) : (
                       <Component />
                     )