Feature/asset 81 restrict access to groups

apps/client-asset-sg/src/app/app.component.html

@@ -1,10 +1,10 @@
 <asset-sg-app-bar>
   <ng-template [cdkPortalOutlet]="appPortalService.appBarPortalContent$ | push"></ng-template>
 </asset-sg-app-bar>
-<asset-sg-menu-bar />
+<asset-sg-menu-bar *ngIf="!router.url.includes('/error')"/>
 <div class="router-outlet">
   <router-outlet></router-outlet>
 </div>
-<div class="drawer-portal">
+<div class="drawer-portal" *ngIf="!router.url.includes('/error')">
   <ng-template [cdkPortalOutlet]="appPortalService.drawerPortalContent$ | push"></ng-template>
 </div>

apps/client-asset-sg/src/app/app.component.ts

@@ -10,6 +10,7 @@ import { AuthService } from '@asset-sg/auth';
 import { AppPortalService, appSharedStateActions, setCssCustomProperties } from '@asset-sg/client-shared';
 
 import { AppState } from './state/app-state';
+import { Router } from '@angular/router';
 
 const fullHdWidth = 1920;
 
@@ -24,6 +25,7 @@ export class AppComponent {
     private _httpClient = inject(HttpClient);
     public appPortalService = inject(AppPortalService);
     private store = inject(Store<AppState>);
+    public readonly router: Router = inject(Router)
 
     constructor(private readonly _authService: AuthService) {
         this._httpClient

apps/client-asset-sg/src/app/app.module.ts

@@ -39,11 +39,19 @@ import { AppBarComponent, MenuBarComponent, NotFoundComponent, RedirectToLangCom
 import { appTranslations } from './i18n';
 import { AppSharedStateEffects } from './state';
 import { appSharedStateReducer } from './state/app-shared.reducer';
+import { ErrorComponent } from './components/error/error.component';
 
 registerLocaleData(locale_deCH, 'de-CH');
 
 @NgModule({
-    declarations: [AppComponent, RedirectToLangComponent, NotFoundComponent, AppBarComponent, MenuBarComponent],
+    declarations: [
+        AppComponent,
+        RedirectToLangComponent,
+        NotFoundComponent,
+        AppBarComponent,
+        MenuBarComponent,
+        ErrorComponent,
+    ],
     imports: [
         BrowserModule,
         BrowserAnimationsModule,
@@ -67,6 +75,10 @@ registerLocaleData(locale_deCH, 'de-CH');
                 loadChildren: () => import('@asset-sg/asset-editor').then(m => m.AssetEditorModule),
                 canActivate: [editorGuard],
             },
+            {
+                path: ':lang/error',
+                component: ErrorComponent,
+            },
             {
                 matcher: assetsPageMatcher,
                 loadChildren: () => import('@asset-sg/asset-viewer').then(m => m.AssetViewerModule),

apps/client-asset-sg/src/app/components/error/error.component.html

@@ -0,0 +1,6 @@
+
+<div class="error-page">
+  <span >{{errorMessage}}</span>
+  <button asset-sg-warn (click)="logout()">Logout</button>
+</div>
+

apps/client-asset-sg/src/app/components/error/error.component.scss

@@ -0,0 +1,13 @@
+.error-page {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  position: absolute;
+  padding: 40px;
+  width: 100%;
+  background-color: red;
+  color: white;
+  align-items: center;
+  font-size: 24px;
+  font-weight: bolder;
+}

apps/client-asset-sg/src/app/components/error/error.component.ts

@@ -0,0 +1,23 @@
+import { Component, inject } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AuthService } from '@asset-sg/auth';
+
+@Component({
+    selector: 'asset-sg-error',
+    templateUrl: './error.component.html',
+    styleUrls: ['./error.component.scss'],
+})
+export class ErrorComponent {
+  errorMessage: string;
+  private readonly _authService = inject(AuthService);
+
+  constructor(private route: ActivatedRoute, private router: Router) {
+    const navigation = this.router.getCurrentNavigation();
+    console.log(navigation?.extras.state?.['errorMessage']);
+    this.errorMessage = navigation?.extras.state?.['errorMessage'] ?? 'An error occurred, please try again later.';
+  }
+
+  public logout() {
+    this._authService.logOut();
+  }
+}

apps/server-asset-sg/.env.template

@@ -10,3 +10,9 @@ DATABASE_URL=db/01_roles + access url postgres
 GOTRUE_JWT_SECRET=selber generieren, gleich wie in development
 OCR_URL=
 OCR_CALLBACK_URL=
+OAUTH_ISSUER=
+OAUTH_CLIENT_ID=
+OAUTH_SCOPE=
+OAUTH_SHOW_DEBUG_INFO=
+OAUTH_TOKEN_ENDPOINT=
+OAUTH_AUTHORIZED_GROUPS=

apps/server-asset-sg/src/app/jwt/jwt-middleware.ts

@@ -5,6 +5,7 @@ import { Cache } from 'cache-manager';
 import { NextFunction, Request, Response } from 'express';
 import * as E from 'fp-ts/Either';
 import { pipe } from 'fp-ts/function';
+import * as O from 'fp-ts/Option';
 import * as TE from 'fp-ts/TaskEither';
 import * as jwt from 'jsonwebtoken';
 import { Jwt, JwtPayload } from 'jsonwebtoken';
@@ -23,11 +24,11 @@ export class JwtMiddleware implements NestMiddleware {
         await this.cacheManager.set('jwk', E.isRight(jwk) ? jwk.right : [], 60 * 1000);
 
         const token = this.extractTokenFromHeaderE(req);
-
-        // Decode token, get JWK, convert JWK to PEM, and verify token
+        // Decode token, check groups permission, get JWK, convert JWK to PEM, and verify token
         const result = pipe(
             token,
             E.chain(this.decodeTokenE),
+            E.chain(this.isAuthorizedByGroupE),
             E.chain(decoded =>
                 pipe(
                     jwk,
@@ -44,7 +45,7 @@ export class JwtMiddleware implements NestMiddleware {
             (req as AuthenticatedRequest).jwtPayload = result.right.jwtPayload as JwtPayload;
             next();
         } else {
-            throw result.left;
+          _res.status(403).json({ error: result.left.message });
         }
     }
 
@@ -81,6 +82,16 @@ export class JwtMiddleware implements NestMiddleware {
         );
     }
 
+  private isAuthorizedByGroupE(jwt: Jwt): E.Either<Error, Jwt> {
+      const authorizedGroups = process.env.OAUTH_AUTHORIZED_GROUPS?.split(',');
+      if (!authorizedGroups) {
+        return E.left(new Error('An internal server error occurred. Please try again.'));
+      }
+      const userGroups = (jwt.payload as JwtPayload)['cognito:groups'] as string[];
+      const isUserAuthorized = userGroups.some(group => authorizedGroups.includes(group));
+      return isUserAuthorized ? E.right(jwt) : E.left(new Error('You are not authorized to access this resource'));
+  }
+
     private getJwkTE(): TE.TaskEither<Error, JwksKey[]> {
         return pipe(
             TE.tryCatch(
@@ -91,6 +102,8 @@ export class JwtMiddleware implements NestMiddleware {
         );
     }
 
+
+
     private getSigningKeyE(decoded: Jwt, jwks: JwksKey[]): E.Either<Error, JwksKey> {
         return pipe(
             jwks.find((key: any) => key.kid === decoded.header.kid),

libs/auth/src/lib/services/auth.interceptor.ts

@@ -1,11 +1,13 @@
 import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
 import { Injectable, inject } from '@angular/core';
 import { OAuthService } from 'angular-oauth2-oidc';
-import { Observable, throwError } from 'rxjs';
+import { catchError, EMPTY, Observable, tap, throwError } from 'rxjs';
+import { Router } from '@angular/router';
 
 @Injectable()
 export class AuthInterceptor implements HttpInterceptor {
     private _oauthService = inject(OAuthService);
+    private _router: Router = inject(Router);
 
     intercept(req: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
         const token = sessionStorage.getItem('access_token');
@@ -22,11 +24,16 @@ export class AuthInterceptor implements HttpInterceptor {
                 redirect_uri: window.location.origin,
                 response_type: this._oauthService.responseType,
             });
-            return throwError(new HttpErrorResponse({ status: 401, statusText: 'Unauthorized' }));
-        } else if (!token) {
-            return throwError(new HttpErrorResponse({ status: 401, statusText: 'No Token' }));
+            return EMPTY;
+        }  else if (!token) {
+          return EMPTY;
         } else {
-            return next.handle(req);
+            return next.handle(req).pipe(
+              catchError((error: HttpErrorResponse) => {
+                this._router.navigate(['de/error'], { state: { errorMessage: error.error.error } });
+                return EMPTY;
+              })
+            );
         }
     }
 }