Application Architecture

Relevant source files

• src/App.tsx
• src/components/AppHeader.tsx
• src/components/AppSidebar.tsx
• src/components/RequireAuth.tsx
• src/index.css
• src/pages/AllScans.tsx
• src/pages/Index.tsx
• src/pages/NotFound.tsx

This page provides a high-level overview of the ABSpider Recon React SPA architecture. The system is designed as a zero-backend application, leveraging Supabase for persistence and authentication, while managing complex scanning state and orchestration entirely within the client-side environment.

Component & Provider Hierarchy

The App component wraps the entire application in a specific order of providers to ensure that services like notifications and tooltips have access to the underlying theme and query client.

Provider Tree Structure

Sources:

• src/App.tsx69-116
• src/App.tsx30-36

---

Authentication Guards & Session Management

Authentication is enforced via the RequireAuth component, which acts as a layout guard for all protected routes. It monitors the Supabase session and reactively redirects unauthenticated users to the login page.

• Session Monitoring: The RequireAuth component uses supabase.auth.onAuthStateChange to listen for sign-out events or session expirations src/components/RequireAuth.tsx28-33 The App component also listens for INITIAL_SESSION or SIGNED_IN events to trigger cleanupStuckScans() src/App.tsx40-49
• Protection Guard: Routes wrapped in <RequireAuth> will only render their children if a valid session exists; otherwise, they display a loading state or redirect src/components/RequireAuth.tsx40-53
• Scan Protection: A beforeunload listener in App.tsx prevents users from accidentally closing the browser while scans are active by checking getRunningScanCount() src/App.tsx51-65

For details, see Authentication & Session Management.

Sources:

• src/components/RequireAuth.tsx10-54
• src/App.tsx25-27
• src/App.tsx75-101

---

Routing Table & Layout

The application uses react-router-dom for client-side navigation. The routing is split between public-facing pages and a structured authenticated dashboard.

Route	Component	Purpose
/	LandingPage	Public marketing and features overview.
/login	ModernLogin	Auth entry point (Email/Password, Magic Link).
/status	StatusPage	System health and API connectivity check.
/app	Index	Initial session check and redirect to /dashboard or /login src/pages/Index.tsx10-17
/dashboard	DashboardPage	User command center and quick stats.
/new-scan	NewScan	Configuration interface for recon tasks.
/all-scans	AllScans	Comprehensive list and management of all scans.
/reports	ReportsPage	Access to generated reports.
/scan/:id	ScanResults	Real-time monitoring of a specific scan.
/settings	AppSettings	Global app and Discord webhook configuration.
/account-settings	AccountSettings	User account-specific settings.
*	NotFound	Catch-all for undefined routes src/pages/NotFound.tsx4-16

Sources:

• src/App.tsx78-101
• src/components/AppSidebar.tsx58-64

For details, see Routing & Page Layout.

---

Navigation & Global Layout

The authenticated experience is centered around a persistent sidebar layout using the SidebarProvider.

• AppSidebar: Contains primary navigation links and a "Quick Stats" section that polls the scan history every 5 seconds to show active scan counts and success rates src/components/AppSidebar.tsx32-36 It also includes a theme toggle and a ProfileCardPopover src/components/AppSidebar.tsx138-173
• SidebarInset: The main content area where individual pages are rendered src/App.tsx90
• AppHeader: While a global header was removed, individual pages like AllScans implement their own headers, often including a SidebarTrigger and page-specific titles/subtitles src/pages/AllScans.tsx67-77

Sources:

• src/components/AppSidebar.tsx24-177
• src/App.tsx87-107
• src/pages/AllScans.tsx67-77

---

Global State & Data Patterns

ABSpider Recon utilizes a decentralized state management pattern:

1. Server State: Managed by TanStack Query (React Query). It handles caching, polling (e.g., 3s intervals on the AllScans page for scan statuses src/pages/AllScans.tsx33-35), and synchronization with Supabase.
2. UI State: Managed by local useState hooks and specialized Contexts (ThemeContext, NotificationContext).
3. Persistence: All long-term data is stored in Supabase. The application includes shims for Node.js compatibility (e.g., node:net for IP validation) to support libraries in a browser-only environment.

For details on the UI framework and theme management, see UI Component Library & Theming.

Sources:

• src/App.tsx29-36
• src/pages/AllScans.tsx33-35
• src/App.tsx6-7