How to Create a Role-Based Access Control System in FlutterFlow

Open the Firestore Schema in FlutterFlow and add a new field called role of type String to your users collection. Set the default value to viewer. The allowed values are admin, editor, and viewer. Manually set one test user's role to admin directly in the Firebase Console. This role field becomes the single source of truth for what each user is allowed to do throughout the app. Do not use an integer or boolean — a descriptive string enum is clearer and extensible if you add roles later.

Open your admin-only page (e.g., AdminDashboard). In the Action Flow editor, add an On Page Load action. Insert a Conditional Action: if currentUserDocument.role is NOT equal to admin, execute Navigate To → HomePage with Replace Route enabled. This prevents non-admins from accessing the page even if they type the URL directly. Repeat for editor-only pages with the condition checking role != admin AND role != editor. The Replace Route option removes the restricted page from the navigation stack so the back button cannot return to it.

Select any element that should only appear for certain roles — for example, an Edit button on a content card. In the Properties Panel, scroll to Conditional Visibility. Set the condition to currentUserDocument.role == admin OR currentUserDocument.role == editor. For delete buttons, restrict to admin only. For the admin navigation tab in a BottomNavigationBar, wrap it in a Container and apply Conditional Visibility where role == admin. This hides the UI for unauthorized users but remember: UI hiding alone is not security — Firestore Rules are the real enforcement.

In the Firebase Console under Firestore Rules, add rules that check the requesting user's role document before allowing writes. For a content collection: match /content/{docId} { allow read: if request.auth != null; allow create, update: if get(/databases/$(database)/documents/users/$(request.auth.uid)).data.role in ['admin', 'editor']; allow delete: if get(/databases/$(database)/documents/users/$(request.auth.uid)).data.role == 'admin'; }. This ensures that even if someone bypasses the FlutterFlow UI and calls Firestore directly via the API, they cannot write or delete without the proper role.

1rules_version = '2';
2service cloud.firestore {
3  match /databases/{database}/documents {
4    function userRole() {
5      return get(/databases/$(database)/documents/users/$(request.auth.uid)).data.role;
6    }
7    match /content/{docId} {
8      allow read: if request.auth != null;
9      allow create, update: if userRole() in ['admin', 'editor'];
10      allow delete: if userRole() == 'admin';
11    }
12    match /users/{userId} {
13      allow read: if request.auth != null;
14      allow update: if request.auth.uid == userId
15        && request.resource.data.role == resource.data.role
16        || userRole() == 'admin';
17    }
18  }
19}

Create a new page called AdminUserManagement. Add a ListView bound to a Backend Query on the users collection ordered by displayName ascending. Each list item Row contains a CircleImage for the avatar, a Text widget showing displayName, a Text showing email, and a DropDown widget populated with the values admin, editor, viewer. Bind the DropDown initial value to the user document's role field. On the DropDown's On Change action trigger, add an Update Document action targeting that user's document reference, setting the role field to the new DropDown value. Because your Firestore Rules restrict role changes to admins, only admin users can successfully execute this update.