Authentication Flow Composer-2 | Implementation

Hi everyone. In my previous blog, I gave you a brief introduction to Authentication Flow Composer. Currently, I have started implementing this and I will be discussing the problems I have faced, the main technologies I have used so far, and the reasons for using them in this blog.

Authentication Flow Composer has three main components.

1. Sidebar where users can select already existing templates of authentication scripts.
2. Visual editor where you can define the authentication flow through UI.
3. Script Editor

Current Implementation of Authentication Flow Composer

While implementing these three components I have used different technologies as follows.

React and Typescript

React is an open-source JavaScript library developed by Facebook for implementing User Interfaces specifically for single-page applications. React has reusable components, and it is testable. It also suits well for component-based UI, and its fast rendering with virtual DOM makes it a suitable choice for implementing this application.

One problem faced while implementing this was whether to use Typescript or JavaScript with React. Static type checking and the IntelliSense support of Typescript makes more readability and maintainability in the code. So we have decided to use Typescript for this application.

Why Redux?

Authentication Flow Composer tool needs to modify the script if the user defines the authentication flow through the visual editor, and need to do vise versa and update the visual editor if the user modifies the script directly. This requires sharing data across the visual editor and the script editor. We decided to use Redux for handling this as it simplifies the application, makes it easy to maintain, and the components do not need to provide states to their children components to share data because it is easily handled by Redux.

Functions or Classes?

Mainly there are two types of components in React.

1. Stateful or Class Components
2. Stateless or Functional components.

Functional components are easy to work and test as they do not have a state or lifecycle methods as in Class-based components. They also increase the reusability and decrease the coupling. React Hooks such as useEffect, useState, etc. supports functional components to perform the things that we were only able to perform with the classes. So we have decided to use functions with React Hooks instead of class-based components for implementing this application.

React Flow

The visual editor of Authentication Flow Composer needs to build a node-based graph to visualize the authentication flow. React Flow library supports building customized nodes and edges based graphs. It also has proper documentation, and it is customizable. React flow is also a very active library in GitHub compared to others, and it is really easy to use. It also supports fast rendering by only re-rendering the changed nodes. So we have decided to use this library and we were able to implement the visual flow with different customized nodes and edges with multiple handles according to the needs of this project.

Which editor?

Currently, the WSO2 identity server’s authentication scripts are written in JavaScript, and CodeMirror is using as the script editor. I have searched for several code editors such as CodeMirror, Ace, and Monaco that can be used with React for implementing the script editor of the Authentication Flow Composer. I have finally decided to use Monaco editor as the script editor because of the following reasons.

• A browser-based code editor
• Powers VS Code (Microsoft product) so that we can later integrate this with a VS-Code plugin for debugging purposes
• More features compared to other libraries
• Supports IE 9/10/11, Edge, Chrome, Firefox, Safari, and Opera browsers
• Written in Typescript
• Out of the Box IntelliSense with Auto-completion, Bracket matching, Errors & warnings
• Validation for JavaScript

Abstract Syntax Tree

The main problem raised while implementing this tool was how to track the changes of the script and how to implement the mapping between the script editor and the visual editor. We have decided to use an Abstract Syntax Tree for that. Several JavaScript parsers can be used to construct an Abstract Syntax Tree. First, I have tried to implement this using the acorn library, but then I have shifted to the babel library.

The reasons for choosing the babel library are as follows.

• Babel has its libraries for parsing to AST, generating the code, and traversing through the AST.
• Comment attachment.
• Support for JSX, Flow, Typescript
• Modern JavaScript works with all browsers
• Since it is heavily based on acorn and acorn-jsx, it has most of the functions in the acorn library
• React uses babel and therefore, more support with this project

Script for the basic login in WSO2 Identity Server

Part of the abstract syntax tree generated using babel library

So hope you get a brief idea on why I have used those technologies for implementing Authentication Flow Composer. Stay tuned, as I will be sharing more information with you in my future blogs.

Thanks for reading.