TraceFlow-IEF is a powerful visualization and analysis tool for Azure AD B2C Identity Experience Framework (IEF) custom policies. Transform complex XML policies into interactive flow diagrams and debug authentication flows with ease.
- Policy Visualization — Convert B2C IEF custom policies into interactive, zoomable flow diagrams
- Log Analysis — Connect to Application Insights and trace user journey executions step-by-step
- Entity Extraction — Automatically parse and display Claims, Technical Profiles, User Journeys, and more
- Offline First — All policy processing happens client-side; no data leaves your browser
| Requirement | Version | Notes |
|---|---|---|
| Node.js | 22.x or higher | Download |
| npm | 10.x or higher | Included with Node.js |
| Git | Latest | Download |
-
Clone the repository
git clone https://github.com/your-org/traceflow-ief.git cd traceflow-ief -
Install dependencies
cd client npm install -
Start the development server
npm run dev
-
Open the application
Navigate to http://localhost:3000 in your browser.
npm run buildThe production build will be output to the dist/ directory. This is a static SPA that can be deployed to any static hosting service.
| Command | Description |
|---|---|
npm run dev |
Start development server at localhost:3000 |
npm run build |
TypeScript check + production build |
npm run preview |
Preview production build locally |
npm run test |
Run Vitest tests |
npm run test:watch |
Run tests in watch mode |
npm run test:coverage |
Run tests with coverage report |
npm run lint |
Run ESLint |
| Document | Description |
|---|---|
| Quick Start Guide | Hands-on guide for the Log Analyzer |
| Architecture | System architecture and data flow |
| Logging Architecture | How log parsing and trace stitching works |
| Trace Interpreters | Guide to adding new log event interpreters |
# Run all tests
npm run test
# Watch mode
npm run test:watch
# With coverage
npm run test:coverageThe project uses:
- ESLint for linting
- Prettier for formatting (via ESLint integration)
- TypeScript strict mode
Run linting:
npm run lint- Azure AD B2C Documentation
- React Flow for the flow visualization library
- Radix UI for accessible UI primitives
- TanStack for the router
- Phosphor Icons for the icon set