Simple Feature Flag for Multitenant applications
Tags: feature, multitenant
Published: 2024-01-04 02:57:56

## What are Feature Flags?
Feature flags are conditional branches in the code that enable or disable certain features. They act as dynamic switches, allowing developers to activate or deactivate specific functionalities without modifying the codebase. This versatility is particularly advantageous in multitenant architectures where different tenants may require distinct features or configurations.

You can read more about why changing behavior over deployment is a wrong approach here [Deploys Are the ✨WRONG✨ Way to Change User Experience](https://www.honeycomb.io/blog/deploys-wrong-way-change-user-experience)


## How to implement Feature Flags?

You can choose from a very simple implementation to an open source like [Unleash](https://www.getunleash.io/), to a complete SaaS solution.

I would say that a SaaS solution to implementing a basic feature flag for most products would be overkill.
Even unleash would be overkill for most Startups.

My advice to most Startups is to start very simple with a feature flag, no need for rollout if you don't have enough users.

## Feature Flag for Multitenant apps

At Woovi we implement feature flags per tenant. Each tenant has an array of features that enable the feature for them. Example:

```jsx
const TenantSchema = new mongoose.Schema({
   features: {
      type: [String],
    },
});
```

The above code is a mongoose schema that defines that the Tenant collection/table would have a `features` of type array of strings.

To check on the backend if the tenant has the feature we would use a simple function or condition check:

```jsx
const hasFeature = (tenant, feature) => 
 tenant.features.includes(feature)
```

A basic `FeatureFlag` component to use in your React components

```jsx
export const FeatureFlag = ({
  feature,
  fallbackComponent = null,
  children,
  ...props,
}: Props) => {
  const tenant = useFragment(
    graphql`
      fragment FeatureFlag_tenant on Tenant {
        features
      }
    `,
    props.tenant,
  );

  if (!hasFeature(tenant, feature)) {
    return fallbackComponent;
  }

  return children;
};
```

the usage would be:

```jsx
<FeatureFlag feature={FEATURE.CASHBACK}>
   <Button>Give Cashback</Button>
</FeatureFlag>
```

## Organizing your Features

You can create an enum to organize all your available features

```jsx
enum FEATURES = {
 BETA,
 CASHBACK,
 PIX,
 CREDIT_CARD,
}
```

If you use a multirepo approach you can copy the features to keep the many repos synced. Otherwise, if you use a monorepo, you can create a package to share this.

You can also expose all available features and features available for the tenant using REST or GraphQL API, with GraphQL the query would be like this one:

```graphql
query {
   features # all available features
   tenant {
     features # features available for this particular tenant
   }
}
```

## In Brief
Sometimes I think we forget that we can build our in-house software solutions instead of delegating to a SaaS or open source.
The approach of this article is working well for Woovi even as we scale. We do have a rollout approach to some features, but we don't need an automated rollout yet.

If you are not using feature flags yet, you are developing software in the wrong way.

If you are using feature flags, what are you using to manage them?

---
Woovi
[Woovi](https://www.woovi.com) is a Startup that enables shoppers to pay as they like. To make this possible, Woovi provides instant payment solutions for merchants to accept orders.

If you want to work with us, we are [hiring](https://woovi.com/jobs/)!

---
Photo by <a href="https://unsplash.com/@joshuaryanphoto?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Joshua Reddekopp</a> on <a href="https://unsplash.com/photos/a-purple-and-white-object-on-a-purple-background-YQnTaPvCLGo?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>