This page describes the frontend application's organizational structure, focusing on React Router setup, page hierarchy, route guards, and navigation patterns. It covers how the application initializes, how routes are defined and protected, and how pages are nested within layout components.
For information about the visual flow editor interface, see Visual Flow Builder. For state management patterns, see State Management. For the API client layer, see API Client Layer.
The root application component is minimal, focused on routing and theme management.
The App component:
Suspense boundary with LoadingPage fallbackdark class on the body elementuseDarkStore for theme state managementrouter from routes.tsxSources: src/frontend/src/App.tsx1-23
The application uses React Router v6 with a declarative routing structure defined in routes.tsx. Routes are created using createBrowserRouter and createRoutesFromElements.
The following diagram maps route paths to the React components defined in routes.tsx. Guard components are shown in parentheses where access control is applied.
Sources: src/frontend/src/routes.tsx50-221
The routing hierarchy uses several layout and guard components as nested <Route> elements:
| Component | Role | Import |
|---|---|---|
ContextWrapper | Provides all React contexts (Auth, Alert, etc.) to the subtree | src/frontend/src/contexts |
AppInitPage | Performs application initialization before rendering children | src/frontend/src/pages/AppInitPage |
AppWrapperPage | Root layout for both authenticated and unauthenticated views | src/frontend/src/pages/AppWrapperPage |
ProtectedRoute | Redirects unauthenticated users to /login | src/frontend/src/components/authorization/authGuard |
AppAuthenticatedPage | Layout available only to authenticated users | src/frontend/src/pages/AppAuthenticatedPage |
CustomDashboardWrapperPage | Dashboard shell with sidebar navigation | src/frontend/src/customization/components |
CollectionPage | Main page layout housing flows/components/assets routes | src/frontend/src/pages/MainPage/pages/main-page |
SettingsPage | Settings shell with nested sub-pages | src/frontend/src/pages/SettingsPage |
FlowPage | Visual flow editor | src/frontend/src/pages/FlowPage |
ViewPage | Read-only flow view | src/frontend/src/pages/ViewPage |
Sources: src/frontend/src/routes.tsx23-40 src/frontend/src/routes.tsx52-219
Four guard components are defined under src/frontend/src/components/authorization/ and are applied directly in routes.tsx to enforce access rules.
Guard component decision logic:
Sources: src/frontend/src/routes.tsx8-11 src/frontend/src/routes.tsx74-78 src/frontend/src/routes.tsx151-156 src/frontend/src/routes.tsx167-172 src/frontend/src/routes.tsx186-215
| Guard | Source File | Applied To | Redirect On Failure |
|---|---|---|---|
ProtectedRoute | authGuard.tsx | All dashboard/flow routes | /login |
ProtectedLoginRoute | authLoginGuard.tsx | /login, /signup, /login/admin | / |
ProtectedAdminRoute | authAdminGuard.tsx | /admin | / |
AuthSettingsGuard | authSettingsGuard.tsx | /settings/general/:scrollId? | varies |
Sources: src/frontend/src/routes.tsx8-11 src/frontend/src/routes.tsx74-215
The application organizes content into several main categories accessible from the dashboard.
Collection routes handle flows, components, and assets:
| Route | Component | Purpose |
|---|---|---|
/flows | HomePage (type="flows") | User-created flows |
/components | HomePage (type="components") | Reusable components |
/all | HomePage (type="flows") | All flows view |
/mcp | HomePage (type="mcp") | Model Context Protocol servers |
/assets/files | FilesPage | File management |
/assets/knowledge-bases | KnowledgePage | Knowledge base management |
src/frontend/src/routes.tsx82-133
Settings are organized into specialized pages:
| Route | Component | Feature Flag |
|---|---|---|
/settings/general | GeneralPage | - |
/settings/global-variables | GlobalVariablesPage | - |
/settings/model-providers | ModelProvidersPage | - |
/settings/mcp-servers | MCPServersPage | - |
/settings/api-keys | ApiKeysPage | - |
/settings/shortcuts | ShortcutsPage | - |
/settings/messages | MessagesPage | - |
src/frontend/src/routes.tsx134-161
Flow editor routes support both folder-based and direct access:
/flow/:id # Direct flow access
/flow/:id/folder/:folderId # Folder-based flow access
/flow/:id/view # Read-only view
src/frontend/src/routes.tsx175-181
Sources: src/frontend/src/routes.tsx82-181
Every route subtree is wrapped by ContextWrapper (imported in routes.tsx), which instantiates all React context providers before rendering route children.
Context providers and their roles:
Note: Alert, dark mode, auth, and utility state are implemented as Zustand stores (see State Management), not as React context, except AuthContext which is a proper React context via AuthProvider.
Sources: src/frontend/src/routes.tsx56-68 src/frontend/src/contexts/authContext.tsx30-161
AuthContext is created in authContext.tsx and consumed anywhere the application needs access to the current session.
AuthContextType fields:
| Field | Type | Description |
|---|---|---|
accessToken | string | null | JWT access token |
userData | Users | null | Current user profile |
apiKey | string | null | Store API key |
login() | function | Set tokens, load user/globals, mark authenticated |
getUser() | function | Re-fetch current user via useGetUserData |
clearAuthSession() | function | Clear cookies, localStorage, and reset state |
storeApiKey() | function | Store the Langflow Store API key in state |
Sources: src/frontend/src/types/contexts/auth.ts1-19 src/frontend/src/contexts/authContext.tsx17-28
login() function steps:
LANGFLOW_ACCESS_TOKEN and LANGFLOW_REFRESH_TOKEN cookies via cookieManagerLANGFLOW_ACCESS_TOKEN to localStoragemutateLoggedUser (from useGetUserData) — on success sets userData, admin flag, checks storemutateGetGlobalVariables in parallelsetIsAuthenticated(true) only after both requests settleSources: src/frontend/src/contexts/authContext.tsx67-125
clearAuthSession() clears: cookies via cookieManager.clearAuthCookies(), localStorage entries for all token keys, and resets all in-memory state.
Sources: src/frontend/src/contexts/authContext.tsx131-140
StorePage (src/frontend/src/pages/StorePage/index.tsx) illustrates the standard structure for a full-page listing view.
Key features:
PageLayout for consistent header and layouthasApiKey, validApiKey, loadingApiKey from useStoreStoregetStoreComponents() from the API module with pagination, sort, tags, and type filtersPaginatorComponent for pagination controlsStoreCardComponent items, or SkeletonCardComponent while loadingSources: src/frontend/src/pages/StorePage/index.tsx46-157
AdminPage (src/frontend/src/pages/AdminPage/index.tsx) illustrates a role-protected page with CRUD operations.
Key features:
ProtectedAdminRoute (requires isAdmin = true in authStore)useGetUsers, useAddUser, useUpdateUser, useDeleteUsers query hooksTable with inline ConfirmationModal and UserManagementModal dialogsfilterUserList state implements client-side username searchSources: src/frontend/src/pages/AdminPage/index.tsx47-112
Pages access the backend through a centralized API client layer. The Axios instance api is defined in controllers/API/api.tsx and shared across all API functions.
Key functions in controllers/API/index.ts:
| Function | Purpose |
|---|---|
getStoreComponents() | Paginated, filtered listing of store flows/components |
saveFlowStore() | Publish a new flow to the store |
updateFlowStore() | Update an existing store entry |
getVerticesOrder() | Fetch topological build order for a flow |
postBuildVertex() | Build a single vertex in a flow |
createApiKey() | Create a new user API key |
checkHasApiKey() | Check if the store API key is set |
getRepoStars() | Fetch GitHub star count |
getDiscordCount() | Fetch Discord member count |
Sources: src/frontend/src/controllers/API/index.ts1-307
For full details on request interceptors, token refresh, and SSE streaming, see API Client Layer.
CustomNavigate ComponentCustomNavigate is a wrapper around React Router's <Navigate> used for declarative redirects inside route definitions. Example:
src/frontend/src/routes.tsx85-86
<Route index element={<CustomNavigate replace to={"flows"} />} />
This is how the root / path redirects to /flows at startup.
useCustomNavigate HookPages use useCustomNavigate() instead of React Router's useNavigate() directly. This allows the customization layer to intercept or prefix navigation calls.
src/frontend/src/pages/StorePage/index.tsx72
Sources: src/frontend/src/routes.tsx14 src/frontend/src/pages/StorePage/index.tsx7 src/frontend/src/pages/StorePage/index.tsx72
Three feature flags imported from customization/feature-flags control which routes are active:
| Flag | Effect |
|---|---|
ENABLE_CUSTOM_PARAM | Adds optional /:customParam? prefix to the root path |
ENABLE_FILE_MANAGEMENT | Enables /assets/files and the /assets route group |
ENABLE_KNOWLEDGE_BASES | Enables /assets/knowledge-bases and /assets/knowledge-bases/:sourceId/chunks within the file management group |
Sources: src/frontend/src/routes.tsx16-20 src/frontend/src/routes.tsx87-107
The router is instantiated with an optional basename from customization/config-constants:
src/frontend/src/routes.tsx219-221
Setting BASENAME allows deploying the frontend at a non-root URL path (e.g., /app/langflow). When unset, it defaults to /.
Sources: src/frontend/src/routes.tsx15 src/frontend/src/routes.tsx219-221
Sources: src/frontend/src/App.tsx8-22 src/frontend/src/routes.tsx50-216 src/frontend/src/contexts/authContext.tsx32-161
Refresh this wiki
This wiki was recently refreshed. Please wait 3 days to refresh again.