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.
- Sidebar where users can select already existing templates of authentication scripts.
- Visual editor where you can define the authentication flow through UI.
- Script Editor
While implementing these three components I have used different technologies as follows.
React and Typescript
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.
- Stateful or Class Components
- 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.
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.
- 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
Abstract Syntax Tree
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
- 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
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.