Inspector Gadget SPA

Password storage is handled by passport-local-mongoose, which adds a salted PBKDF2 hash to the user schema as a plugin. There are no hand-written salt or hash routines in this codebase. The plugin's register() method handles credential creation, and createStrategy() wires up Passport's local strategy against that storage automatically. Using a well-audited library for credential storage keeps the attack surface small and avoids the class of vulnerabilities associated with creating your own.

const mongoose = require('mongoose');
const jwt = require('jsonwebtoken');
const passportLocalMongoose = require('passport-local-mongoose').default
								|| require('passport-local-mongoose');

const userSchema = new mongoose.Schema({});

// Plugin adds username, salted hash, register(), and Passport strategy
userSchema.plugin(passportLocalMongoose);

userSchema.methods.generateJWT = function() {
	return jwt.sign(
		{ _id: this._id, username: this.username },
		process.env.JWT_SECRET,
		{ expiresIn: '1h' });
};

const User = mongoose.model('users', userSchema);
module.exports = User;

const passport = require('passport');
const User = require('../models/user');

// The passport-local-mongoose plugin provides this strategy
// - no hand-written salt/hash/verify methods required
passport.use(User.createStrategy());

On successful login the JWT is written to a cookie with httpOnly: true, sameSite: 'strict', and a 1-hour max age. The sameSite: strict flag prevents the cookie from being sent on cross-site requests, mitigating CSRF attacks without a separate token. The response body carries only the username and expiry timestamp, which is enough for the Angular app to display session state without ever touching the token itself.

const login = async (req, res) => {
	const result = validationResult(req);
	if (!result.isEmpty()) {
		return res.status(401).json({'message': result.message, 'type': result.type});
	}

	passport.authenticate('local', (err, user, info) => {
		if (err) return res.status(404).json(err);

		if (user) {
			const expire = Math.floor(Date.now() / 1000) + 60 * 60;
			const token = user.generateJWT();

			// httpOnly: true is the XSS mitigation -
			// JavaScript on the page cannot read this cookie
			res.cookie('token', token, {
				httpOnly: true,
				secure: false,
				sameSite: 'strict',
				maxAge: 60*60*1000
			});

			return res.status(200).json({ username: user.username, expire: expire });
		} else {
			res.status(401).json(info);
		}
	})(req, res);
};

Input validation runs before either controller sees the request. A shared factory function applies the same three rules to any named field: not empty, must be a string, and trim whitespace. Validation errors return a 401 before the request reaches Passport, so malformed or empty credentials never touch the auth logic.

// Validation rule factory - every auth field must be
// present, string, and trimmed before reaching the controller
const validateParam = (param) => body(param).notEmpty().isString().trim();

router.route('/register')
	.post(
		validateParam('username'),
		validateParam('password'),
		authController.register);

router.route('/login')
	.post(
		validateParam('username'),
		validateParam('password'),
		authController.login);

On the Angular side, the httpOnly cookie is invisible to TypeScript. The browser sends it automatically on every request, but no application code can read or modify it. The JWT interceptor makes this transparent by cloning every outgoing request and setting withCredentials: true, which instructs the browser to include cookies on cross-origin requests. No Authorization header is constructed, no token is retrieved from storage.

import { inject } from '@angular/core';
import { HttpRequest, HttpHandlerFn, HttpEvent } from '@angular/common/http';
import { HttpInterceptorFn } from '@angular/common/http';
import { Observable } from 'rxjs';

// Setting withCredentials instructs the browser to send cookies
// with every request - no Authorization header needed
export const jwtInterceptor: HttpInterceptorFn = (req, next) => {
	const authReq = req.clone({
		withCredentials: true
	});
	return next(authReq);
};

The alert data service assembles query parameters into an HttpParams object and passes them to the /alerts endpoint. Every parameter is optional. If no category filter or date range is set, those keys are simply absent from the request. This matches the server's aggregation pipeline, which builds the $match stage only from parameters that are actually present.

// Service method that assembles every optional query parameter
// into an HttpParams object for the /alerts endpoint
getAlerts(params: {
	page?: number,
	limit?: number,
	sort?: string,
	order?: string,
	category?: string,
	search?: string,
	from?: Date,
	to?: Date
} = {}) : Observable<any> {

	let httpParams = new HttpParams();
	if (params.page) httpParams = httpParams.set('page', params.page);
	if (params.limit) httpParams = httpParams.set('limit', params.limit);
	if (params.sort) httpParams = httpParams.set('sort', params.sort);
	if (params.order) httpParams = httpParams.set('order', params.order);
	if (params.category) httpParams = httpParams.set('category', params.category);
	if (params.search) httpParams = httpParams.set('search', params.search);
	if (params.from) httpParams = httpParams.set('from', params.from.toISOString());
	if (params.to) httpParams = httpParams.set('to', params.to.toISOString());

	return this.http.get(this.url, { params: httpParams });
}

The alert listing component owns all query state, including the current page, limit, sort column, sort order, category filter, and date range. Every user interaction updates the relevant field and calls loadAlerts(), which rebuilds the params object and fires a new request. The component never caches or transforms the server's response. It assigns res.alerts to this.alerts and lets Angular's change detection re-render the table.

export class AlertListing implements OnInit {
	alerts: Alert[] = [];
	total = 0;
	page = 1;
	limit = 25;
	sort = 'reported';
	order = 'desc';
	category = '';
	search = '';
	from?: Date;
	to?: Date;
	displayedColumns = ['source', 'source_port', 'destination',
						'destination_port', 'category', 'reported'];

loadAlerts(): void {
	this.alertData.getAlerts({
		page: this.page,
		limit: this.limit,
		sort: this.sort,
		order: this.order,
		category: this.category || undefined,
		search: this.search || undefined,
		from: this.from || undefined,
		to: this.to || undefined
	}).subscribe({
		next: (res) => {
			this.alerts = res.alerts;
			this.total = res.total;
		},
		error: (err) => console.log('Error: ' + err)
	});
}

onPageChange(event: PageEvent): void {
	this.page = event.pageIndex + 1;
	this.limit = event.pageSize;
	this.loadAlerts();
}

onSortChange(event: Sort): void {
	this.sort = event.active;
	this.order = event.direction || 'desc';
	this.page = 1;
	this.loadAlerts();
}

The table and paginator are Angular Material components. The mat-table binds to alerts as its data source and fires a matSortChange event whenever a column header is clicked. The paginator is server-side. It reports user interactions via the page event, and onPageChange updates component state and triggers a new request. The total record count comes from the server's $facet metadata, so the paginator displays the correct total without loading the entire collection.

<table mat-table [dataSource]="alerts" matSort (matSortChange)="onSortChange($event)">
	<ng-container matColumnDef="source">
		<th mat-header-cell *matHeaderCellDef mat-sort-header>Source</th>
		<td mat-cell *matCellDef="let alert">{{ alert.source }}</td>
	</ng-container>

	<ng-container matColumnDef="category">
		<th mat-header-cell *matHeaderCellDef mat-sort-header>Category</th>
		<td mat-cell *matCellDef="let alert">{{ alert.category }}</td>
	</ng-container>

	<ng-container matColumnDef="reported">
		<th mat-header-cell *matHeaderCellDef mat-sort-header>Reported</th>
		<td mat-cell *matCellDef="let alert">{{ alert.reported | date:'short' }}</td>
	</ng-container>

	<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
	<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<mat-paginator
	[length]="total"
	[pageSize]="limit"
	[pageSizeOptions]="[10, 25, 50, 100]"
	(page)="onPageChange($event)">
</mat-paginator>