Feature Flags in React application

Infrastructure as Code & Cloud Native
1

Hi there,

I’m trying to configure a React application to leverage Gitlab’s feature flags integration and no matter what I do but I always get a 401 response from the server.

I’m configuring my client with the configuration data given in the “React proxy SDK” modal (i.e. API URL and Instance ID) and installed the React proxy SDK https://docs.getunleash.io/sdks/proxy-react.

I don’t really know what I have to put in appName. The configuration modal says that “Set the Unleash client application name to the name of the environment your application runs in…”. I have tried multiple possible values with no luck: dev, development, prod, production, etc…

At this point I doubt if its even possible to configure this in a Javascript/React application since all Unleash frontend clients uses Unleash Proxy and I doubt if the given url is a proxy url or not.

Any help would be much appreciated. Thanks!

2

Hi @alfupe

I actually ran into the same issue and then I noticed this from the Unleash documentation:

This library is meant to be used with the unleash-proxy. The proxy application layer will sit between your unleash instance and your client applications, and provides performance and security benefits. DO NOT TRY to connect this library directly to the unleash instance, as the datasets follow different formats because the proxy only returns evaluated toggle information.

And that is exactly what we were doing when calling the Gitlab API directly. Turns out Gitlab only provides us with the Unleash instance and if we want to connect a client side SDK to it we need to host a proxy ourselves.
This proxy to be exact: GitHub - Unleash/unleash-proxy: Unleash Proxy is used to safely integrate frontend application with Unleash in a secure and scaleable way.

After putting this up on a server and connecting the React SDK to the proxy everything worked as expected.

 docker run -d \
  -e UNLEASH_PROXY_SECRETS=totally_secret \
  -e UNLEASH_URL=APP_URL_FROM_GITLAB
  -e UNLEASH_INSTANCE_ID=INSTANCE_ID_FROM_GITLAB \
  -e UNLEASH_API_TOKEN=PERSON_ACCESS_TOKEN \
  -e UNLEASH_APP_NAME=GITLAB_ENV \
  -p 3000:3000 \
  unleashorg/unleash-proxy
1 Like
3

Thanks a lot Ramon! we will try your solution and I’ll let you know how it goes. Again thanks!!

4

Hi Ramon and thanks again for sharing your solution.

It definitely works! The only downside is that we would need as many proxies as projects so we will try another solution. We will see if it could be possible for each project’s backend to connect to gitlab and expose the feature flags via API endpoint.

Thanks for your help!

1 Like
5

@alfupe @RamonGebben Thanks for talking about this issue guys!

Quick question: Where do you find the value for UNLEASH_API_TOKEN? I am using this directly from Gitlab and its not clear where to get this api token. Thanks!

6

@cvillanueva10 The UNLEASH_API_TOKEN would be your personal access token for Gitlab which can be obtains from: https://gitlab.com/-/profile/personal_access_tokens
In case you’re running a hosted version of Gitlab this would be <your-gitlab-domain>/-/profile/personal_access_tokens
When you create this access token make sure to add the scope api