How to Set Up Custom User Roles and Permissions in FlutterFlow

Open the Firebase Console → Firestore → your 'users' collection. Click on any user document and tap 'Add field'. Add a field named 'role' of type String with a default value of 'viewer' (or whichever role new users should receive). In FlutterFlow, go to the left sidebar → Firestore (database icon) → find your 'users' collection schema. Add the 'role' field as a String type there too so FlutterFlow knows about it when building data bindings. Update your app's user creation flow: in the Action Flow that runs after sign-up, after the Firebase 'Create User' step, add a 'Create Document' action in the users collection that sets the role field to 'viewer'. This ensures every new user has a role from the moment their account is created.

FlutterFlow's 'Authenticated User' context gives you access to Firebase Auth fields (email, UID, displayName) but not custom Firestore fields like 'role'. To access the role throughout the app, query the users Firestore document once on app start and store the role in App State. On your initial authenticated page (e.g., Home page), add an 'On Page Load' action that queries the users collection document where the document ID matches the current user's UID. After the query, add an 'Update App State' action that sets a 'userRole' App State variable (String type) to the Firestore document's role field. Now 'userRole' is available anywhere in the app for conditional checks.

Navigate to a page that has elements only certain roles should see — for example, an 'Admin Dashboard' button or a 'Delete' action button. Select the widget you want to restrict. In the properties panel on the right, find the 'Conditional Visibility' section (sometimes labeled 'Visible When' or under Conditional settings). Add a condition: 'App State → userRole equals [string] admin'. The widget will only be visible when the current user has the admin role. Apply the same pattern to entire sections by wrapping them in a Column or Container and applying the condition to the container. Repeat for editor-only features using 'userRole equals editor'.

Open the Firebase Console → Firestore → Rules tab. Add rules that check the role field on the user's document before allowing sensitive operations. The pattern is: function isRole(role) { return get(/databases/$(database)/documents/users/$(request.auth.uid)).data.role == role; }. Use this function in your collection rules. For example, a 'content' collection where only admins can delete documents: 'allow delete: if isRole("admin");'. Role rules must be written in the Firebase Console — FlutterFlow's visual security rule editor does not yet support custom function definitions. Deploy the rules and test them using the Firebase Console's Rules Playground.

1rules_version = '2';
2service cloud.firestore {
3  match /databases/{database}/documents {
4
5    // Helper: check caller's role from their user document
6    function getRole() {
7      return get(/databases/$(database)/documents/users/$(request.auth.uid)).data.role;
8    }
9    function isAdmin() { return getRole() == 'admin'; }
10    function isEditor() { return getRole() == 'editor' || isAdmin(); }
11    function isViewer() { return request.auth != null; }
12
13    // Users collection: users can read/write their own doc; admins can read all
14    match /users/{uid} {
15      allow read: if request.auth.uid == uid || isAdmin();
16      allow write: if request.auth.uid == uid;
17      allow update: if isAdmin(); // admins can update any user (e.g. change role)
18    }
19
20    // Content: viewers can read, editors can create/update, admins can delete
21    match /content/{docId} {
22      allow read: if isViewer();
23      allow create, update: if isEditor();
24      allow delete: if isAdmin();
25    }
26  }
27}

Build an Admin Users page in FlutterFlow that lists all users and lets admins change their roles. Add a Repeating Group with a Backend Query on the users collection (admin-only access per Security Rules). Each list item shows the user's email and a Dropdown widget bound to the role field. Add an 'On Dropdown Change' action that calls 'Update Document' on the users collection, setting the role field to the new dropdown value. Protect the entire Admin page with a conditional on page load: if userRole is NOT 'admin', navigate away to the home page. This prevents non-admin users from accessing the admin URL directly.