Frontend Architecture
Relevant source files
The following files were used as context for generating this wiki page:
The Casdoor frontend is a modern web application built using React 18 and Ant Design (v5). It serves as the primary interface for Identity and Access Management (IAM), providing comprehensive UI for managing organizations, applications, users, and authentication flows including OAuth 2.0, OIDC, SAML, and CAS.
The architecture follows a Component-Based model, utilizing a centralized App.js for routing and state management, while delegating specific workflows to specialized modules like EntryPage for authentication and BaseListPage for administrative data management.
Sources: web/package.json:54, web/src/App.js:70-90, README.md
Core Framework and Dependencies
The project is structured as a Single Page Application (SPA) utilizing a robust set of libraries to handle UI, internationalization, and blockchain integrations.
| Category | Technology | Purpose |
|---|---|---|
| UI Framework | React 18, Ant Design 5 | Core component library and layout system |
| Routing | React Router Dom v5 | Client-side navigation and deep linking |
| Styling | Less, Emotion, Ant Design CSS-in-JS | Dynamic theming and component styling |
| Internationalization | i18next, react-i18next | Multi-language support (25+ locales) |
| Auth/Security | Crypto-js, JWT-decode, Ethers | Cryptographic operations and token handling |
| Web3 | @web3-onboard/react | Integration with crypto wallets (Metamask, Coinbase, etc.) |
Sources: web/package.json:10-70, web/src/App.js:37-65
Routing and Application Lifecycle
The application lifecycle begins at web/public/index.html which provides the #root mount point. The main App component manages global state, including the current account, organization, and theme.
Root Routing Logic
The application distinguishes between "Door Pages" (authentication/entry pages) and "Management Pages" (administrative dashboard).
The isDoorPages() utility checks if the current URL path corresponds to entry-level actions like /login, /signup, /callback, or /prompt.
Sources: web/src/App.js:460-475, web/src/EntryPage.js:65-95
Configuration and Theming
Casdoor implements a sophisticated dynamic theming engine. Organizations and Applications can define custom primary colors, border radiuses, and "Dark Mode" preferences.
- Global Config: Managed in
web/src/Conf.js(referenced) andApp.js. - Theme Calculation: Themes are derived from the organization associated with the current application or user account.
- CSS-in-JS: The system uses
@ant-design/cssinjswith alegacyLogicalPropertiesTransformerto ensure cross-browser compatibility.
// Example of Theme provider usage in App.js
<ConfigProvider
locale={getAntdLocale(Setting.getLanguage())}
theme={{
token: {
colorPrimary: this.state.themeData.colorPrimary,
borderRadius: this.state.themeData.borderRadius,
},
algorithm: Setting.getAlgorithm(this.state.themeAlgorithm),
}}>
Sources: web/src/App.js:585-595, web/src/common/theme/ThemeEditor.js:45-60
Common Design Patterns
List-Detail Pattern
Administrative interfaces follow a consistent BaseListPage and EditPage pattern. BaseListPage provides common functionality for:
- Server-side pagination.
- Column searching and filtering.
- Table state management (loading, sorting).
Multi-step Authentication (EntryPage)
The EntryPage acts as a high-level router for the authentication subsystem. It dynamically loads configurations based on the applicationName found in the URL.
- Redirect Logic: The
renderHomeIfLoggedInfunction prevents authenticated users from accessing login pages by redirecting them to the home path. - Application Injection: Components under
EntryPagereceive anonUpdateApplicationcallback to sync application-specific UI (logos, background images) to the top-level state.
Sources: web/src/EntryPage.js:45-60, web/src/auth/ConsentPage.js:50-65
Administrative Modules
Application Management
The ApplicationEditPage is one of the most complex modules, featuring a multi-tab interface (Basic, Authentication, OIDC/OAuth, SAML, etc.) to configure IAM behavior. It includes:
- Real-time Preview: Renders a live preview of signup/signin pages based on current CSS/HTML configurations.
- SAML Metadata: Dynamically generates and displays XML metadata for SAML applications.
Sources: web/src/ApplicationEditPage.js:1000-1050, web/src/ApplicationEditPage.js:1150-1200
Organization and Identity
- OrganizationEditPage: Manages core settings like password complexity, IP whitelists, and LDAP integrations.
- UserListPage: Handles bulk operations, including XLSX imports for user data.
Sources: web/src/OrganizationEditPage.js:150-200, web/src/UserListPage.js:150-180
Conclusion
The Casdoor frontend architecture is designed for extensibility and multi-tenancy. By decoupling the authentication workflows (EntryPage) from the administrative dashboard (ManagementPage) and utilizing a shared configuration layer for theming and internationalization, it provides a consistent experience across diverse IAM use cases.
Sources: web/src/App.js:520-560, web/src/EntryPage.js:100-115