Signals Statecraft for Multi‑Tenant Angular 20 Apps: Role‑Based Selectors, Permission‑Driven Slices, and Data Isolation Patterns

The Moment Multi‑Tenant State Goes Sideways: A Field Story

Why Multi‑Tenant State Demands Role‑Aware Signals in Angular 20+

Baseline State Shape: Tenant‑First, Permission‑Driven Slices

import { SignalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
import { computed, inject } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { ActivatedRoute } from '@angular/router';

// Types
type TenantId = string;
type Role = 'viewer' | 'editor' | 'admin';
type Perm = `${string}:${'read'|'write'|'admin'}`; // e.g., 'orders:read'

interface EntityMap<T> { [id: string]: T }
interface TenantMap<T> { [tenantId: string]: T }

interface OrdersEntity { id: string; total: number; accountId: string }

interface SessionState {
  userId: string | null;
  roles: TenantMap<Role[]>;               // roles per tenant
  permissions: TenantMap<Set<string>>;    // perms per tenant (string for JSON safety)
  activeTenantId: TenantId | null;
}

interface EntitiesState {
  orders: TenantMap<EntityMap<OrdersEntity>>;
}

interface AppState {
  session: SessionState;
  entities: EntitiesState;
}

const initialState: AppState = {
  session: { userId: null, roles: {}, permissions: {}, activeTenantId: null },
  entities: { orders: {} },
};

export class AppStore extends SignalStore(withState(initialState), withComputed(({ session, entities }) => ({
  activeTenantId: computed(() => session().activeTenantId),
  // tenant-safe entity accessors always keyed by active tenant
  ordersForActive: computed(() => {
    const tid = session().activeTenantId;
    return tid ? entities().orders[tid] ?? {} : {};
  }),
})), withMethods((state) => ({
  setActiveTenant(tid: TenantId) {
    patchState(state, (s) => ({ session: { ...s.session, activeTenantId: tid } }));
  },
  upsertOrders(tid: TenantId, incoming: OrdersEntity[]) {
    patchState(state, (s) => ({
      entities: {
        ...s.entities,
        orders: {
          ...s.entities.orders,
          [tid]: {
            ...(s.entities.orders[tid] ?? {}),
            ...Object.fromEntries(incoming.map(o => [o.id, o]))
          }
        }
      }
    }));
  },
}))) {
  private route = inject(ActivatedRoute);
  // Active tenant sourced from URL: /t/:tenantId/**
  readonly routeTenantId = toSignal(
    this.route.paramMap, { initialValue: null }
  );

  readonly can = (perm: string) => computed(() => {
    const tid = this.state().session.activeTenantId;
    if (!tid) return false;
    return this.state().session.permissions[tid]?.has(perm) ?? false;
  });

  // Permission-gated selector: UI only sees what the role allows
  readonly visibleOrders = computed(() => {
    if (!this.can('orders:read')()) return [];
    return Object.values(this.ordersForActive());
  });
}

Notes:

• State shape enforces tenant keys by design—accidental cross-tenant reads become type/logic errors early.

• visibleOrders is a single read path for the UI; remove per-component permission if/else spaghetti.

Role‑Based Selectors with Signals + SignalStore

// Permission-gated selector factory
function gated<T>(can: () => boolean, select: () => T, empty: T): () => T {
  return () => (can() ? select() : empty);
}

// In AppStore
readonly ordersCanRead = this.can('orders:read');
readonly ordersAll = () => Object.values(this.ordersForActive());
readonly ordersVisible = computed(
  gated(this.ordersCanRead, this.ordersAll, [] as OrdersEntity[])
);

// Component stays tiny
@Component({
  selector: 'tenant-orders',
  template: `
    <p-table *ngIf="orders().length; else noAccess" [value]="orders()">
      <!-- PrimeNG columns -->
    </p-table>
    <ng-template #noAccess>
      <app-empty-state title="No access" subtitle="Ask an admin for orders:read" />
    </ng-template>
  `
})
export class TenantOrdersComponent {
  orders = inject(AppStore).ordersVisible;
}

Returning empty results avoids explosive error states in dashboards. For audit trails, emit a telemetry event when a gated selector flips false so you can confirm permission behavior in production.

Data Isolation Patterns: URL Scoping, Keyed Caches, and Server Guards

# Nx lint rule (tslint/eslint) concept to forbid imports bypassing the store
# tags: [scope:tenant, feature:orders]
# constraint: libs with feature:* cannot import libs without scope:tenant tag

// Express/Node middleware: enforce tenantId from JWT vs. route
app.use('/api/t/:tenantId', (req, res, next) => {
  const tokenTid = req.user?.tenantId;
  if (tokenTid !== req.params.tenantId) return res.sendStatus(403);
  next();
});

// .NET minimal API policy example
builder.Services.AddAuthorization(o => {
  o.AddPolicy("OrdersRead", p => p.RequireAssertion(ctx =>
    ctx.User.HasClaim("perm", "orders:read")
  ));
});
app.MapGet("/api/t/{tenantId}/orders", (string tenantId, ClaimsPrincipal user) => {
  if (user.FindFirst("tenantId")?.Value != tenantId) return Results.Forbid();
  // fetch orders for tenantId only
});

// Firestore security rules (Firebase)
rules_version = '2';
service cloud.firestore {
  match /databases/{db}/documents {
    match /tenants/{tenantId}/orders/{orderId} {
      allow read: if request.auth.token.tenant_id == tenantId &&
                  request.auth.token.perms.hasOnly(["orders:read", "orders:admin"]);
      allow write: if request.auth.token.tenant_id == tenantId &&
                   request.auth.token.perms.hasOnly(["orders:write", "orders:admin"]);
    }
  }
}

Production Notes from a global entertainment company, United, and Charter

CI and Telemetry Guardrails: Prove Isolation and Performance

# GitHub Actions (excerpt) – run multi-tenant e2e matrix
jobs:
  e2e:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        role: [viewer, editor, admin]
        tenant: [alpha, beta]
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v3
      - run: pnpm i
      - run: pnpm nx run-many -t e2e --configuration=${{ matrix.role }} --args="--tenant=${{ matrix.tenant }}"

When to Hire an Angular Developer for Legacy Multi‑Tenant Rescue

Concise Takeaways

• Tenant-first state shape + permission-gated selectors prevent leaks by design.

• Return empty-safe data from selectors; don’t throw components into error states.

• Enforce tenancy at every layer: URL, client store, API, and DB rules.

• Prove it in CI with tenant matrices, and in prod with render metrics and telemetry.

If you need a remote Angular expert to harden a multi-tenant platform, let’s review your architecture this week.