Authentication Flow Composer-3 | Getting Started

Authentication Flow Composer is a UI-based tool to design and configure the authentication flows for the WSO2 Identity Server. This tool allows users to define their authentication flows with a UI-based flow (Visual flow) and a script-based flow. Therefore, even an entry-level user who is not familiar with the WSO2 Identity Server syntax will be able to define their authentication flows easily with this approach.

Configure Identity Server

First, you have to configure the WSO2 Identity Server to run the Authentication Flow Composer tool. You can follow the steps below for that.

• Download and install the WSO2 Identity Server from here.

Note: In this guide, the installation location of WSO2 Identity Server is referred to as <IS_HOME>.

• Add the following code to <IS_HOME>/repository/conf/deployment.toml in WSO2 Identity Server to allow CORS.

    [cors]
    allowed_origins = [
       "http://localhost:3000"
    ]
    supported_methods = [
       "GET",
       "POST",
       "HEAD",
       "OPTIONS",
       "PUT",
       "PATCH",
       "HEAD",
       "DELETE",
       "PATCH"
    ]
    exposed_headers = [ "Location" ]

• Start the WSO2 Identity Server from <IS_HOME>/bin using following commands.

Linux / Mac OS --> sh wso2server.sh
Windows --> wso2server.bat

Run the Application

• Download or clone the project source code from https://github.com/wso2-incubator/identity-authentication-flow-composer.
• Run npm install from the command line in the project root directory to install all dependencies.
• Then run npm start.
• Open http://localhost:3000 to view the application in the browser.

Use Templates

Authentication Flow Composer provides a set of predefined authentication templates such as basic login, role-based, user store-based, tenant-based, and from the sidebar of the application, you will be able to view the list of those available adaptive authentication templates. You can select a template and use it as it is or modify it to define your authentication flow.

Define Authentication Flows with Visual Editor

If you want to edit an authentication step (add or remove authenticators, change the step to a subject identifier or an attributes identifier), click the edit button of the corresponding authentication step from the visual editor, and you will be able to edit the authentication step with the following menu.

For the first authentication step, Fido and Totp authentication are disabled because they are second-factor authenticators. They will be enabled once you add an authentication step to the flow with a basic or an identifier-first authenticator.

Then you can add another authentication step or condition to the authentication flow by clicking the + button in the visual editor. You can also see that the script is updated as you add the authentication steps and conditions to the flow.

Define Authentication Flows with Script Editor

You can define your authentication flows using the script editor available in the Authentication Flow Composer, and it will also automatically generate the visual flow for you. You can find a complete guide for the syntax to define authentication flows using the script editor from Adaptive Authentication JS API Reference.

I hope you found this blog useful. Thanks for reading!