GIRP SOCView (Analyst Dashboard)

Vue 3 frontend for the GIRP Security Operations Center dashboard. Provides analysts and administrators with a unified interface for incident triage, ticket management, playbook administration, and platform configuration.

Built with Vue 3, TypeScript, Bootstrap 5, and Bootstrap-Vue-Next.

Part of the GIRP (Guided Incident Response Platform) — see the other repositories: Formbuilder, Frontend-Inputform, Backend-Inputform, Backend-SOCView and Launcher.

Technology Stack

• Framework: Vue 3 (Composition API, <script setup>)
• Language: TypeScript
• Build Tool: Vite
• State Management: Pinia
• UI Library: Bootstrap 5 + Bootstrap-Vue-Next
• Charts: ApexCharts via vue3-apexcharts
• HTTP Client: Axios
• Authentication: Better-Auth + MSAL.js (Microsoft Entra ID) + Auth0
• Notifications: vue3-toastify, SweetAlert2

Prerequisites

• Node.js >= 22.16 and npm (local development and builds)
• Docker (production deployment; the image serves the built app via Nginx)
• A running Backend-SOCView instance (API, authentication, CSRF)

Configuration

Runtime environment variables (Docker — recommended)

The production container is configured at start time: docker-entrypoint.sh injects the environment variables below as window.__ENV__ (env-config.js), so one image works in every environment — no rebuild needed. Runtime values always override build-time constants. The entrypoint also assembles the Content-Security-Policy from the configured origins.

Variable	Description	Default
SOCVIEW_API_URL	Base URL of the Backend-SOCView API	http://localhost:3000
BETTER_AUTH_URL	Better-Auth base URL (usually equals SOCVIEW_API_URL)	http://localhost:3000
PLATFORM_URL	Public URL of this frontend (must match Backend-SOCView)	http://localhost:5173
FORMBUILDER_URL	Formbuilder frontend URL	https://builder.girp.bavariabyte.com
INPUTFORM_URL	Frontend-Inputform URL (shareable form links)	http://localhost:4173
AUTH_AZURE_ENABLED / AUTH_AUTH0_ENABLED / AUTH_BETTERAUTH_ENABLED	Which SSO providers are offered	false
AZURE_CLIENT_ID / AZURE_TENANT_ID / AZURE_AUTHORITY	Entra App Registration (public OAuth identifiers). Set the tenant GUID in production — the default common allows multi-tenant logins. AZURE_AUTHORITY optionally overrides the authority URL.	— / common / —
AUTH0_CLIENT_ID / AUTH0_OIDC_ISSUER / AUTH0_OIDC_AUDIENCE	Auth0 SPA application (see Auth0 setup)	—
LAUNCHER_DEMO_EMAIL / LAUNCHER_DEMO_PASSWORD	Demo login (see below)	—

Demo login (runtime)

Setting LAUNCHER_DEMO_EMAIL and LAUNCHER_DEMO_PASSWORD at container start shows a one-click Demo Login button on the login page (used by the GIRP Launcher). The credentials are injected via window.__ENV__ — never baked into the build — and the button disappears as soon as the variables are unset. The backend must have a matching user and AUTH_EMAIL_PASSWORD_ENABLED=true. Use this only for isolated local demos.

Local development (build-time)

For npm run dev, the same variable names are read from a local .env file via Vite's envPrefix (.env.example is the authoritative, commented reference):

cp .env.example .env
npm install
npm run dev        # development server
npm run build      # type-check + production build
npm run preview    # preview production build

Authentication

The application supports three SSO providers, toggled via AUTH_AZURE_ENABLED, AUTH_AUTH0_ENABLED and AUTH_BETTERAUTH_ENABLED:

• Better-Auth: social/OAuth login with role-based access managed by the backend.
• Azure: Microsoft Entra ID SSO via MSAL.js. Group memberships are used for role assignment.
• Auth0: OIDC SSO via @auth0/auth0-spa-js (see below).

CSRF protection uses the double-submit cookie pattern. All state-mutating requests include a CSRF token header.

Auth0 setup

1. In the Auth0 dashboard, create a Single Page Application and an API (the API identifier becomes the audience).
2. Configure the SPA application:
   • Allowed Callback URLs: <PLATFORM_URL>/auth/callback
   • Allowed Logout URLs: <PLATFORM_URL>/login
   • Allowed Web Origins: <PLATFORM_URL>
   • Grant type Refresh Token enabled (the SPA uses rotating refresh tokens).
3. Configure this frontend (runtime env or .env for local development):
   • AUTH_AUTH0_ENABLED=true
   • AUTH0_CLIENT_ID — client ID of the SPA application
   • AUTH0_OIDC_ISSUER — tenant issuer URL, e.g. https://TENANT.eu.auth0.com/ (the Auth0 domain is derived from it)
   • AUTH0_OIDC_AUDIENCE — the API identifier; must match Backend-SOCView's AUTH0_OIDC_AUDIENCE, otherwise the backend rejects the tokens
4. Configure Backend-SOCView accordingly: AUTH_AUTH0_ENABLED=true, AUTH0_OIDC_ISSUER (same issuer) and AUTH0_OIDC_AUDIENCE (same audience); optional overrides: AUTH0_OIDC_JWKS_URI, AUTH0_ROLES_CLAIM, AUTH0_GROUPS_CLAIM, AUTH0_EMAIL_CLAIM.

The login page then shows a "Sign in with Auth0" button. Access tokens are attached to API calls as Authorization: Bearer headers and validated by Backend-SOCView against the tenant's JWKS.

Application Structure

Area	Path	Description
Dashboard	/	Ticket volume charts, status distribution, and high-priority overview
Ticket Overview	/overview	Filterable list and grid view of all active tickets
Ticket Detail	/ticket/:id	Full incident view with timeline, comments, file attachments, and answer replay
Detail Search	/search	Multi-criteria ticket search
Playbook Management	/admin/playbooks	Import, export, activate, and manage playbooks
User Management	/admin/users	User list, role assignment, and account status management
Permissions	/admin/permissions	Configure access control (Entra group IDs or email whitelists)
API Tokens	/admin/api-tokens	Manage machine-to-machine API tokens
Deleted Tickets	/admin/deleted-tickets	Soft-deleted ticket recovery and permanent deletion
Platform Settings	/platformsettings	Timezone, dark mode, and email notification preferences

Permissions

Granular permission scopes are enforced by the backend. The frontend uses the authenticated user's roles to show or hide navigation elements and disable restricted actions. Available scopes include tickets:read, tickets:edit, forms:manage, playbooks:manage, and admin:access.

Security note: hiding UI elements is a UX feature, not a security boundary — all authorization is enforced server-side by Backend-SOCView.

Development

npm run type-check   # vue-tsc
npm run lint         # ESLint
npm test             # Vitest unit tests

Contributing

See CONTRIBUTING.md for the contribution workflow.

Security

See SECURITY.md for how to report vulnerabilities.

License

Licensed under the Sustainable Use License (source-available). The GIRP and BavariaByte names and logos are trademarks of BavariaByte and are not covered by the code license.