setup pipeline

.env.example

@@ -1,4 +1,5 @@
 NG_APP_API_SERVER_URL=
+NG_APP_CLIENT_ID=
 NG_APP_AUTH_DOMAIN=
 NG_APP_AUTH_CACHE_LOCATION=
 NG_APP_AUTH_USE_REFRESH_TOKENS=

.github/workflows/ci.yml

@@ -0,0 +1,70 @@
+name: CI
+
+env:
+  node_version: '24.11.1'
+
+on:
+  pull_request:
+    branches:
+      - master
+  workflow_dispatch:
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    if: github.event.pull_request.head.repo.full_name == github.repository
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061
+        with:
+          version: 10.27.0
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.node_version }}
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build
+        run: pnpm build --configuration=staging
+        env:
+          NODE_ENV: development
+          NG_APP_API_SERVER_URL: ${{ vars.STAGING_API_SERVER_URL }}
+          NG_APP_AUTH_DOMAIN: ${{ vars.STAGING_AUTH_DOMAIN }}
+          NG_APP_AUTH_CLIENT_ID: ${{ vars.STAGING_AUTH_CLIENT_ID }}
+          NG_APP_AUTH_AUDIENCE: ${{ vars.STAGING_AUTH_AUDIENCE }}
+          NG_APP_AUTH_CALLBACK_URL: ${{ vars.STAGING_AUTH_CALLBACK_URL }}
+          NG_APP_AUTH_CACHE_LOCATION: ${{ vars.STAGING_AUTH_CACHE_LOCATION }}
+          NG_APP_AUTH_USE_REFRESH_TOKENS: ${{ vars.STAGING_AUTH_USE_REFRESH_TOKENS }}
+
+      - name: Lint code
+        run: pnpm lint
+
+      - name: Run prettier
+        run: pnpm prettier --check "**/*.{ts,js,json,css,html}"
+
+      - name: Run tests
+        run: pnpm test --watch=false --coverage
+        env:
+          NODE_ENV: development
+          NG_APP_API_SERVER_URL: ${{ vars.STAGING_API_SERVER_URL }}
+          NG_APP_AUTH_DOMAIN: ${{ vars.STAGING_AUTH_DOMAIN }}
+          NG_APP_AUTH_CLIENT_ID: ${{ vars.STAGING_AUTH_CLIENT_ID }}
+          NG_APP_AUTH_AUDIENCE: ${{ vars.STAGING_AUTH_AUDIENCE }}
+          NG_APP_AUTH_CALLBACK_URL: ${{ vars.STAGING_AUTH_CALLBACK_URL }}
+          NG_APP_AUTH_CACHE_LOCATION: ${{ vars.STAGING_AUTH_CACHE_LOCATION }}
+          NG_APP_AUTH_USE_REFRESH_TOKENS: ${{ vars.STAGING_AUTH_USE_REFRESH_TOKENS }}
+
+      - name: Upload coverage artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: coverage-pr
+          path: coverage/

src/app/app.routes.ts

@@ -1,10 +1,15 @@
 import { Routes } from '@angular/router';
 import { NotFound } from './not-found/not-found';
 import { Home } from './home/home';
+import { AuthGuard } from '@auth0/auth0-angular';
+import { userGuard } from './user/user-guard';
+import { permissionGuard } from './user/permission-guard';
+import { UserPermission } from './user/user-permission';
 
 export const routes: Routes = [
   {
     path: '',
+    canActivate: [AuthGuard, userGuard, permissionGuard([UserPermission.ViewDashboard], 'all')],
     component: Home,
   },
   {

src/app/user/permission-guard.spec.ts

@@ -0,0 +1,109 @@
+import { TestBed } from '@angular/core/testing';
+import {
+  ActivatedRouteSnapshot,
+  CanActivateFn,
+  Router,
+  RouterStateSnapshot,
+} from '@angular/router';
+
+import { permissionGuard } from './permission-guard';
+import { UserStore } from './user-store';
+import { UserPermission } from './user-permission';
+
+describe('permissionGuard', () => {
+  const executeGuard = (permissions: UserPermission[], mode?: 'any' | 'all'): CanActivateFn => {
+    return (...guardParameters) =>
+      TestBed.runInInjectionContext(() => permissionGuard(permissions, mode)(...guardParameters));
+  };
+
+  it('should be created', () => {
+    expect(permissionGuard).toBeTruthy();
+  });
+
+  it('should return true when all required permissions are present in all mode', () => {
+    const mockUserStore = {
+      user: vi.fn().mockReturnValue({
+        permissions: [UserPermission.ViewDashboard],
+      }),
+    };
+    const mockRouter = {
+      createUrlTree: vi.fn().mockReturnValue({ path: '/forbidden' }),
+    };
+
+    TestBed.configureTestingModule({
+      providers: [
+        { provide: UserStore, useValue: mockUserStore },
+        { provide: Router, useValue: mockRouter },
+      ],
+    });
+
+    const guard = executeGuard([UserPermission.ViewDashboard], 'all');
+    expect(guard({} as ActivatedRouteSnapshot, {} as RouterStateSnapshot)).toBe(true);
+  });
+
+  it('should return url tree when one required permission is missing in all mode', () => {
+    const forbiddenTree = { path: '/forbidden' };
+    const mockUserStore = {
+      user: vi.fn().mockReturnValue({
+        permissions: [],
+      }),
+    };
+    const mockRouter = {
+      createUrlTree: vi.fn().mockReturnValue(forbiddenTree),
+    };
+
+    TestBed.configureTestingModule({
+      providers: [
+        { provide: UserStore, useValue: mockUserStore },
+        { provide: Router, useValue: mockRouter },
+      ],
+    });
+
+    const guard = executeGuard([UserPermission.ViewDashboard], 'all');
+    expect(guard({} as ActivatedRouteSnapshot, {} as RouterStateSnapshot)).toBe(forbiddenTree);
+    expect(mockRouter.createUrlTree).toHaveBeenCalledWith(['/forbidden']);
+  });
+
+  it('should return true when at least one required permission is present in any mode', () => {
+    const mockUserStore = {
+      user: vi.fn().mockReturnValue({
+        permissions: [UserPermission.ViewDashboard],
+      }),
+    };
+    const mockRouter = {
+      createUrlTree: vi.fn().mockReturnValue({ path: '/forbidden' }),
+    };
+
+    TestBed.configureTestingModule({
+      providers: [
+        { provide: UserStore, useValue: mockUserStore },
+        { provide: Router, useValue: mockRouter },
+      ],
+    });
+
+    const guard = executeGuard([UserPermission.ViewDashboard], 'any');
+    expect(guard({} as ActivatedRouteSnapshot, {} as RouterStateSnapshot)).toBe(true);
+  });
+
+  it('should default to all mode when mode is not provided', () => {
+    const forbiddenTree = { path: '/forbidden' };
+    const mockUserStore = {
+      user: vi.fn().mockReturnValue({
+        permissions: [],
+      }),
+    };
+    const mockRouter = {
+      createUrlTree: vi.fn().mockReturnValue(forbiddenTree),
+    };
+
+    TestBed.configureTestingModule({
+      providers: [
+        { provide: UserStore, useValue: mockUserStore },
+        { provide: Router, useValue: mockRouter },
+      ],
+    });
+
+    const guard = executeGuard([UserPermission.ViewDashboard]);
+    expect(guard({} as ActivatedRouteSnapshot, {} as RouterStateSnapshot)).toBe(forbiddenTree);
+  });
+});

src/app/user/permission-guard.ts

@@ -0,0 +1,28 @@
+import { inject } from '@angular/core';
+import { CanActivateFn, Router } from '@angular/router';
+import { UserPermission } from './user-permission';
+import { UserStore } from './user-store';
+
+export type PermissionGuardMode = 'any' | 'all';
+
+export const permissionGuard = (
+  requiredPermissions: UserPermission[],
+  mode: PermissionGuardMode = 'all',
+): CanActivateFn => {
+  return () => {
+    const userStore = inject(UserStore);
+    const router = inject(Router);
+    const userPermissions = userStore.user()?.permissions ?? [];
+
+    if (requiredPermissions.length === 0) {
+      return true;
+    }
+
+    const hasRequiredPermissions =
+      mode === 'any'
+        ? requiredPermissions.some((permission) => userPermissions.includes(permission))
+        : requiredPermissions.every((permission) => userPermissions.includes(permission));
+
+    return hasRequiredPermissions ? true : router.createUrlTree(['/forbidden']);
+  };
+};

src/app/user/user-permission.ts

@@ -0,0 +1,3 @@
+export enum UserPermission {
+  ViewDashboard = 'view:dashboard',
+}

src/app/user/user.ts

@@ -1,6 +1,9 @@
+import { UserPermission } from './user-permission';
+
 export interface User {
   id: string;
   username: string;
   createdAt: Date;
   avatar: string;
+  permissions: UserPermission[];
 }