add auth

Author: morteza.khoramdel

Caddyfile

@@ -17,4 +17,8 @@
 		X-Permitted-Cross-Domain-Policies "none"
 		Referrer-Policy "no-referrer"
 	}
+
+	header /assets/auth-config.json {
+		Cache-Control "no-store"
+	}
 }

Dockerfile

@@ -25,5 +25,11 @@ FROM caddy:2.10.2
 ENV PORT=8080
 
 COPY Caddyfile /etc/caddy/Caddyfile
+COPY docker/docker-entrypoint.sh /usr/local/bin/dsomm-entrypoint
 COPY --from=build ["/usr/src/app/dist/dsomm/", "/srv"]
 COPY --from=yaml ["/var/www/html/generated/model.yaml", "/srv/assets/YAML/default/model.yaml"]
+
+RUN chmod +x /usr/local/bin/dsomm-entrypoint && chown -R caddy:caddy /srv/assets
+
+ENTRYPOINT ["/usr/local/bin/dsomm-entrypoint"]
+CMD ["caddy", "run", "--config", "/etc/caddy/Caddyfile", "--adapter", "caddyfile"]

README.md

@@ -29,10 +29,10 @@ This page uses the Browser's localStorage to store the state of the circular hea
 
 # Static Demo Authentication
 
-This Angular frontend includes simple static-user authentication for demo and internal
+This Angular frontend includes simple runtime-configured authentication for demo and internal
 deployments. All users have the same permissions.
 
-Default credentials are defined in `src/app/services/auth.service.ts`:
+For local development, default demo credentials are defined in `src/assets/auth-config.json`:
 
 | Username | Password |
 | --- | --- |
@@ -41,11 +41,38 @@ Default credentials are defined in `src/app/services/auth.service.ts`:
 | `developer` | `dsomm-dev` |
 | `viewer` | `dsomm-view` |
 
+For Docker deployments, define users at container startup instead of rebuilding the image:
+
+```yaml
+services:
+  dsomm:
+    image: wurstbrot/dsomm:latest
+    ports:
+      - "8080:8080"
+    environment:
+      DSOMM_AUTH_USERS: >-
+        [
+          {"username":"admin","password":"change-me"},
+          {"username":"auditor","password":"audit-me"}
+        ]
+```
+
+The container entrypoint writes `DSOMM_AUTH_USERS` to `/srv/assets/auth-config.json`. You can also
+mount your own config file at `/srv/assets/auth-config.json` with this shape:
+
+```json
+{
+  "users": [
+    { "username": "admin", "password": "change-me" }
+  ]
+}
+```
+
 Sign in at `/login`. The app stores the current user in the browser's `sessionStorage`, so the
 login lasts only for the current browser session.
 
 Security warning: this is frontend-only authentication. It is not secure for production because
-static credentials are shipped in the browser bundle and can be inspected by users. Use a backend
+the browser must receive the auth config and credentials can be inspected by users. Use a backend
 identity provider or server-side access control for production deployments.
 
 # Changes

docker-compose.example.yml

@@ -0,0 +1,12 @@
+services:
+  dsomm:
+    build: .
+    ports:
+      - "8080:8080"
+    environment:
+      DSOMM_AUTH_USERS: >-
+        [
+          {"username":"admin","password":"change-me"},
+          {"username":"auditor","password":"audit-me"},
+          {"username":"developer","password":"dev-me"}
+        ]

docker/docker-entrypoint.sh

@@ -0,0 +1,18 @@
+#!/bin/sh
+set -eu
+
+AUTH_CONFIG_PATH="${DSOMM_AUTH_CONFIG_PATH:-/srv/assets/auth-config.json}"
+
+if [ -n "${DSOMM_AUTH_USERS:-}" ]; then
+  mkdir -p "$(dirname "$AUTH_CONFIG_PATH")"
+  {
+    printf '{\n  "users": '
+    printf '%s' "$DSOMM_AUTH_USERS"
+    printf '\n}\n'
+  } > "$AUTH_CONFIG_PATH"
+elif [ ! -f "$AUTH_CONFIG_PATH" ]; then
+  mkdir -p "$(dirname "$AUTH_CONFIG_PATH")"
+  printf '{\n  "users": []\n}\n' > "$AUTH_CONFIG_PATH"
+fi
+
+exec "$@"

src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { APP_INITIALIZER, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -41,6 +41,11 @@ import { AddEvidenceModalComponent } from './component/add-evidence-modal/add-ev
 import { EvidencePanelComponent } from './component/evidence-panel/evidence-panel.component';
 import { ViewEvidenceModalComponent } from './component/view-evidence-modal/view-evidence-modal.component';
 import { LoginComponent } from './pages/login/login.component';
+import { AuthService } from './services/auth.service';
+
+export function initializeAuth(authService: AuthService): () => Promise<void> {
+  return () => authService.loadConfig();
+}
 
 @NgModule({
   declarations: [
@@ -91,6 +96,7 @@ import { LoginComponent } from './pages/login/login.component';
   providers: [
     LoaderService,
     ModalMessageComponent,
+    { provide: APP_INITIALIZER, useFactory: initializeAuth, deps: [AuthService], multi: true },
     { provide: MAT_DIALOG_DATA, useValue: {} },
     { provide: MatDialogRef, useValue: { close: (dialogResult: any) => {} } },
   ],

src/app/guards/auth.guard.spec.ts

@@ -1,27 +1,38 @@
 import { TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { ActivatedRouteSnapshot, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AuthGuard } from './auth.guard';
 import { AuthService } from '../services/auth.service';
 
+const authUsers = [
+  { username: 'auditor', password: 'dsomm-audit' },
+  { username: 'developer', password: 'dsomm-dev' },
+];
+
 describe('AuthGuard', () => {
   let guard: AuthGuard;
   let authService: AuthService;
   let router: Router;
+  let httpMock: HttpTestingController;
   const sessionUserKey = 'dsomm.auth.currentUser';
 
-  beforeEach(() => {
+  beforeEach(async () => {
     TestBed.configureTestingModule({
-      imports: [RouterTestingModule.withRoutes([])],
+      imports: [HttpClientTestingModule, RouterTestingModule.withRoutes([])],
     });
 
     guard = TestBed.inject(AuthGuard);
     authService = TestBed.inject(AuthService);
     router = TestBed.inject(Router);
+    httpMock = TestBed.inject(HttpTestingController);
     sessionStorage.removeItem(sessionUserKey);
+
+    await loadAuthConfig();
   });
 
   afterEach(() => {
+    httpMock.verify();
     sessionStorage.removeItem(sessionUserKey);
   });
 
@@ -67,3 +78,12 @@ function routeSnapshot(): ActivatedRouteSnapshot {
 function routerState(url: string): RouterStateSnapshot {
   return { url } as RouterStateSnapshot;
 }
+
+async function loadAuthConfig(): Promise<void> {
+  const authService = TestBed.inject(AuthService);
+  const httpMock = TestBed.inject(HttpTestingController);
+  const configLoaded = authService.loadConfig();
+  const request = httpMock.expectOne('assets/auth-config.json');
+  request.flush({ users: authUsers });
+  await configLoaded;
+}

src/app/pages/login/login.component.spec.ts

@@ -1,4 +1,5 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, convertToParamMap, Router } from '@angular/router';
@@ -11,8 +12,14 @@ describe('LoginComponent', () => {
   let fixture: ComponentFixture<LoginComponent>;
   let authService: AuthService;
   let router: Router;
+  let httpMock: HttpTestingController;
   let routeStub: { snapshot: { queryParamMap: ReturnType<typeof convertToParamMap> } };
   const sessionUserKey = 'dsomm.auth.currentUser';
+  const authUsers = [
+    { username: 'admin', password: 'dsomm-admin' },
+    { username: 'auditor', password: 'dsomm-audit' },
+    { username: 'viewer', password: 'dsomm-view' },
+  ];
 
   beforeEach(async () => {
     routeStub = {
@@ -23,17 +30,21 @@ describe('LoginComponent', () => {
 
     await TestBed.configureTestingModule({
       declarations: [LoginComponent],
-      imports: [ReactiveFormsModule, RouterTestingModule.withRoutes([])],
+      imports: [HttpClientTestingModule, ReactiveFormsModule, RouterTestingModule.withRoutes([])],
       providers: [{ provide: ActivatedRoute, useValue: routeStub }],
       schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
 
     authService = TestBed.inject(AuthService);
     router = TestBed.inject(Router);
+    httpMock = TestBed.inject(HttpTestingController);
     sessionStorage.removeItem(sessionUserKey);
+
+    await loadAuthConfig();
   });
 
   afterEach(() => {
+    httpMock.verify();
     sessionStorage.removeItem(sessionUserKey);
   });
 
@@ -96,4 +107,11 @@ describe('LoginComponent', () => {
 
     expect(navigateSpy).toHaveBeenCalledOnceWith('/');
   });
+
+  async function loadAuthConfig(): Promise<void> {
+    const configLoaded = authService.loadConfig();
+    const request = httpMock.expectOne('assets/auth-config.json');
+    request.flush({ users: authUsers });
+    await configLoaded;
+  }
 });

src/app/services/auth.service.spec.ts

@@ -1,42 +1,77 @@
 import { TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { AuthService } from './auth.service';
 
 describe('AuthService', () => {
   let service: AuthService;
+  let httpMock: HttpTestingController;
   const sessionUserKey = 'dsomm.auth.currentUser';
+  const authUsers = [
+    { username: 'admin', password: 'dsomm-admin' },
+    { username: 'viewer', password: 'dsomm-view' },
+  ];
 
   beforeEach(() => {
-    TestBed.configureTestingModule({});
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+    });
     service = TestBed.inject(AuthService);
+    httpMock = TestBed.inject(HttpTestingController);
     sessionStorage.removeItem(sessionUserKey);
   });
 
   afterEach(() => {
+    httpMock.verify();
     sessionStorage.removeItem(sessionUserKey);
   });
 
-  it('logs in a static user with valid credentials', () => {
+  it('logs in a configured user with valid credentials', async () => {
+    await loadAuthConfig();
+
     const loggedIn = service.login('admin', 'dsomm-admin');
 
     expect(loggedIn).toBeTrue();
     expect(service.isAuthenticated()).toBeTrue();
     expect(service.getCurrentUser()).toBe('admin');
   });
 
-  it('rejects invalid credentials', () => {
+  it('rejects invalid credentials', async () => {
+    await loadAuthConfig();
+
     const loggedIn = service.login('admin', 'wrong-password');
 
     expect(loggedIn).toBeFalse();
     expect(service.isAuthenticated()).toBeFalse();
     expect(service.getCurrentUser()).toBeNull();
   });
 
-  it('clears the authenticated user on logout', () => {
+  it('clears the authenticated user on logout', async () => {
+    await loadAuthConfig();
+
     service.login('viewer', 'dsomm-view');
 
     service.logout();
 
     expect(service.isAuthenticated()).toBeFalse();
     expect(service.getCurrentUser()).toBeNull();
   });
+
+  it('rejects login when the auth config cannot be loaded', async () => {
+    const configLoaded = service.loadConfig();
+    const request = httpMock.expectOne('assets/auth-config.json');
+    request.flush('Not found', { status: 404, statusText: 'Not Found' });
+
+    await configLoaded;
+
+    expect(service.login('admin', 'dsomm-admin')).toBeFalse();
+    expect(service.isAuthenticated()).toBeFalse();
+  });
+
+  async function loadAuthConfig(): Promise<void> {
+    const configLoaded = service.loadConfig();
+    const request = httpMock.expectOne('assets/auth-config.json');
+    expect(request.request.method).toBe('GET');
+    request.flush({ users: authUsers });
+    await configLoaded;
+  }
 });

src/app/services/auth.service.ts

@@ -1,25 +1,37 @@
 import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { firstValueFrom } from 'rxjs';
 
 interface StaticUser {
   username: string;
   password: string;
 }
 
+interface AuthConfig {
+  users?: StaticUser[];
+}
+
 @Injectable({ providedIn: 'root' })
 export class AuthService {
   private readonly SESSION_USER_KEY = 'dsomm.auth.currentUser';
+  private readonly configUrl = 'assets/auth-config.json';
+  private users: StaticUser[] = [];
 
   /*
-   * Demo/internal-only static users.
-   * This is not secure for production: credentials in frontend code are visible
-   * to anyone who can load the application bundle.
+   * Demo/internal-only frontend auth.
+   * This is not secure for production: browser-delivered auth config is visible
+   * to anyone who can load the application.
    */
-  private readonly users: StaticUser[] = [
-    { username: 'admin', password: 'dsomm-admin' },
-    { username: 'auditor', password: 'dsomm-audit' },
-    { username: 'developer', password: 'dsomm-dev' },
-    { username: 'viewer', password: 'dsomm-view' },
-  ];
+  constructor(private http: HttpClient) {}
+
+  async loadConfig(): Promise<void> {
+    try {
+      const config = await firstValueFrom(this.http.get<AuthConfig>(this.configUrl));
+      this.users = this.normalizeUsers(config);
+    } catch (_err) {
+      this.users = [];
+    }
+  }
 
   login(username: string, password: string): boolean {
     const matchedUser = this.users.find(
@@ -45,4 +57,20 @@ export class AuthService {
   getCurrentUser(): string | null {
     return sessionStorage.getItem(this.SESSION_USER_KEY);
   }
+
+  private normalizeUsers(config: AuthConfig | null): StaticUser[] {
+    if (!config || !Array.isArray(config.users)) {
+      return [];
+    }
+
+    const users: StaticUser[] = config.users;
+
+    return users.filter(
+      (user): user is StaticUser =>
+        typeof user?.username === 'string' &&
+        user.username.length > 0 &&
+        typeof user?.password === 'string' &&
+        user.password.length > 0
+    );
+  }
 }