Skip to main content

Quickstart Feature Flags

On this page you will integrate your web application with Nblocks Feature Flags. This allows you to conditionally give access to or show / hide features or content to your users.

Some use cases for feature flags are:

  • Restrict access to premium content that just users with a certain plan can access
  • Try beta features on a selection of customers
  • Show a message to all users during a scheduled release.
  • Protect a feature with Role based access controll (RBAC).

The content of this quickstart

  1. First we'll go through how you will apply a few lines of code to conditionally show content in your app.
  2. Then we'll create the flags for the features in Nblocks Admin with conditions that should apply to it.
Prerequisites
  1. If you haven't already, sign up for Nblocks and get access to your app id
  2. Completed the Quickstart since we'll be using the magic of access tokens in this quickstart

Integrating in your code​

The integration essentially consists of requesting an evaluation of a flag by providing information about the current user and then handling the evaluation response. For the purpose of this quickstart we'll attach the user access token that will have Nblocks automatically resolve all the information that's necessary for evaluating a flag.

Here's an example of the anatomy of a evaluation response.

Now, let's integrate this into our app!

Example code​

Imagine you have a component that looks something like this:

// We just want to render this if we're doing a release
<h1>We're currently doing a release and will be back soon</h1>

// We just want to render this for premium customers
<span>This is premium content</span>

// We just want to render this for beta customers 
<a href="/beta">Button to beta feature</a>

To conditionally render these different elements we can create a simple component. Name this component FeatureFlags.

import { useEffect, useState } from 'react';

// The component takes the prop flag.
export default function FeatureFlag({ flag, children }) {

    // Replace this with your own APP ID
  const APP_ID = 'XXX';

  // This will be our variable telling if the feature is enabled or and we should render the component children
  // Initially this variable is false
  const [enabled, setEnabled] = useState(false);

  useEffect(() => {
    // Evaluate the flag
    const accessToken = window.localStorage.getItem('access_token');
    if (accessToken) {
      evaluate(accessToken);
    }
  }, []);

  const evaluate = async (accessToken) => {
    const result = await fetch(
      `https://backendless.nblocks.cloud/flags/evaluate/${APP_ID}/${flag}`,
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          accessToken,
        }),
      }
    ).then((res) => res.json());
    setEnabled(result.enabled);
  };

  // Only if enabled should we render the component children
  if (enabled) return children;
  else return '';
}

Now we can use this component anywhere in your app to conditionally show content like pages or buttons in our React app. Like this, where the changes are highlighted:

<FeatureFlag flag="release-announcement">
    <h1>We're currently doing a release and will be back soon</h1>
</FeatureFlag>
<FeatureFlag flag="premium">
    <span>This is premium content</span>
</FeatureFlag>
<FeatureFlag flag="beta-feature">
    <a href="/beta">Button to beta feature</a>
</FeatureFlag>

Now when we have the flag names sorted out and integrated in the code we can go ahead and create them in Nblocks Admin.

Managing flags in Nblocks Admin​

When signing up for Nblocks you also got access to Nblocks Admin where you can customize and make changes to your app configuration and access other features.

Go to Nblocks Admin and login.

In this part we'll be creating a feature flag that matches your flag ID in code and define who should have access to it

Step 1. Create flag​

Click the flags tab and create a new flag. Call it "beta-feature" since this is the flag we expect to evaluate in our code.

Adding a flag

Now let's add conditions to this flag so it can be evaluated when the right user tries accessing it.

Step 2. Create group​

With groups we can build reusable conditions that can be attached to our different feature flags. Think of this as you'd want to target an individual tenant, user or a group of roles. That's what groups are for.

Navigate to Feature flags and click the groups tab. Click add group and name it "beta-customer" and specify to match on "Workspace ID" using the operator "Equals" and choose one of the current tenants that has signed up for your app.

Adding a group

Step 3. Attach the group to the flag​

Get back to the flags tab and click edit on the "beta-feature" flag we created earlier.

Add the "beta-customer" group and make sure that "Enabled if match" is set to true. This means that the flag will be evaluated to enabled: true if any of the groups match on the current user.

Adding a flag

Step 4. Activate the flag​

Flags are inactive by default protect you from making misstakes. Click on the Inactive status and toggle it to Active and click save.

Testing it​

We can now test this by logging into your app with the tenant we selected as target in the "beta-customer" group. You should see the content that was set with the flag beta-feature. Now you can try creating flags for the other elements.

That's it, your now done with this quickstart

Can I provide other information than access token?

You can send whatever context information you want to the evaluation api. But we've simplified it using a base structure so you can build groups in Nblocks Admin more easily.

The context object contains three areas, user, org and device.

  • Each one of them contains the property key. You can assign any value to this property.
  • You can also assign any values you want to the other properties.
  • When building the group targets you can define is the value should be equal (==), contain, beginWith or endWith the value.

Structure of the body that can be sent to /flags/evaluate

{
    context: {
        user: {
            key: "useThisAsYouWant",
            id: "63d2ab029e23db0afb07a5a7",
            role: "ADMIN",
            name: "John Doe";
        }

        org: {
            key: "useThisAsYouWant",
            id: "63d2ab029e23db0afb07a5a7",
            plan: "PREMIUM",
            name: "My Workspace"
        }

        device: {
            key: "iphone"
        }
    },
    accessToken: "XXXXXX"
}
tip

Providing the access token will automatically resolve all values for user and org so you don't have to. Read more in the API reference

tip

Instead of making multiple requests for each flag you can evaluate all flags in bulk once for better performance. See the API reference