RuleGate Angular

@fotbiler/rulegate-angular provides fail-closed Angular helpers for consuming a frontend authorization projection in RuleGate applications.

[!IMPORTANT] Browser-side guards and directives are user-experience controls, not security boundaries. Always enforce authorization on the backend with RuleGate.

Install

pnpm add @fotbiler/[email protected] @fotbiler/[email protected]

The package supports Angular 20–22. Older applications should follow the frontend compatibility guide.

Supply authorization state

Load the current user's frontend authorization projection through application code, then replace the complete SDK snapshot:

import { inject } from '@angular/core';
import { RuleGateAuthorizationClient } from '@fotbiler/rulegate-angular';

const authorization = inject(RuleGateAuthorizationClient);

authorization.replaceSnapshot({
  permissions: ['documents.read'],
  policies: ['documents-read'],
  roles: ['documents.reader'],
});

Call clear() during sign-out and before replacing identity state. Missing or malformed state denies every check.

Protect routes

Declarative route metadata keeps requirements visible in route configuration:

import { Routes } from '@angular/router';
import { ruleGateGuard, ruleGateRouteData } from '@fotbiler/rulegate-angular';

import { RuleGateIdentifiers } from './generated/rulegate';

export const routes: Routes = [
  {
    path: 'documents',
    loadComponent: () => import('./documents/documents.component'),
    canActivate: [ruleGateGuard],
    data: ruleGateRouteData({
      permission: RuleGateIdentifiers.permissions.documentsRead,
    }),
  },
];

Missing or malformed metadata denies. Configure provideRuleGateDeniedNavigation to return an Angular UrlTree or RedirectCommand for valid denied requirements. The direct permission, policy, and role guard factories remain available.

Control template visibility

Import the standalone directive and pass exactly one permission, policy, or role requirement:

import { Component } from '@angular/core';
import { RuleGateCanDirective, RuleGateDisableDirective } from '@fotbiler/rulegate-angular';

import { RuleGateIdentifiers } from './generated/rulegate';

@Component({
  selector: 'app-document-actions',
  imports: [RuleGateCanDirective, RuleGateDisableDirective],
  template: `
    <button *ruleGateCan="{ permission: permissions.documentsWrite }; else unavailable">
      Edit document
    </button>
    <ng-template #unavailable>Editing is unavailable.</ng-template>

    <button [ruleGateDisable]="{ permission: permissions.documentsDelete }">Delete document</button>
  `,
})
export class DocumentActionsComponent {
  readonly permissions = RuleGateIdentifiers.permissions;
}

The structural directive supports an else template. The disabled-state directive owns the native disabled property where available and blocks denied click activation on other hosts.

Generate TypeScript identifiers

Generate deterministic constants directly from rulegate.yaml:

pnpm exec rulegate-angular generate rulegate.yaml --output src/app/generated/rulegate.ts
pnpm exec rulegate-angular generate rulegate.yaml --output src/app/generated/rulegate.ts --check

The generator fails on malformed identifier-bearing manifest shapes and name collisions, writes atomically, and checks output byte-for-byte. Use the backend RuleGate CLI for authoritative full-manifest validation.

Backend-only requirement kinds, including attribute comparisons, time windows, date-time windows, context age, and canonical context policies, are accepted while the generator collects frontend policy, permission, role, resource-type, and action identifiers.

Security behavior

• Uninitialized state denies every check.
• Invalid or whitespace-padded identifiers invalidate the complete snapshot.
• Permission, policy, and role matching is exact and case-sensitive.
• A directive requirement containing both or neither identifier kind denies.
• Missing or malformed declarative route metadata denies navigation.
• Browser state can be modified by the user and never replaces backend authorization.

See the full RuleGate Angular guide and security model.

The document-approval reference application shows generated identifiers, guards, visibility and disabled-state directives, Keycloak integration, and backend enforcement in one package-consuming host.

Optional Keycloak adapter

Import @fotbiler/rulegate-angular/keycloak when the host application uses Keycloak. The secondary entrypoint converts an authenticated keycloak-js session into the generic RuleGate snapshot without owning login, refresh, logout, callbacks, or token storage. The package does not require keycloak-js.

See the Keycloak integration guide for the Angular and ASP.NET Core composition model.

License

Licensed under the MIT License.