January 25, 2023 — 6 min read
New Look + Authentication Options
I'm happy to announce that there's a new version of Flipt, v1.18.0 which has a few important changes.
- The whole UI has been rewritten in ReactJS and styled with TailwindCSS. Technically this happened in v1.17, but v1.18 has a few new features that we want to highlight, so we decided to wait and officially announce both at the same time.
- New authentication options — You can now authenticate into Flipt using Google, GitLab, Auth0, Dex, or any OpenID Connect-compliant service.
Refreshed User Interface
In the previous post, we went over the technical challenges and decisions we made to integrate our new UI, written in ReactJS, with the existing Flipt backend, written in Go. In this post, we'll quickly cover the why behind this initiative, the result of this effort, and explain how our new UI helps us to improve your experience as an end user of Flipt.
Our previous UI was written in VueJS and it had started showing its age. We had tried to keep it up to date as far as library and dependency versions, however, there was no getting around the fact that it had been written for our needs a few years ago and wasn't as flexible as we needed it to be going forward.
First off, we were using VueJS 2, which was a major version behind the current version of VueJS, 3. While it might not have been too difficult to update our application to the latest version of Vue, we theorized that it would end up requiring a lot more work than if we started fresh by rethinking the user experience and then picking a new framework.
In fact, the component library that we were using in our Vue2 app, Buefy, has explicitly stated that they would not support Vue3 going forward. While this is completely understandable and not a knock on Buefy, it was a concern for us as it meant we were 'stuck' on Vue2.
The second major issue with our front-end application was that it was written in plain JavaScript, so we weren't able to take advantage of all the nice type safety and tooling that you get with TypeScript. This ended up being another supporting reason as to why made the switch from VueJS to React since we knew we wanted to move to TypeScript and would have to effectively re-write the entire application anyways.
The final reason we decided to start from scratch with the UI was that we wanted to create a new, aesthetically pleasing look while enabling our small team to continue to work effectively and be able to ship new features for the front end. Thank goodness libraries such as TailwindCSS exist, allowing even us non-designers to quickly create an attractive UI that we could be proud of.
We were able to accomplish all of these things by switching over from VueJS to React, and the end result was a UI that looked much better and was easier for our team members to develop and maintain. We also decided that React would be a better choice for our application long term because of React's popularity, which makes it easier to find contributors and team members who enjoy working with it.
While we probably could have tackled some of these concerns by better componentizing the existing UI, or upgrading to Vue3 without Buefy, in the end, I think we made the right choice.
The result of our work is a brand-new UI that is responsive, easy to navigate, and looks great on all devices. Here are a few screenshots of the UI in action:
New Authentication Options
We’re excited to announce that Flipt now supports additional authentication options besides the static token authentication that we added in v1.15.0. This new, session-enabled, authentication is powered by the OIDC (Open ID Connect) protocol, which allows you to use your existing identity providers like Google, GitLab, Auth0, Dex, or Okta to log in to Flipt.
In the past we didn't have a great answer for how to secure the Flipt user interface from the outside world, other than to simply:
- Not expose it by putting it behind a VPN
- Put a reverse proxy in front and delegate the authentication to the proxy.
As noted above, in v1.15.0 we added static token support so that you could secure your integrating service-to-service communication with Flipt, but this still did not solve the problem of an end user wanting to authenticate with the UI.
Since OIDC is a popular standard for authentication, enabling it allows Flipt to support a variety of different identity providers using just one login flow, which makes it easier for you to secure your Flipt UI from the outside world.
So what does this mean for end users? If you configure an OIDC provider, Flipt will present it as a login option when you visit your Flipt dashboard. Once the end user authenticates with the provider, they will be returned to the Flipt dashboard. Flipt will establish a client token and set it in a protected cookie. The token has a configurable lifetime and will be rejected once that lifetime expires.
There are several new configuration settings that you can use to set up and customize your OIDC integration, and they are thoroughly documented in our updated docs. You can read more about them here:
Wrap Up
In future updates we'll be adding support for other non-OIDC-based authentication such as GitHub authentication (via OAuth2) as well as providing UI functionality to manage your static tokens and more.
We hope you’ll find this update useful, and we’re happy to answer any questions that you may have in our community Discord or via GitHub issues/discussions.
We also welcome all feedback on how to improve Flipt as a whole, so feel free to reach out! You can find us on GitHub, Twitter, Mastodon, and Discord.
