{"id":48839804,"url":"https://github.com/sourcefuse/arc-react-sass-ui","last_synced_at":"2026-04-15T01:03:55.305Z","repository":{"id":318646420,"uuid":"1041267842","full_name":"sourcefuse/arc-react-sass-ui","owner":"sourcefuse","description":"Production-ready React boilerplate and Super Admin Control Plane for scalable multi-tenant SaaS applications. Features comprehensive tenant management, flexible authentication integration, subscription plans, billing controls. Built with TypeScript, Material-UI, and Vite.","archived":false,"fork":false,"pushed_at":"2025-10-08T11:08:41.000Z","size":4265,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-08T12:32:04.462Z","etag":null,"topics":["boilerplate","multi-tenancy","multi-tenant","multi-tenant-applications","react","react-saas-applications","react-sass","sass","sourcefuse","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sourcefuse.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-20T08:30:12.000Z","updated_at":"2025-10-08T11:08:45.000Z","dependencies_parsed_at":"2025-10-08T12:32:11.257Z","dependency_job_id":null,"html_url":"https://github.com/sourcefuse/arc-react-sass-ui","commit_stats":null,"previous_names":["sourcefuse/arc-react-sass-ui"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/sourcefuse/arc-react-sass-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sourcefuse%2Farc-react-sass-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sourcefuse%2Farc-react-sass-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sourcefuse%2Farc-react-sass-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sourcefuse%2Farc-react-sass-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sourcefuse","download_url":"https://codeload.github.com/sourcefuse/arc-react-sass-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sourcefuse%2Farc-react-sass-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31821686,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T18:05:02.291Z","status":"ssl_error","status_checked_at":"2026-04-14T18:05:01.765Z","response_time":153,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","multi-tenancy","multi-tenant","multi-tenant-applications","react","react-saas-applications","react-sass","sass","sourcefuse","typescript"],"created_at":"2026-04-15T01:03:54.355Z","updated_at":"2026-04-15T01:03:55.271Z","avatar_url":"https://github.com/sourcefuse.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ARC React SaaS UI boilerplate\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://github.com/sourcefuse/arc-react-sass-ui/blob/main/src/Assets/logo-dark-bg.png?raw=true\" width=\"180\"  alt=\"ARC Logo\" /\u003e\n\u003c/p\u003e\n\n**A comprehensive, production-ready React SaaS UI boilerplate and Super Admin Control Plane for building and managing scalable multi-tenant SaaS applications**\n\nBuilt by [SourceFuse](https://www.sourcefuse.com) as a complete solution for SaaS platforms, this project combines a rich component with powerful administrative capabilities. It serves as both a UI boilerplate for building modern SaaS interfaces and a fully functional control plane for managing tenants, subscriptions, billing, and system operations.\n\n\u003e ⚠️ **Important**: This is a **frontend-only application** that requires specific backend APIs to function. See [API Dependencies](#api-dependencies) section for required services.\n\nWhether you're building a new SaaS platform or need administrative tools for an existing one, this boilerplate provides enterprise-grade components and management features out of the box.\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![React](https://img.shields.io/badge/React-18.2.0-blue.svg)](https://reactjs.org/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-4.9.3-blue.svg)](https://www.typescriptlang.org/)\n[![Material-UI](https://img.shields.io/badge/Material--UI-5.10.15-blue.svg)](https://mui.com/)\n[![Vite](https://img.shields.io/badge/Vite-4.1.5-646CFF.svg)](https://vitejs.dev/)\n\n\u003c/div\u003e\n\n---\n\n## Table of Contents\n\n- [Features](#features)\n- [Preview](#preview)\n- [API Dependencies](#api-dependencies)\n- [Directory Structure](#directory-structure)\n- [Installation](#installation)\n- [Configuration](#configuration)\n- [Usage](#usage)\n- [Theming](#theming)\n- [Authentication](#authentication)\n- [API Integration](#api-integration)\n- [Testing](#testing)\n- [Deployment](#deployment)\n- [Contributing](#contributing)\n- [License](#license)\n\n---\n\n## Features\n\n### **Enterprise-Ready Architecture**\n\n- **Modular Components** — 50+ reusable, customizable React components\n- **Modern Build System** — Vite-powered for lightning-fast development and builds\n- **Production Optimized** — Tree-shaking, code splitting, and performance optimizations\n\n### **Authentication \u0026 Security**\n\n- **OAuth2/OpenID Connect Integration** — Secure authentication with industry standards\n- **Session Management** — Configurable session timeout and idle detection\n- **Permission-Based Access** — Role-based component and route protection\n- **Secure Token Handling** — Automatic token refresh and validation\n\n### **Multi-Tenant SaaS Features**\n\n- **Tenant Management** — Complete tenant lifecycle management\n- **Subscription Plans** — Flexible plan configuration and billing cycles\n- **Feature Toggles** — Dynamic feature enablement per tenant\n- **Billing \u0026 Invoicing** — Integrated payment and invoice management\n\n### **Super Admin Control Plane**\n\n- **System Configuration** — Admin settings for observability URLs, pagination, and system parameters\n- **Plan Management** — Create, update, and manage subscription plans with status tracking\n- **Feature Management** — Upload and configure feature sets via CSV, manage feature flags\n- **Cluster Management** — Basic cluster configuration for deployment environments\n- **Billing Management** — Invoice generation, payment tracking, and billing cycle configuration\n- **Tenant Management** — Complete tenant lifecycle with provisioning and status monitoring\n- **Lead Management** — Lead tracking with auto-close configuration and conversion workflows\n- **Permission Control** — Role-based access control with 40+ granular permissions\n- **Dashboard Analytics** — Real-time tenant counts, plan statistics, and visual charts\n\n### **Customization \u0026 Theming**\n\n- **Dynamic Theming** — Single-file color configuration for complete rebranding\n- **White-Label Ready** — Easy logo, branding, and styling customization\n- **Responsive Design** — Mobile-first approach with Material-UI components\n- **Dark/Light Mode** — Built-in theme switching capabilities\n\n### **Business Intelligence**\n\n- **Dashboard Analytics** — Real-time metrics and KPI visualization\n- **Data Tables** — Advanced filtering, sorting, and pagination\n- **Charts \u0026 Graphs** — Interactive data visualization with Recharts\n- **Audit Logging** — Comprehensive activity tracking and observability\n\n### **Developer Experience**\n\n- **Hot Reload** — Instant development feedback with Vite\n- **Comprehensive Testing** — Vitest, Testing Library, and Cypress integration\n- **Code Quality** — ESLint, Prettier, and Husky pre-commit hooks\n- **Documentation** — Extensive component documentation and examples\n\n---\n\n## Preview\n\nHere's what the dashboard looks like:\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://github.com/sourcefuse/arc-react-sass-ui/blob/main/src/Assets/login%20page.png?raw=true\" alt=\"Login Page\" /\u003e\n\u003c/p\u003e\n\n---\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://github.com/sourcefuse/arc-react-sass-ui/blob/main/src/Assets/dashboard.png?raw=true\" alt=\"Dashboard\" /\u003e\n\u003c/p\u003e\n\n---\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/sourcefuse/arc-react-sass-ui/blob/main/src/Assets/tenants.png?raw=true\" alt=\"Tenants\" /\u003e\n\u003c/p\u003e\n\n---\n\n## API Dependencies\n\n\u003e ⚠️ **Critical**: This application **cannot function** without the following backend APIs and services. Ensure all required services are properly configured before deployment.\n\n### **Required Backend Services**\n\n| Service                     | Environment Variable  | Purpose                                             | Required        |\n| --------------------------- | --------------------- | --------------------------------------------------- | --------------- |\n| **Authentication API**      | `AUTH_API_BASE_URL`   | OAuth2/OpenID Connect authentication server Connect | ✅ **Required** |\n| **Main Application API**    | `APP_API_BASE_URL`    | Core business logic, CRUD operations                | ✅ **Required** |\n| **Tenant Management API**   | `TENANT_API_BASE_URL` | Tenant lifecycle, provisioning, management          | ✅ **Required** |\n| **Audit API**               | `AUDIT_API_BASE_URL`  | Audit logging, activity tracking                    | ✅ **Required** |\n| **Observability Dashboard** | `GRAFANA_URL`         | Monitoring, metrics, system health                  | ❌ Optional     |\n\n### **API Endpoints Expected**\n\nThe application expects the following API endpoints to be available:\n\n#### **Authentication Endpoints**\n\n- `POST /auth/login` - User authentication\n- `POST /auth/refresh` - Token refresh\n- `POST /auth/logout` - User logout\n\n#### **Tenant Management Endpoints**\n\n- `GET /tenants` - List tenants\n- `POST /tenants` - Create tenant\n- `PUT /tenants/:id` - Update tenant\n- `DELETE /tenants/:id` - Delete tenant\n\n#### **Plan Management Endpoints**\n\n- `GET /plans` - List subscription plans\n- `POST /plans` - Create plan\n- `PUT /plans/:id` - Update plan\n- `GET /plan-items` - List plan items\n- `POST /plan-items` - Create plan item\n\n#### **Feature Management Endpoints**\n\n- `GET /features` - List features\n- `POST /features` - Upload features via CSV\n- `PUT /features/:id` - Update feature\n\n#### **Billing \u0026 Payment Endpoints**\n\n- `GET /invoices` - List invoices\n- `POST /invoices` - Generate invoice\n- `GET /payments` - List payments\n- `POST /payments` - Process payment\n\n#### **System Configuration Endpoints**\n\n- `GET /settings` - Get system settings\n- `PUT /settings` - Update system settings\n- `GET /clusters` - List clusters\n- `POST /clusters` - Create cluster\n\n### **API Response Format**\n\nAll APIs should return responses in the following format:\n\n```typescript\n// Success Response\n{\n  \"data\": any,\n  \"message\": string,\n  \"status\": \"success\"\n}\n\n// Error Response\n{\n  \"error\": string,\n  \"message\": string,\n  \"status\": \"error\"\n}\n```\n\n### **Authentication Headers**\n\nAll API requests require the following headers:\n\n```http\nAuthorization: Bearer \u003caccess_token\u003e\nContent-Type: application/json\n```\n\n---\n\n## Directory Structure\n\n```\nsrc/\n├── Components/           # Reusable UI components\n│   ├── AppBar/          # Application header\n│   ├── Button/          # Button variants\n│   ├── Table/           # Data tables with advanced features\n│   ├── Forms/           # Form components and validation\n│   ├── SideNav/         # Navigation components\n│   └── ...              # 40+ more components\n├── Pages/               # Application pages\n│   ├── Dashboard/       # Analytics dashboard\n│   ├── Tenants/         # Tenant management\n│   ├── Configuration/   # Super Admin Control Plane\n│   │   ├── Plans/       # Plan management\n│   │   ├── PlanItems/   # Plan items configuration\n│   │   ├── Features/    # Feature management\n│   │   ├── Clusters/    # Cluster management\n│   │   ├── Billing/     # Billing configuration\n│   │   ├── Settings/    # System settings\n│   │   └── Terms/       # Terms \u0026 conditions\n│   ├── Leads/           # Lead management\n│   ├── Payments/        # Billing \u0026 invoicing\n│   └── ...              # Feature-specific pages\n├── Providers/           # React context providers\n│   ├── theme/           # Theme configuration\n│   └── ...              # Global state providers\n├── Hooks/               # Custom React hooks\n├── redux/               # State management\n├── Constants/           # Application constants\n└── Helpers/             # Utility functions\n```\n\n---\n\n## Installation\n\n### Prerequisites\n\n- **Node.js** 16.0 or higher\n- **npm** 8.0 or higher\n- **OAuth2/OpenID Connect** Provider (e.g., Keycloak, Auth0, Azure AD, etc.)\n- **Backend APIs** (see [API Dependencies](#api-dependencies) section)\n\n### Environment Setup\n\n1. **Fork the repository:**\n\n- Go to [https://github.com/sourcefuse/arc-react-sass-ui](https://github.com/sourcefuse/arc-react-sass-ui) and click \"Fork\" to create your own copy.\n\n2. **Clone your fork:**\n\n```bash\ngit clone https://github.com/\u003cyour-username\u003e/arc-react-sass-ui.git\ncd arc-react-sass-ui\n```\n\n3. **Install dependencies:**\n\n```bash\nnpm install\n```\n\n4. **Configure environment variables:**\n\n```bash\ncp .env.example .env\n```\n\n5. **Start the development server:**\n\n```bash\nnpm start\n```\n\nVisit `http://localhost:3000` to see the application in action.\n\n---\n\n## Configuration\n\n### Environment Variables\n\nCreate a `.env` file in the root directory with the following variables:\n\n```env\n# Core Configuration\nCLIENT_ID=your-oauth-client-id\nAPP_API_BASE_URL=https://api.yourdomain.com\nAUTH_API_BASE_URL=https://auth.yourdomain.com\nTENANT_API_BASE_URL=https://tenant-api.yourdomain.com\nAUDIT_API_BASE_URL=https://audit-api.yourdomain.com\n\n# Session Management\nENABLE_SESSION_TIMEOUT=true\nEXPIRY_TIME_IN_MINUTE=30\nPROMPT_TIME_BEFORE_IDLE_IN_MINUTE=5\nSTORAGE_SESSION_TIME_KEY=sessionExpiry\n\n# Observability\nGRAFANA_URL=https://grafana.yourdomain.com\nOBSERVABILITY_DOMAIN=your-app-domain\n\n# UI \u0026 Branding\nAPP_NAME=Your SaaS Application\nAPP_DESCRIPTION=Your application description\n\n# Optional Configuration\nDEFAULT_TIER_ID=default-tier\nHASH_SECRET_KEY=your-secret-key\nENABLE_HASH_SECRET=true\n```\n\n### Configuration Reference\n\n| Variable                            | Description                       | Type      | Required | Default |\n| ----------------------------------- | --------------------------------- | --------- | -------- | ------- |\n| `CLIENT_ID`                         | OAuth client identifier           | `string`  | ✅       | -       |\n| `AUTH_API_BASE_URL`                 | OAuth authentication server URL   | `string`  | ✅       | -       |\n| `APP_API_BASE_URL`                  | Main backend API URL              | `string`  | ✅       | -       |\n| `TENANT_API_BASE_URL`               | Tenant management API URL         | `string`  | ✅       | -       |\n| `AUDIT_API_BASE_URL`                | Audit logging API URL             | `string`  | ✅       | -       |\n| `ENABLE_SESSION_TIMEOUT`            | Enable session timeout management | `boolean` | ❌       | `false` |\n| `EXPIRY_TIME_IN_MINUTE`             | Session expiry time in minutes    | `number`  | ❌       | `15`    |\n| `PROMPT_TIME_BEFORE_IDLE_IN_MINUTE` | Idle warning time in minutes      | `number`  | ❌       | `1`     |\n| `APP_NAME`                          | Application name for branding     | `string`  | ✅       | -       |\n| `APP_DESCRIPTION`                   | Application description           | `string`  | ✅       | -       |\n\n---\n\n## Usage\n\n### Super Admin Control Plane\n\nThis application serves as a **Super Admin Control Plane** for managing multi-tenant SaaS operations:\n\n#### **Tenant Management**\n\n- **Tenant Provisioning** - Create and provision new tenant instances with automated setup\n- **Status Monitoring** - Track tenant status (active, provisioning, suspended, inactive)\n- **Configuration** - Manage tenant-specific settings, tiers, and feature assignments\n- **Bulk Operations** - View and manage multiple tenants from a centralized interface\n\n#### **Subscription \u0026 Plan Management**\n\n- **Plan Configuration** - Create and manage subscription plans with different tiers\n- **Plan Items** - Configure individual plan components and features\n- **Billing Cycles** - Set up and manage billing periods and payment terms\n- **Status Tracking** - Monitor plan status and subscription states\n\n#### **Feature Management**\n\n- **Feature Upload** - Bulk upload features via CSV files\n- **Feature Assignment** - Configure which features are available per plan or tenant\n- **Feature Flags** - Enable/disable features dynamically\n\n#### **System Administration**\n\n- **Admin Settings** - Configure system-wide parameters:\n  - Observability dashboard URLs\n  - Default pagination settings (rows per page)\n  - Tenant tier configurations\n  - Product tags for plan categorization\n  - Lead auto-close timeouts\n- **Permission Control** - 40+ granular permissions for role-based access control\n- **Cluster Configuration** - Basic deployment environment management\n\n#### **Lead Management**\n\n- **Lead Tracking** - Manage prospects and potential customers\n- **Conversion Workflow** - Convert leads to active tenants\n- **Auto-close Configuration** - Set automatic lead closure after inactivity periods\n\n#### **Billing \u0026 Payments**\n\n- **Invoice Management** - Generate, track, and manage invoices\n- **Payment Processing** - Handle payment transactions and status tracking\n- **Billing Analytics** - Monitor payment status and billing metrics\n\n#### **Dashboard \u0026 Analytics**\n\n- **Real-time Metrics** - View tenant counts, plan statistics, and system health\n- **Visual Charts** - Pie charts for support tickets and popular plans\n- **Recent Activity** - Quick access to recent tenant activities and changes\n\n### Basic Application Setup\n\n```tsx\nimport React from \"react\";\nimport { BrowserRouter } from \"react-router-dom\";\nimport { Provider } from \"react-redux\";\nimport { ThemeProvider } from \"@mui/material/styles\";\nimport App from \"./App\";\nimport { store } from \"./redux/store\";\nimport { theme } from \"./Providers/theme\";\n\nfunction AppWrapper() {\n  return (\n    \u003cProvider store={store}\u003e\n      \u003cThemeProvider theme={theme}\u003e\n        \u003cBrowserRouter\u003e\n          \u003cApp /\u003e\n        \u003c/BrowserRouter\u003e\n      \u003c/ThemeProvider\u003e\n    \u003c/Provider\u003e\n  );\n}\n\nexport default AppWrapper;\n```\n\n### Using Components\n\n```tsx\nimport { Button, Table, PageHeader } from \"Components\";\nimport { PermissionsEnum } from \"Constants/enums\";\nimport { PermissionWrapper } from \"Components/PermissionWrapper\";\n\nfunction MyPage() {\n  return (\n    \u003c\u003e\n      \u003cPageHeader pageName=\"My Page\" /\u003e\n      \u003cPermissionWrapper requiredPermissions={[PermissionsEnum.ViewTenant]}\u003e\n        \u003cButton variant=\"contained\" color=\"primary\"\u003e\n          Add Tenant\n        \u003c/Button\u003e\n      \u003c/PermissionWrapper\u003e\n      \u003cTable\n        columns={columns}\n        data={data}\n        enableFiltering\n        enableSorting\n        enablePagination\n      /\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n---\n\n## Theming\n\n### Color Configuration\n\nAll theming is centralized in `src/Providers/theme/colors.ts`:\n\n```typescript\nexport const colors = {\n  // Primary brand colors\n  primary: \"#ff0000\",\n  primary200: \"#f15e5eff\",\n  primary100: \"#f9b9b9ff\",\n  primary50: \"#fce2e2ff\",\n\n  // Secondary colors\n  secondary: \"#5c0000\",\n\n  // Status colors\n  success: \"#00C851\",\n  warning: \"#FAC353\",\n  destructive: \"#ED4337\",\n\n  // Surface colors\n  surfaceLight: \"#FFFFFF\",\n  surfaceDark: \"#f4f2f2ff\",\n\n  // Background colors\n  backgroundLight: \"#fcfafaff\",\n  backgroundDark: \"#E2E2E2\",\n\n  // ... more color definitions\n} as const;\n```\n\n### Custom Theme Creation\n\n```typescript\nimport { createTheme } from \"@mui/material/styles\";\nimport { colors } from \"./colors\";\n\nexport const theme = createTheme({\n  palette: {\n    primary: {\n      main: colors.primary,\n      light: colors.primary100,\n      dark: colors.secondary,\n    },\n    secondary: {\n      main: colors.secondary,\n    },\n    success: {\n      main: colors.success,\n    },\n    warning: {\n      main: colors.warning,\n    },\n    error: {\n      main: colors.destructive,\n    },\n  },\n  // ... additional theme configuration\n});\n```\n\n### Branding Customization\n\n1. **Logo**: Replace files in `src/Assets/`\n2. **Colors**: Update `colors.ts` file\n3. **App Name**: Set `APP_NAME` environment variable\n4. **Typography**: Customize Material-UI theme typography\n\n---\n\n## Authentication\n\n### Adding a New OAuth Provider\n\n#### Prerequisites\n\nBefore proceeding, ensure you have the following:\n\n- Details of the OAuth provider you want to add (such as `name`, `loginPath`, etc.)\n- Access to the project files, specifically:\n  - `src/Constants/enums/AuthProvider.enum.ts`\n  - `src/Constants/AuthProviders.config.ts`\n\n#### Steps to Add a New OAuth Provider\n\n#### 1. Add the New OAuth Provider to the `AuthProvider.enum.ts`\n\nIn the `src/Constants/enums/AuthProvider.enum.ts` file, add the new OAuth provider to the `AuthProvider` enum.\n\nExample:\n\n```typescript\nexport enum AuthProvider {\n  KEYCLOAK = \"keycloak\",\n  COGNITO = \"cognito\",\n  // Add the new provider here\n  GOOGLE = \"google\", // New provider example\n  GITHUB = \"github\", // New provider example\n}\n```\n\n#### 2. Update AuthProviderConfig in `AuthProviders.config.ts`\n\nThe AuthProviderConfig object in `src/Constants/AuthProviders.config.ts` stores configuration for each OAuth provider, including the display name and login path.\n\nTo add your new provider, add an entry for it in this file:\n\n```typescript\nimport { AuthProvider } from \"./enums/AuthProvider.enum\";\n\nexport const AuthProviderConfig: Record\u003c\n  AuthProvider,\n  { name: string; loginPath: string }\n\u003e = {\n  [AuthProvider.KEYCLOAK]: {\n    name: \"Sign in with Keycloak\",\n    loginPath: \"/auth/login\",\n  },\n  [AuthProvider.COGNITO]: {\n    name: \"Sign in with Cognito\",\n    loginPath: \"/auth/cognito/login\",\n  },\n  // Add your new provider configuration here\n  [AuthProvider.GOOGLE]: {\n    name: \"Sign in with Google\",\n    loginPath: \"/auth/google/login\", // Update this with your provider's login URL\n  },\n  [AuthProvider.GITHUB]: {\n    name: \"Sign in with GitHub\",\n    loginPath: \"/auth/github/login\", // Update this with your provider's login URL\n  },\n};\n```\n\nMake sure the loginPath is set to the correct URL for your OAuth provider’s login endpoint.\n\n#### 3. Update the `Login.tsx` UI\n\nThe login page will automatically render buttons for the new providers because the AuthProviders.getProviders() function dynamically generates them from the AuthProviderConfig.\n\nEnsure that your `src/Pages/Login/Login.tsx` is correctly rendering all the providers. It should look like this:\n\n### OAuth2/OpenID Connect Integration\n\nThe application supports OAuth2/OpenID Connect authentication with various providers:\n\n```typescript\n// Authentication configuration\nconst authConfig = {\n  url: process.env.AUTH_API_BASE_URL,\n  realm: \"your-realm\",\n  clientId: process.env.CLIENT_ID,\n  redirectUri: process.env.REDIRECT_URI,\n  postLogoutRedirectUri: process.env.POST_LOGOUT_REDIRECT_URI,\n  onLoad: \"login-required\",\n  checkLoginIframe: false,\n};\n```\n\n### Session Management\n\n```typescript\n// Session timeout configuration\nconst sessionConfig = {\n  enabled: process.env.ENABLE_SESSION_TIMEOUT === \"true\",\n  expiryTime: parseInt(process.env.EXPIRY_TIME_IN_MINUTE || \"15\"),\n  promptTime: parseInt(process.env.PROMPT_TIME_BEFORE_IDLE_IN_MINUTE || \"1\"),\n  storageKey: process.env.STORAGE_SESSION_TIME_KEY || \"sessionExpiry\",\n};\n```\n\n### Permission-Based Access\n\n```tsx\nimport { PermissionWrapper } from \"Components/PermissionWrapper\";\nimport { PermissionsEnum } from \"Constants/enums\";\n\n// Protect components with permissions\n\u003cPermissionWrapper requiredPermissions={[PermissionsEnum.ViewTenant]}\u003e\n  \u003cTenantManagementComponent /\u003e\n\u003c/PermissionWrapper\u003e;\n```\n\n---\n\n## API Integration\n\n### Redux Toolkit Query\n\nThe application uses RTK Query for API management:\n\n```typescript\n// API slice example\nexport const tenantApiSlice = createApi({\n  reducerPath: \"tenantApi\",\n  baseQuery: fetchBaseQuery({\n    baseUrl: process.env.TENANT_API_BASE_URL,\n    prepareHeaders: (headers, { getState }) =\u003e {\n      const token = selectAuthToken(getState());\n      if (token) {\n        headers.set(\"authorization\", `Bearer ${token}`);\n      }\n      return headers;\n    },\n  }),\n  tagTypes: [\"Tenant\", \"Plan\", \"Subscription\"],\n  endpoints: (builder) =\u003e ({\n    getTenants: builder.query\u003cTenantResponse, TenantParams\u003e({\n      query: (params) =\u003e ({\n        url: \"/tenants\",\n        params,\n      }),\n      providesTags: [\"Tenant\"],\n    }),\n    // ... more endpoints\n  }),\n});\n```\n\n### Custom Hooks\n\n```typescript\n// Permission-aware query hook\nexport const useQueryHookWithPermission = (\n  permissions: PermissionsEnum[],\n  queryHook: any,\n  params: any,\n  options: any = {}\n) =\u003e {\n  const hasPermission = usePermission(permissions);\n\n  return queryHook(params, {\n    ...options,\n    skip: !hasPermission || options.skip,\n  });\n};\n```\n\n---\n\n## Testing\n\n### Test Setup\n\n```bash\n# Run all tests\nnpm test\n\n# Run tests without watch mode\nnpm run test:no-watch\n\n# Run tests with coverage\nnpm run test:coverage\n\n# Run E2E tests\nnpm run cypress\n```\n\n### Testing Utilities\n\n```typescript\n// Component testing example\nimport { render, screen } from \"@testing-library/react\";\nimport { Provider } from \"react-redux\";\nimport { store } from \"../redux/store\";\nimport Button from \"./Button\";\n\nconst renderWithProviders = (component: React.ReactElement) =\u003e {\n  return render(\u003cProvider store={store}\u003e{component}\u003c/Provider\u003e);\n};\n\ntest(\"renders button with correct text\", () =\u003e {\n  renderWithProviders(\u003cButton\u003eClick me\u003c/Button\u003e);\n  expect(screen.getByText(\"Click me\")).toBeInTheDocument();\n});\n```\n\n---\n\n## Deployment\n\n### Build for Production\n\n```bash\n# Generate configuration\nnpm run config\n\n# Build the application\nnpm run build\n\n# Preview production build\nnpm run preview\n```\n\n### Environment-Specific Configuration\n\n```bash\n# Development\nnpm run config -- --env=development\n\n# Staging\nnpm run config -- --env=staging\n\n# Production\nnpm run config -- --env=production\n```\n\n---\n\n## Available Scripts\n\n| Script                  | Description                                               |\n| ----------------------- | --------------------------------------------------------- |\n| `npm start`             | Start development server with hot reload                  |\n| `npm run build`         | Build production bundle                                   |\n| `npm run config`        | Generate runtime configuration from environment variables |\n| `npm test`              | Run tests in watch mode                                   |\n| `npm run test:no-watch` | Run tests once                                            |\n| `npm run test:coverage` | Run tests with coverage report                            |\n| `npm run lint`          | Check code for linting errors                             |\n| `npm run lint:fix`      | Fix auto-fixable linting errors                           |\n| `npm run format`        | Format code with Prettier                                 |\n| `npm run cypress`       | Open Cypress E2E testing interface                        |\n| `npm run analyze`       | Analyze bundle size                                       |\n\n---\n\n## Contributing\n\nWe welcome contributions! Please see our [Contributing Guidelines](.github/CONTRIBUTING.md) for details.\n\n### Development Workflow\n\n1. **Clone the repository:**\n\n```bash\ngit clone https://github.com/sourcefuse/arc-react-sass-ui.git\ncd arc-react-sass-ui\n```\n\n2. **Create a feature branch**:\n\n```bash\ngit checkout -b feature/amazing-feature\n```\n\n3. **Make your changes**\n\n4. **Run tests**:\n\n```bash\nnpm test\n```\n\n5. **Commit your changes**:\n\n```bash\ngit commit -m 'Add amazing feature'\n```\n\n6. **Push to the branch**:\n\n```bash\ngit push origin feature/amazing-feature\n```\n\n7. **Open a Pull Request**\n\n### Code Standards\n\n- **TypeScript**: All new code must be written in TypeScript\n- **Testing**: New components must include tests\n- **Documentation**: Update documentation for new features\n- **Linting**: Code must pass ESLint checks\n- **Formatting**: Code must be formatted with Prettier\n\n---\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n---\n\n## Support\n\n- **Issues**: [GitHub Issues](https://github.com/sourcefuse/arc-react-sass-ui/issues)\n- **Email**: support@sourcefuse.com\n\n---\n\n## Acknowledgments\n\n- **Material-UI** for the excellent component library\n- **React Boilerplate** for architectural inspiration\n- **Vite** for the blazing-fast build tool\n- **Redux Toolkit** for state management\n- **OAuth2/OpenID** Connect community for authentication standards\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  \u003cp\u003eBuilt by \u003ca href=\"https://www.sourcefuse.com\"\u003eSourceFuse\u003c/a\u003e\u003c/p\u003e\n  \u003cp\u003e\n    \u003ca href=\"https://github.com/sourcefuse/arc-react-sass-ui\"\u003e⭐ Star us on GitHub\u003c/a\u003e •\n    \u003ca href=\"https://github.com/sourcefuse/arc-react-sass-ui/issues\"\u003e Report Bug\u003c/a\u003e •\n    \u003ca href=\"https://github.com/sourcefuse/arc-react-sass-ui/issues\"\u003e Request Feature\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsourcefuse%2Farc-react-sass-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsourcefuse%2Farc-react-sass-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsourcefuse%2Farc-react-sass-ui/lists"}