Open Source – ITechGenie Blog

June 10, 2025June 10, 2025

OpenFGA Studio – An Open Source Authorization Modeling Interface

Understanding OpenFGA

OpenFGA (Fine-Grained Authorization) is a high-performance authorization engine built for developers and inspired by Google’s Zanzibar paper. It excels in handling complex authorization scenarios with features that make it stand out:

Relationship-Based Authorization: Model complex access patterns through relationships
High Performance: Process millions of authorization checks per second
Flexibility: Support for RBAC, ABAC, and ReBAC models
Time-Based Access: Define temporal access rules with built-in support
Proven Architecture: Based on Google’s battle-tested Zanzibar system

While OpenFGA Playground provides a hosted application for experimentation, it comes with limitations:

Not open source
Cannot be deployed in air-gapped environments
Limited customization options
Dependency on external services

Why This Project?

I built OpenFGA Studio to address these limitations and provide:

A fully open-source solution deployable anywhere
Enhanced user experience for authorization modeling
Complete control over your authorization data
Customizable interface for specific needs
Seamless integration with existing systems

OpenFGA Studio streamlines the process of creating, testing, and managing authorization models, making complex authorization logic more accessible and manageable. Built with modern web technologies including React, TypeScript, and Material-UI, it provides a robust and intuitive interface for working with OpenFGA.

Key Features

1. Store Management

The interface provides a straightforward way for managing OpenFGA stores. You can:

Create new authorization stores
Switch between existing stores
View and manage store configurations
Track model versions and changes

2. Visual Authorization Model Editor

The model editor is a powerful interface for defining authorization rules with features including:

Syntax highlighting for better readability
Real-time validation against OpenFGA schema
Support for both DSL and JSON formats
Error highlighting and suggestions
Easy switching between model versions

3. Interactive Graph Visualization

Understand your authorization model at a glance with:

Visual representation of relationships between types
Interactive node exploration
Relationship flow visualization
Dynamic updates as you modify the model
Zoom and pan controls for large models

4. Advanced Tuple Management

The tuple management interface makes it easy to define and manage relationships:

Assisted tuple creation with type suggestions
Support for direct (freeform) tuple input
Batch operations for efficient management
Reverse chronological listing of tuples
Quick delete operations

5. Conditional Relationship Support

Handle complex authorization scenarios with conditional relationships:

Dynamic condition parameter inputs
Type-aware parameter validation
Timestamp and duration support
Visual feedback for condition state

6. Comprehensive Query Testing

Test your authorization rules with an intuitive interface:

Features include:

Visual query builder
Direct query input support
Real-time query validation
Historical query tracking
Quick query replay

7. Conditional Access Testing

Test complex conditional access patterns:

Test time-based access rules
Validate contextual conditions
Dynamic parameter inputs
Clear success/failure indicators

8. Developer-Friendly Features

OpenFGA Studio is built with developers in mind:

Clean, modern UI with dark mode support
Keyboard shortcuts for common operations
Copy/paste support for all fields
Detailed error messages
Response timing information

Technical Implementation

OpenFGA Studio is built with modern web technologies:

Frontend: React with TypeScript for type safety
UI Framework: Material-UI for consistent, responsive design
State Management: React hooks and context for efficient state handling
Build Tool: Vite for fast development and optimized production builds
API Integration: Axios for reliable API communication
Graph Visualization: React Flow for interactive model visualization

Common Use Cases

Authorization Modeling
- Design role-based access control (RBAC) systems
- Implement attribute-based access control (ABAC)
- Model relationship-based authorization
Testing and Validation
- Verify access control rules
- Test time-based permissions
- Validate complex conditional access
Development and Debugging
- Debug authorization issues
- Prototype authorization models
- Document access control patterns

Conclusion

OpenFGA Studio simplifies the complex task of fine-grained authorization modeling and testing. Whether you’re designing a new authorization system or maintaining an existing one, this tool provides the features needed to work efficiently with OpenFGA.

The combination of visual tools, intuitive interfaces, and powerful testing capabilities makes it an essential tool for developers working with authorization systems. The tool continues to evolve with new features and improvements based on community feedback and real-world usage patterns.

Feel free to contribute or request features at OpenFGA Studio

June 17, 2024June 18, 2024

Browser extension sample – Chrome/Edge – HttpRequestViewer

The Evolution of Browser Extensions: From Web Customization to Advanced Development Tools – Part 2
We discussed about The evolution of the Browser extensions in the previous post. Lets quick learn how to create a Chrome/Edge/Firefox extension. I have mentioned “Advanced development tools” in the title, but never got chance to explore those capabilities earlier. We will create a simple extension to explore the power of it.

Creating a browser extension has never been easier, thanks to the comprehensive documentation and support provided by browser vendors. Below, we’ll walk through the steps to create a simple extension for both Chrome and Microsoft Edge using Manifest V3. We will use this tool to print the list of HTTP requests that are fired in a given browser and list it in the page.

Basics of extensions:

Manifests – A manifest is a JSON file that contains metadata about a browser extension, such as its name, version, permissions, and the files it uses. It serves as the blueprint for the extension, informing the browser about the extension’s capabilities and how it should be loaded.

Key Components of a Manifest File:

Here are the key components typically found in a Manifest V3 file:

1. Manifest Version: There are different versions of the manifest file, with Manifest V3 being the latest and most widely adopted version. Manifest V3 introduces several changes aimed at improving security, privacy, and performance with lot of controversies around it. Read more about the controversies at Ghostery.
2. Name and Version: These fields define the name and version of the extension. Choose a unique name and version. An excellent guide of version semantics is available here.
3. Description: A short description of the extension’s functionality.
4. Action: Defines the default popup and icon for the browser action (e.g., toolbar button).
5. Background: Specifies the background script that runs in the background and can handle events like network requests and alarms.
6. Content Scripts: Defines scripts and stylesheets to be injected into matching web pages.
7. Permissions: Lists the permissions the extension needs to operate, such as access to tabs, storage, and specific websites.
8. Icons: Specifies the icons for the extension in different sizes. For this post I created a simple icon using Microsoft Designer. I gave a simple prompt with the description above and I got the below image. Extension requires different sizes for showing it in different places. I used Chrome Extension Icon Generator and generated different sizes as needed.

9. Web Accessible Resources: Defines which resources can be accessed by web pages.

Create a project structure as follows:

HttpRequestViewer/
|-- manifest.json
|-- popup.html
|-- popup.js
|-- background.js
|-- history.html
|-- history.js
|-- popup.css
|-- styles.css
|-- icons/
    |-- icon.png
    |-- icon16.png
    |-- icon32.png
    |-- icon48.png
    |-- icon128.png

Manifest.json

{
  "name": "API Request Recorder",
  "description": "Extension to record all the HTTP request from a webpage.",
  "version": "0.0.1",
  "manifest_version": 3,
  "host_permissions": [""],
  "permissions": ["activeTab", "webRequest", "storage"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icons/icon.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self';"
  },
  "web_accessible_resources": [{ "resources": ["images/*.png"], "matches": ["https://*/*"] }]
}

popup.html
We have two options with the extension.

1. A button with record option to start recording all the HTTP requests
2. Link to view the history of HTTP Requests recorded

<!DOCTYPE html>
<html>
  <head>
    <title>API Request Recorder</title>

    <link rel="stylesheet" href="popup.css" />
  </head>
  <body>
    <div class="heading">
      <img class="logo" src="icons/icon48.png" />
      <h1>API Request Recorder</h1>
    </div>
    <button id="startStopRecord">Record</button>

    <div class="button-group">
      <a href="#" id="history">View Requests</a>
    </div>

    <script src="popup.js"></script>
  </body>
</html>

popup.js
Two event listeners are registered for recording (with start / stop) and viewing history.
First event is used to send a message to the background.js, while the second one instructs chrome to open the history page in new tab.

document.getElementById("startStopRecord").addEventListener("click", () => {
  chrome.runtime.sendMessage({ action: "startStopRecord" });
});

document.getElementById("history").addEventListener("click", () => {
  chrome.tabs.create({ url: chrome.runtime.getURL("/history.html") });
});

history.html

 
<!DOCTYPE html>
<html>
  <head>
    <title>History</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>History Page</h1>
    <table>
      <thead>
        <tr>
		  <th>Method</th>
          <th>URL</th>
          <th>Body</th>
        </tr>
      </thead>
      <tbody id="recorded-data-body">
        <!-- Data will be populated here -->
      </tbody>
    </table>
    <script src="history.js"></script>
  </body>
</html>

history.js
Requests background.js to “getRecordedData” and renders the result in the html format.

document.addEventListener("DOMContentLoaded", () => {
  chrome.runtime.sendMessage({ action: "getRecordedData" }, (response) => {
    const tableBody = document.getElementById("recorded-data-body");
    response.forEach((record) => {
      const row = document.createElement("tr");
      const urlCell = document.createElement("td");
      const methodCell = document.createElement("td");
      const bodyCell = document.createElement("td");

      urlCell.textContent = record.url;
      methodCell.textContent = record.method;
      bodyCell.textContent = record.body;

      row.appendChild(methodCell);
      row.appendChild(urlCell);
      row.appendChild(bodyCell);
      tableBody.appendChild(row);
    });
  });
});

background.js
Background JS works as a service worker for this extension, listening and handling events.
The background script does not have access to directly manipulate the user page content, but can post results back for the popup/history script to handle the cosmetic changes.

let isRecording = false;
let recordedDataList = [];

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  console.log("Obtined message: ", message);
  if (message.action === "startStopRecord") {
    if (isRecording) {
      isRecording = false;
      console.log("Recording stopped...");
      sendResponse({ recorder: { status: "stopped" } });
    } else {
      isRecording = true;
      console.log("Recording started...");
      sendResponse({ recorder: { status: "started" } });
    }
  } else if (message.action === "getRecordedData") {
    sendResponse(recordedDataList);
  } else {
    console.log("Unhandled action ...");
  }
});

chrome.webRequest.onBeforeRequest.addListener(
  (details) => {
    if (isRecording) {
      let requestBody = "";
      if (details.requestBody) {
        if (details.requestBody.formData) {
          requestBody = JSON.stringify(details.requestBody.formData);
        } else if (details.requestBody.raw) {
          requestBody = new TextDecoder().decode(new Uint8Array(details.requestBody.raw[0].bytes));
        }
      }
      recordedDataList.push({
        url: details.url,
        method: details.method,
        body: requestBody,
      });
      console.log("Recorded Request:", {
        url: details.url,
        method: details.method,
        body: requestBody,
      });
    }
  },
  { urls: [""] },
  ["requestBody"]
);

Lets load the Extension

All set, now lets load the extension and test it.

Open Chrome/Edge and go to chrome://extensions/ or edge://extensions/ based on your browser.
Enable “Developer mode” using the toggle in the top right corner.
Click “Load unpacked” and select the directory of your extension.

Your extension should now be loaded, and you can interact with it using the popup.
When you click the “Record” button, it will start logging API requests to the console.

Click the “Record” button again and hit the “View requests” link in the popup to view the history of APIs.

I have a sample page (https://itechgenie.com/demos/apitesting/index.html) with 4 API calls, which also loads images based on the API responses. You could see all the API requests that is fired from the page including the JS, CSS, Images and API calls.

Now its up to the developers imagination to build the extension to handle these APIs request and response data and give different experience.

Code is available in GitHub at HttpRequestViewer

January 5, 2013December 25, 2015

Windows 8 style Alert box using GenieAlert (Javascript)

Windows Modern UI has introduced the very new style of Message box (Alert box) in it Windows 8 Operating System.

Inspired from this Modern UI message box, I have customized our GenieAlert to present the same style of Alert window.

Please refer to the GenieAlert for the instructions to install it in your web applications.

Click here to view the demo of the GenieAlert Win8.

October 13, 2012

Create Web Services using Axis Java2WSDL, WSDL2Java and Eclipse for all Servers manually – Part 2

With all the basic configurations done as specified in the last Article we continue to develop the Business logic.

Create a class named Calculator.java, place four public methods add, subtract, multiply and delete and place the appropriate logics in it.

package com.itechgenie.services.impl;
public class Calculator {
	public int add(int a, int b) {
		return a+b  ;
	}

	public int subtract(int a, int b) {
		return a-b ;
	}

	public int multiply(int a, int b) {
		return a * b ;
	}

	public int divide(int a, int b) throws ArithmeticException {
		return a /b ;
	}
}

This is the class that has to be exposed as the Web Service and we write the funky TestRunner.java class to do all out operations like creating WSDL file, creating stub file etc.
Generate WSDL file using Java2WSDL: Axis has a tool called Java2WSDL, which generates a WSDL file for a web service using a Java class. Java2WSDL file takes the following arguments.
1. o – name for WSDL file -> calculator.wsdl
2. n – target namespace -> mx:com.itechgenie.services.Calculator
3. l – url of web service -> http://<host:port>/<Project-Name>/services/calculator
Summing up the above arguments the following command line arguments is created.
```
String java2wsdlArgs[] = {"-ocalculator.wsdl", "-nmx:com.itechgenie.services.Calculator", "-v", "-lhttp://localhost:8080/axis/services/calculator", "com.itechgenie.services.Calculator"} ;
```
Read this Article on how to run the command line java tools from Eclipse.
You can run the Java2WSDL as follows in the TestRunner class. Naah, don’t ask how, just put the following lines the main method and press CTRL + F11.
```
try {
	Java2WSDL.main(java2wsdlArgs) ;
} catch (Exception e) {
	e.printStackTrace() ;
}
```
The Java2WSDL class has the System.exit(0); method called from inside. So lines after the Java2WSDL will not be executed. To get the other arguments supported you can just run Java2WSDL.main(new String[0]) ;. This will display all the arguments supported by Java2WSDL Utility and this works for other utilities also.
After running this Utility you will find the calculator.wsdl file created in the root folder of the Project.
Generate Server side and Client side codes using WSDL2Java: WSDL2Java is another tools provided by the AXIS, which can generate server side and client side Java classes using a WSDL file. These classes are needed for deploying the web service and also for accessing the web service using a Java client. This tool expects the following argument which includes the WSDL file generated in the last step.
1. o – output folder -> src
2. p – package for generated classes -> mx:com.itechgenie.services. generated
3. s – generate server side classes as well
4. *.wsdl – WSDL file of any web service
Summing up the above arguments the following command line arguments is created.
```
String wsdl2javaArgs[] = {"-osrc", "-pcom.itechgenie.generated.service", "-s", "calculator.wsdl", "-v"} ;
```
Read this Article on how to run the command line java tools from Eclipse.
Now run the WSDL2Java utility as follows.
```
try {
	WSDL2Java.main(wsdl2javaArgs) ;
} catch (Exception e) {
	e.printStackTrace() ;
}
```
Once the above command is run, Just refresh the project in eclipse, you will find the following files created inside the “com.itechgenie.generated.service” package.
1. Calculator.java
2. CalculatorService.java
3. CalculatorServiceLocator.java
4. CalculatorSoapBindingImpl.java
5. CalculatorSoapBindingStub.java
6. deploy.wsdd
7. undeploy.wsdd
The above files can be used in both Server and Clients side as Skeleton (CalculatorSoapBindingImpl.java) and the Stub (CalculatorSoapBindingStub.java) respectively.

Binding the business logic with the Skeleton: Take the Skeleton file and you will find the exact methods that were available in our Business logic class (Calculator.java.).
Create a instance of the Business class and invoke the appropriate method from the skeleton as follows (Find the lines highlighted in yellow.).

package com.itechgenie.generated.service;

import com.itechgenie.services.Calculator;

public class CalculatorSoapBindingImpl implements com.itechgenie.generated.service.Calculator{

	Calculator calculatorImpl = new Calculator() ;

    public int add(int in0, int in1) throws java.rmi.RemoteException {
    	return calculatorImpl.add(in0, in1) ;
    }

    public int subtract(int in0, int in1) throws java.rmi.RemoteException {
    	return calculatorImpl.subtract(in0, in1) ;
    }

    public int divide(int in0, int in1) throws java.rmi.RemoteException {
    	return calculatorImpl.divide(in0, in1) ;
    }

    public int multiply(int in0, int in1) throws java.rmi.RemoteException {
    	return calculatorImpl.multiply(in0, in1) ;
    }

}

That’s it; we are now done with the development part of the Web Service. All we have to do is to configure to make the service up and running.

Last configurations to make our service available: Open the server-config.wsdd file inside the WEB-INF folder. You will find the following lines.
```
  

  
```
Keep the file aside and open the deploy.wsdd from the WSDL2Java generated files. Copy the <service> … </service> tag completely and paste in between the comments said above.
Conclusion: You can follow the steps 6 to 11 and create as many services as you want and paste them in the server-config.wsdd.
With this the configurations for the Web Service is over. Export the Project as a War and deploy it in Web Server and point to the URL http://<host:port>/<Project-Name>/services

This URL should display all the services generated from steps 6 to 11 with the links the WSDL files for the above.

Click here to download the sample project.

October 13, 2012

Create Web Services using Axis Java2WSDL, WSDL2Java and Eclipse for all Servers manually – Part 1

There a lot of Web Service implementations available in market. The most widely used among them is the Axis way of implementation. There are a lot of Examples available in the web to create expose, consume the Web services using the Axis packages. But it is not feasible to work get the Axis complete packages inside corporate offices all of a sudden and yes I faced the same situation.

After some investment of time I found some funky stuff in web to create a Web Service with just a couple of jars in hand and off-course with the help of Eclipse.

Prerequisites:

Eclipse, any version should be ok, but I was using the Eclipse Indigo with Ant installed in it.
The set of jars needed. Jars are included in the Project sample.
1. axis.jar
2. commons-discovery-0.2.jar
3. commons-logging.jar
4. jaxrpc.jar
5. log4j-1.2.15.jar
6. saaj.jar
7. wsdl4j.jar
8. The sample web.xml, server-config.wsdd (These will be used later in the development steps).

Steps to develop Web Services:

Create a Dynamic Web Project “SampleWebService” in Eclipse.
Place the above said jars in the WEB-INF/jars folder.

Open the Web.xml file and copy the following contents into it somewhere between tags. These contents are available in the sample attached.

  <servlet>
    <display-name>Apache-Axis Servlet</display-name>
    <servlet-name>AxisServlet</servlet-name>
    <servlet-class>org.apache.axis.transport.http.AxisServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>AxisServlet</servlet-name>
    <url-pattern>/servlet/AxisServlet</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>AxisServlet</servlet-name>
    <url-pattern>*.jws</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>AxisServlet</servlet-name>
    <url-pattern>/services/*</url-pattern>
  </servlet-mapping>
  <servlet>
    <display-name>Axis Admin Servlet</display-name>
    <servlet-name>AdminServlet</servlet-name>
    <servlet-class>org.apache.axis.transport.http.AdminServlet</servlet-class>
    <load-on-startup>100</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>AdminServlet</servlet-name>
    <url-pattern>/servlet/AdminServlet</url-pattern>
  </servlet-mapping>

Copy the server-config.wsdd next to web.xml file. We will reuse this file once again after complete the business logic of the server.
Now the basic configurations are complete, we have to develop the business logic for the Web Service. In my example I have taken the Old school Calculator sample.
Click here to go to the next Part of this article.

September 8, 2012December 24, 2015

Setup your own Social Networking Websites

There a lot of social networking site available in web which includes the Google Plus, Facebook, Twitter etc. Its public and the open to all. But if you wish to Setup your own Social Networking site that is private and for a closed group you can use one of the following Open source scripts.

1. Elgg: Elgg empowers individuals, groups and institutions to create their own fully-featured social environment. Elgg, started in 2004, is an open source social engine which powers all kinds of social environments – from education and business to martial arts and rugby. If you are looking for a professional social intranet or want to run a site for your organisation, Elgg is a great choice. Click here to download.

2. Dolphin: Dolphin is the world’s most advanced community software. Open-source, independent, downloadable, scalable, customizable, full-featured, free software for building social networks, dating sites and web-communities. Loaded with video chat, recorder, video player, forums, groups, events, video messenger, mailbox, desktop app, video sharing, photo sharing, iPhone app and much more. Build your own business or advance your hobby with Dolphin!. Click here to download Dolphin.

3. Jcow: Jcow makes it easy & interesting to create Social Networks and online communities, Build a member community for your existing website, Build a social networking site like facebook/myspace/twitter. Click here to download JCow.

4. Etano: Etano can be used to start up a dating site, a social networking site, a classifieds site or any other type of site involving groups of people, companies, products. Click here to download.

5. Oxwall: Oxwall is used for a wide range of projects starting from family sites and custom social networks to collaboration tools and enterprise community solutions. Oxwall is unbelievably flexible and easy to use PHP/MySQL community software platform. Click here to download.

6. PeoplePods: PeoplePods is a framework that makes it easier to create community or “social” applications. It provides a flexible infrastructure within which members of a site can create, comment upon, and consume content of arbitrary types. Popular social functionality such as friend lists, personalized content views, bookmarking, and voting are automatically available within any PeoplePods application. PeoplePods can be used to build stand-alone sites, or can be layered onto existing sites such as those run using WordPress or other PHP applications. Click here to download.

7. Beatz: Beatz is a free opensource online social networking community script that allows you to start your own favourite artist band website just like Pure Volume. The script is coded in Php, Mysql and licensed under Creative Commons GPL license. In other words, its an online community script for sharing, discussing and learning about new artists and your favorites. Click here to download.

September 8, 2012

Open Source Micro blogging applications

Twitter is the most famous Microblogging site used by users all over the world. There are some famous Open source microblogging site available. Following are few among the Open source PHP scripts.

1. StatusNet: Previously Laconica, is the engine which runs the popular microblogging site Identi.ca. You can download the same from here.

2. PageCookery: PageCookery is the first public offering of single-user version of the open source microblogging program, PHP + MySQL based architecture is a set of safety, efficiency and stability, to “share”, “discovery” for the concept of Web 2.0 solutions to micro-blog. Click here to download.

3. JaikuEngine: Jaiku was the microblogging site of Google. However, they decided no longer to develop the code but make it open source under the name JaikuEngine.

4. Sharetronix: Sharetronix is the world’s favorite opensource microblogging platform. Sharetronix enables people to exchange ideas and multimedia in real-time. Click here to download.

5. Storytlr: Storytlr offers a single touch point for your online life in your own style. Easily post anything you find interesting, import your web 2.0 stuff and share your life online. Storytlr is an open source lifestreaming and micro blogging platform. You can use it for a single user or it can act as a host for many people all from the same installation. Click here to download.

6. Jisko: Jisko is a light-weight open-source microblogging system that allows you to stay in contact with the people you want. Click here to Download.

7. WordPress: The WordPress is a popular blogging tool. But the Power of wordpress can be derived to work as a Microblogging application with the help of a simple theme. P2 WordPress Theme converts the Powerful WordPress into a Microblogging tool. Click here to download.

8. Yonkly: Yonkly Open Source twitter-clone and microblogging platform developed on the asp.net mvc framework. It is the famous Open Source app available in the Dot Net side other than the PHP scripts. Click here to Download.