How to Create a Multi-Tenant App with FlutterFlow

Structure all tenant data under a tenants/{tenantId}/ path prefix. Create the following nested collections: tenants/{tenantId}/products, tenants/{tenantId}/orders, tenants/{tenantId}/users (tenant-specific user profiles), and tenants/{tenantId}/settings (single document with tenant config). The settings document has fields: tenantName (String), logoUrl (String), primaryColor (String, hex like '#2196F3'), plan (String: 'free'/'pro'/'enterprise'). On the top-level users collection (Firebase Auth users), add a tenantId field (String) that links each user to their organization. Set Firestore Security Rules to enforce tenant isolation: match /tenants/{tenantId}/{document=**} { allow read, write: if request.auth != null && get(/databases/$(database)/documents/users/$(request.auth.uid)).data.tenantId == tenantId; }. This ensures users can only access data under their own tenant path.

Every Backend Query in your app must use the path tenants/{currentUser.tenantId}/ as the collection prefix. On the current user's document, read the tenantId field and store it in App State tenantId (persisted) on login. For a products list page, set the Backend Query collection path to tenants/{appState.tenantId}/products instead of just products. For orders: tenants/{appState.tenantId}/orders. Do this for EVERY collection in the app. Create Firestore document references that always include the tenant prefix. When creating new documents, always create them under the tenant path: Create Document in tenants/{appState.tenantId}/products. This pattern ensures complete data isolation without any additional filtering logic.

On the login success Action Flow, after authenticating the user, query the tenant settings document at tenants/{user.tenantId}/settings. Read the logoUrl, primaryColor, and tenantName fields. Store these in App State variables: tenantLogo (String), tenantPrimaryColor (String), tenantName (String), all persisted. In your app's AppBar, replace the static logo with a dynamic Image widget bound to App State tenantLogo. For the primary color, FlutterFlow's theming is static, so apply the tenant color to key elements using Conditional Styling or a Custom Widget that reads the hex color from App State and applies it. Set the AppBar title or subtitle to App State tenantName. This way, each tenant sees their own branding when they log in.

Create a TenantAdminPage accessible only to users with role 'admin' within the tenant. Add a ListView bound to Backend Query on tenants/{appState.tenantId}/users showing each member's name, email, role, and join date. Add role management: each row has a DropDown with options (admin, editor, viewer). On change, Update Document to set the new role on both the tenant user profile and the top-level user doc. Display a member count and tenant plan information from the settings doc. Add a Remove User button with a confirmation dialog that deletes the tenant user profile (but does not delete the Firebase Auth account, which is managed separately).

On the TenantAdminPage, add an Invite User section with a TextField for the invitee's email and a DropDown for their initial role. The Invite button's On Tap Action Flow calls a Cloud Function named inviteUser that: creates an invite document in tenants/{tenantId}/invites with fields email, role, tenantId, invitedBy, invitedAt, and status 'pending'; then sends an email (via SendGrid or Firebase Extensions) with a signup link containing the tenantId as a URL parameter: https://yourapp.com/signup?tenant={tenantId}&invite={inviteId}. On the signup page, read the tenant URL parameter. After the user creates their account, the signup Action Flow: sets tenantId on their user doc, creates a tenant user profile at tenants/{tenantId}/users/{uid}, updates the invite status to 'accepted', and navigates to the tenant's home page.

Create a SuperAdminPage accessible only to users with a global superAdmin flag on their user doc. Add a ListView showing all tenant documents from the tenants collection (top level), displaying tenantName, plan, member count, and creation date. Add the ability to create new tenants: a form with tenantName, initial admin email, and plan selection. On submit, create the tenant document, settings document, and an invite for the initial admin. Add tenant-level controls: upgrade/downgrade plan, view usage statistics, and disable a tenant (set an isActive flag that the app checks on login to block access). Use a DropDown to switch between tenants for debugging: selecting a tenant overrides the App State tenantId temporarily.