OpenFGA Dashboard
April 2, 2026 · View on GitHub
🌐 Live Demo → openfga-dashboard.xyz — Try it instantly, no installation required.
A modern, pure frontend dashboard for managing OpenFGA authorization servers. Connect to your OpenFGA instance and manage stores, authorization models, relationship tuples, and run queries - all from your browser.
Features
- Store Management: Create, view, and delete OpenFGA stores
- Authorization Model Editor: Create and view authorization models with Monaco Editor
- Relationship Tuples: Add, search, and delete relationship tuples
- Query Operations:
- Check: Test if a user has a specific relation with an object
- Expand: View the relationship tree
- List Objects: Find all objects a user has access to
- List Users: Find all users with access to an object
- Multiple Authentication Methods:
- No authentication
- API Key (Pre-shared Key)
- OIDC (Client Credentials)
Tech Stack
- Framework: Next.js 14 (App Router)
- UI: Tailwind CSS + custom components inspired by shadcn/ui
- State Management: Zustand
- Code Editor: Monaco Editor
- Icons: Lucide React
Getting Started
Prerequisites
- Node.js 18+
- npm or yarn
- An OpenFGA server instance (local or remote)
Installation
-
Clone the repository:
git clone https://github.com/dz1922/openfga-dashboard.git cd openfga-dashboard -
Install dependencies:
npm install -
Start the development server:
npm run dev -
Open http://localhost:3000 in your browser
Connecting to OpenFGA
- Enter your OpenFGA server URL (e.g.,
http://localhost:8080) - Select your authentication method:
- None: For local development without authentication
- API Key: Enter your pre-shared key
- OIDC: Enter client credentials (Client ID, Client Secret, Token URL)
- Click "Test Connection" to verify
- Click "Connect" to access the dashboard
Security Considerations
- Client-side only: This is a pure frontend application. All connections are made directly from your browser to your OpenFGA server.
- Local storage: Connection credentials are stored in your browser's local storage.
- CORS: Your OpenFGA server must have CORS enabled for this application's domain.
- Recommendations:
- Only connect to servers you own or have explicit permission to access
- Do not use this tool on shared or public computers
- Clear your browser data after use on non-personal devices
Deployment
Deploy to Vercel
Build for Production
npm run build
npm start
Deploy with Docker
Run the dashboard with OpenFGA server using Docker Compose:
docker-compose up -d
This will start:
- Dashboard at http://localhost:3000
- OpenFGA API at http://localhost:8080
To build and run only the dashboard:
docker build -t openfga-dashboard .
docker run -p 3000:3000 openfga-dashboard
For persistent storage with PostgreSQL, see the commented section in docker-compose.yml.
Project Structure
├── app/ # Next.js App Router pages
│ ├── dashboard/ # Dashboard pages
│ └── page.tsx # Landing/Connection page
├── components/
│ ├── ui/ # Reusable UI components
│ ├── connection/ # Connection-related components
│ ├── stores/ # Store management components
│ ├── model/ # Authorization model components
│ ├── tuples/ # Tuple management components
│ ├── query/ # Query operation components
│ └── layout/ # Layout components
├── lib/
│ ├── openfga/ # OpenFGA API client
│ └── store/ # Zustand stores
└── hooks/ # Custom React hooks
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
License
This project is licensed under the Apache License 2.0 - see the LICENSE file for details.
Support
If you find this project useful, consider:
- Giving it a star on GitHub
- Buying me a coffee