How to Set Up a Tiered Access Control System in FlutterFlow

Add two fields to your users collection: tier (String — free, basic, pro, or enterprise) and subscriptionExpiresAt (Timestamp). Set the default tier to 'free' for new signups by adding a Firestore Create Document action in your sign-up flow. Create a `features` collection with documents for each gated feature, containing: name (String), description (String), requiredTier (String), and icon (String — icon name). Create an Option Set named SubscriptionTier with values ordered by access level: free (0), basic (1), pro (2), enterprise (3). The numeric ordering lets you compare tiers easily in Custom Functions.

Create a Custom Function named tierMeetsRequirement that takes two String parameters: userTier and requiredTier. The function maps each tier to a numeric level (free=0, basic=1, pro=2, enterprise=3) and returns true if the user's tier level is greater than or equal to the required tier level. This single function powers all tier checks throughout the app. Use it in Conditional Visibility conditions, Action Flow conditions, and Backend Query filters to control access consistently.

1// Custom Function: tierMeetsRequirement
2bool tierMeetsRequirement(
3  String userTier,
4  String requiredTier,
5) {
6  const levels = {
7    'free': 0,
8    'basic': 1,
9    'pro': 2,
10    'enterprise': 3,
11  };
12  final userLevel = levels[userTier] ?? 0;
13  final requiredLevel = levels[requiredTier] ?? 0;
14  return userLevel >= requiredLevel;
15}

For each gated feature section on your app pages, wrap the content in a Stack. The bottom layer is the actual feature content. The top layer is a Container overlay with Conditional Visibility set to show when tierMeetsRequirement returns false (user tier is below required tier). Style the overlay with a semi-transparent white background, a lock Icon at the center, the required tier name (e.g., 'Pro Feature'), and an 'Upgrade' ElevatedButton that navigates to the Pricing page. This creates a frosted-glass lock effect over features the user cannot access while still showing a preview of what they are missing.

Create a Pricing page with a comparison matrix. Use a Column containing: a header Row with tier names (Free, Basic, Pro, Enterprise), and then one Row per feature from the features collection (Backend Query ordered by name). Each Row shows the feature name on the left and four cells — one per tier. Each cell shows a checkmark Icon if the feature's requiredTier level is less than or equal to that column's tier level (using the tierMeetsRequirement function), or an empty cell otherwise. At the bottom of each tier column, add a Subscribe button with the monthly price. The current user's tier column is highlighted with a colored border and 'Current Plan' label.

Create Stripe subscription products for each tier in the Stripe Dashboard (basic, pro, enterprise). Create a Cloud Function that generates a Stripe Checkout Session for subscription mode, accepting the priceId parameter. On the FlutterFlow pricing page, each Subscribe button calls this function with the corresponding priceId and opens the returned URL. Create a second Cloud Function as a Stripe webhook handler. On the checkout.session.completed event, read the subscription data, determine which tier was purchased based on the priceId, and update the user's Firestore document with the new tier and subscriptionExpiresAt. On customer.subscription.deleted, revert the user's tier to 'free'.

1// Stripe webhook handler (simplified)
2exports.stripeWebhook = functions.https
3  .onRequest(async (req, res) => {
4    const sig = req.headers['stripe-signature'];
5    const event = stripe.webhooks.constructEvent(
6      req.rawBody, sig, webhookSecret
7    );
8
9    if (event.type === 'checkout.session.completed') {
10      const session = event.data.object;
11      const userId = session.client_reference_id;
12      const priceId = session.line_items?.data[0]
13        ?.price?.id;
14
15      const tierMap = {
16        'price_basic_xxx': 'basic',
17        'price_pro_xxx': 'pro',
18        'price_enterprise_xxx': 'enterprise',
19      };
20      const tier = tierMap[priceId] || 'free';
21
22      await admin.firestore()
23        .doc(`users/${userId}`)
24        .update({ tier, subscriptionExpiresAt: ... });
25    }
26
27    if (event.type === 'customer.subscription.deleted') {
28      // Revert to free tier
29      const userId = /* extracted from metadata */;
30      await admin.firestore()
31        .doc(`users/${userId}`)
32        .update({ tier: 'free' });
33    }
34
35    res.status(200).send('OK');
36  });

Create a scheduled Cloud Function that runs daily and queries users where subscriptionExpiresAt is in the past and tier is not 'free'. For each expired user, update their tier to 'free'. This catches edge cases where the Stripe webhook did not fire. Additionally, add Firestore Security Rules that enforce tier-based access on sensitive collections. For example, a rule on a premium-only collection can check request.auth.token.tier (set via Custom Claims from a Cloud Function) to reject read/write operations from free-tier users even if the UI is bypassed.