feat: handle unauthorized error to redirect to login

apps/portal/src/app/auth/auth.service.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { MutationResult } from 'apollo-angular';
+import { Router } from '@angular/router';
 import { GraphqlService } from '../graphql/graphql.service';
 import { LoginUser } from '../graphql/graphql.queries';
 import { LoginRequestBody } from './auth.interface';
@@ -13,7 +14,10 @@ const SESSION_EXPIRATION_DAYS = 30;
 export class AuthService {
   userData = null;
 
-  constructor(private graphqlService: GraphqlService) {}
+  constructor(
+    private graphqlService: GraphqlService,
+    private router: Router,
+  ) {}
 
   isLoggedIn(): boolean {
     this.userData = JSON.parse(localStorage.getItem('osmoXUserData'));
@@ -38,4 +42,18 @@ export class AuthService {
     const variables = { username: data.username, password: data.password };
     return this.graphqlService.mutate(LoginUser, variables);
   }
+
+  logoutUser(): void {
+    try {
+      // Ensure complete cleanup of sensitive data
+      localStorage.clear();
+      sessionStorage.clear();
+      this.userData = null;
+
+      this.router.navigate(['/login']);
+    } catch (error) {
+      // Still attempt to navigate even if cleanup fails
+      this.router.navigate(['/login']);
+    }
+  }
 }

apps/portal/src/app/views/applications/application.model.ts

@@ -1,3 +1,5 @@
+import { GraphQLFormattedError } from 'graphql/error/GraphQLError';
+
 export interface Application {
   applicationId: number;
   name: string;
@@ -12,4 +14,5 @@ export interface ApplicationResponse {
   total: number;
   offset: number;
   limit: number;
+  errors?: ReadonlyArray<GraphQLFormattedError>;
 }

apps/portal/src/app/views/applications/applications.service.ts

@@ -29,6 +29,7 @@ export class ApplicationsService {
           total: response.data?.applications.total,
           offset: response.data?.applications.offset,
           limit: response.data?.applications.limit,
+          errors: response.errors || null,
         };
         return applicationResponseObject;
       }),

apps/portal/src/app/views/notifications/notifications.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { ChannelType, ChannelTypeMap, DeliveryStatus } from 'src/common/constants/notification';
 import { LazyLoadEvent, MessageService } from 'primeng/api';
 import { catchError, of } from 'rxjs';
+import { AuthService } from 'src/app/auth/auth.service';
 import { NotificationsService } from './notifications.service';
 import { Notification, NotificationResponse } from './notification.model';
 import { ApplicationsService } from '../applications/applications.service';
@@ -83,6 +84,7 @@ export class NotificationsComponent implements OnInit {
     private notificationService: NotificationsService,
     private applicationService: ApplicationsService,
     private messageService: MessageService,
+    private authService: AuthService,
   ) {}
 
   ngOnInit(): void {
@@ -121,7 +123,33 @@ export class NotificationsComponent implements OnInit {
         }),
       )
       .subscribe((applicationResponse: ApplicationResponse | null) => {
-        if (applicationResponse && applicationResponse.applications) {
+        if (applicationResponse?.errors?.length) {
+          const unauthorizedError = applicationResponse.errors.find(
+            (error) => error.message === 'Unauthorized',
+          );
+
+          this.applications = [];
+          this.selectedApplication = null;
+
+          if (unauthorizedError) {
+            this.messageService.add({
+              key: 'tst',
+              severity: 'error',
+              summary: 'Error',
+              detail: 'Unauthorized access. Please log in again.',
+            });
+            this.authService.logoutUser();
+          } else {
+            applicationResponse.errors.forEach((error) => {
+              this.messageService.add({
+                key: 'tst',
+                severity: 'error',
+                summary: 'Error',
+                detail: `GraphQL Error - Get Applications: ${error.message}`,
+              });
+            });
+          }
+        } else if (applicationResponse?.applications?.length) {
           // Fetch list of applications for dropdown
           this.applications = applicationResponse.applications.map((obj) => ({
             // Name to display and ID to return upon selection