From 4c0720ebf58e4ec699011a20866fa097a0bc614b Mon Sep 17 00:00:00 2001
From: John Hoffmann <johnvonhoffmann@gmail.com>
Date: Sat, 2 Nov 2024 08:54:12 +0100
Subject: [PATCH 1/4] fix: reactive login state handling

---
 src/app/app.component.html                    |  4 ++--
 src/app/app.component.ts                      | 14 +++++------
 .../authentication.component.html             |  2 +-
 .../authentication.component.ts               | 22 +++++++++++-------
 src/app/services/auth.service.ts              | 23 +++++++++++--------
 5 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 63a2559..8016415 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -4,7 +4,7 @@
 
     <a mat-button routerLink="">Browse Catalog</a>
     <a mat-button routerLink="query">Query Tool</a>
-    <ng-container *ngIf="isLoggedIn()">
+    <ng-container *ngIf="isLoggedIn">
         <button id="user-menu" mat-icon-button [matMenuTriggerFor]="menu" matTooltip="User: {{ username }}">
             <mat-icon>account_circle</mat-icon>
         </button>
@@ -16,7 +16,7 @@
 
 <div class="app-content">
     <app-authentication></app-authentication>
-    <ng-container *ngIf="isLoggedIn()">
+    <ng-container *ngIf="isLoggedIn">
         <router-outlet></router-outlet>
     </ng-container>
 </div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 3e1804b..bfcf8e8 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -8,27 +8,27 @@ import { Subscription } from 'rxjs';
     styleUrls: ['./app.component.scss'],
 })
 export class AppComponent implements OnInit, OnDestroy {
+    isLoggedIn = false;
     username: string | null = null;
+    private loginStateSubscription?: Subscription;
     private usernameSubscription?: Subscription;
 
     constructor(private authService: AuthService) {}
 
     ngOnInit(): void {
+        this.loginStateSubscription = this.authService.isLoggedIn$.subscribe((status) => {
+            this.isLoggedIn = status;
+        });
+
         this.usernameSubscription = this.authService.username$.subscribe((username) => {
             this.username = username;
         });
-
-        if (this.isLoggedIn()) {
-            this.username = this.authService.getUsername();
-        }
     }
 
     ngOnDestroy(): void {
+        this.loginStateSubscription?.unsubscribe();
         this.usernameSubscription?.unsubscribe();
     }
-    isLoggedIn(): boolean {
-        return this.authService.isLoggedIn();
-    }
 
     logout() {
         this.authService.logout();
diff --git a/src/app/components/authentication/authentication.component.html b/src/app/components/authentication/authentication.component.html
index e1c5b8c..6e72d56 100644
--- a/src/app/components/authentication/authentication.component.html
+++ b/src/app/components/authentication/authentication.component.html
@@ -1,4 +1,4 @@
-<div class="login-container" *ngIf="!isLoggedIn()">
+<div class="login-container" *ngIf="!isLoggedIn">
     <p>Please login with a Catalog User.</p>
     <form (submit)="login()" class="login-form">
         <mat-form-field appearance="outline" class="input-field small">
diff --git a/src/app/components/authentication/authentication.component.ts b/src/app/components/authentication/authentication.component.ts
index 573e54a..749366b 100644
--- a/src/app/components/authentication/authentication.component.ts
+++ b/src/app/components/authentication/authentication.component.ts
@@ -1,27 +1,33 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { AuthService, TokenResponse } from 'src/app/services/auth.service';
+import { AuthService } from 'src/app/services/auth.service';
+import { Subscription } from 'rxjs';
 
 @Component({
     selector: 'app-authentication',
     templateUrl: './authentication.component.html',
     styleUrls: ['./authentication.component.scss'],
 })
-export class AuthenticationComponent {
+export class AuthenticationComponent implements OnInit, OnDestroy {
     username = '';
     password = '';
+    isLoggedIn = false;
+    private loginStateSubscription?: Subscription;
 
     constructor(private authService: AuthService, private snackBar: MatSnackBar) {}
 
-    isLoggedIn(): boolean {
-        return this.authService.isLoggedIn();
+    ngOnInit(): void {
+        this.loginStateSubscription = this.authService.isLoggedIn$.subscribe((status) => {
+            this.isLoggedIn = status;
+        });
+    }
+
+    ngOnDestroy(): void {
+        this.loginStateSubscription?.unsubscribe();
     }
 
     login(): void {
         this.authService.login(this.username, this.password).subscribe({
-            next: (response: TokenResponse) => {
-                this.authService.handleTokenResponse(response);
-            },
             error: () => {
                 this.showErrorMessage('Wrong username or password.');
             },
diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts
index 1e046bd..c36cadd 100644
--- a/src/app/services/auth.service.ts
+++ b/src/app/services/auth.service.ts
@@ -24,6 +24,8 @@ export class AuthService {
     public readonly fcKeycloakClientSecret: string;
     private usernameSubject: BehaviorSubject<string | null> = new BehaviorSubject<string | null>(null);
     username$: Observable<string | null> = this.usernameSubject.asObservable();
+    private isLoggedInSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+    isLoggedIn$: Observable<boolean> = this.isLoggedInSubject.asObservable();
     accessToken = '';
     refreshToken = '';
     expiresIn = 0;
@@ -50,6 +52,7 @@ export class AuthService {
             const elapsed = (Date.now() - storedTime) / 1000;
             this.expiresIn = expiresIn - elapsed;
             if (this.expiresIn > 0) {
+                this.isLoggedInSubject.next(true);
                 this.startTokenExpirationTimer();
             } else {
                 this.refreshAccessToken();
@@ -62,17 +65,15 @@ export class AuthService {
             if (demoUsername && demoPassword) {
                 this.login(demoUsername, demoPassword).subscribe((response) => {
                     this.handleTokenResponse(response);
+                    this.isLoggedInSubject.next(true);
                 });
             }
         }
     }
 
-    isLoggedIn(): boolean {
-        return !!this.accessToken;
-    }
-
     login(username: string, password: string): Observable<TokenResponse> {
         this.usernameSubject.next(username);
+
         const body = new URLSearchParams();
         body.set('scope', this.fcKeycloakClientScope);
         body.set('grant_type', 'password');
@@ -85,7 +86,14 @@ export class AuthService {
             'Content-Type': 'application/x-www-form-urlencoded',
         });
 
-        return this.http.post<TokenResponse>(this.fcKeycloakAuthUrl, body.toString(), { headers });
+        return this.http
+            .post<TokenResponse>(this.fcKeycloakAuthUrl, body.toString(), { headers })
+            .pipe(
+                tap((response) => {
+                    this.handleTokenResponse(response);
+                    this.isLoggedInSubject.next(true);
+                }),
+            );
     }
 
     handleTokenResponse(response: TokenResponse): void {
@@ -134,10 +142,6 @@ export class AuthService {
             .subscribe();
     }
 
-    getUsername(): string | null {
-        return this.usernameSubject.value;
-    }
-
     logout(): void {
         this.accessToken = '';
         this.refreshToken = '';
@@ -151,5 +155,6 @@ export class AuthService {
         localStorage.removeItem('tokenStoredTime');
         localStorage.removeItem('username');
         this.usernameSubject.next(null);
+        this.isLoggedInSubject.next(false);
     }
 }

From 79ae79f51a04a58b17300f9fae675e194dd5fab3 Mon Sep 17 00:00:00 2001
From: John Hoffmann <john.hoffmann@accenture.com>
Date: Thu, 7 Nov 2024 13:51:11 +0100
Subject: [PATCH 2/4] fix: login after expired refresh token

---
 src/app/services/auth.service.ts | 41 ++++++++++++++++++++------------
 1 file changed, 26 insertions(+), 15 deletions(-)

diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts
index c36cadd..4040a04 100644
--- a/src/app/services/auth.service.ts
+++ b/src/app/services/auth.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Observable, BehaviorSubject, catchError, of, tap } from 'rxjs';
 
 declare global {
@@ -22,6 +22,10 @@ export class AuthService {
     public readonly fcKeycloakClientScope: string;
     public readonly fcKeycloakClientId: string;
     public readonly fcKeycloakClientSecret: string;
+    private demoUsername: string;
+    private demoPassword: string;
+    private loginRetryCount = 0;
+    private readonly maxLoginRetries = 1;
     private usernameSubject: BehaviorSubject<string | null> = new BehaviorSubject<string | null>(null);
     username$: Observable<string | null> = this.usernameSubject.asObservable();
     private isLoggedInSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
@@ -38,6 +42,8 @@ export class AuthService {
         this.fcKeycloakClientScope = window.ENVIRONMENT?.['FC_KEYCLOAK_CLIENT_SCOPE'] || 'gaia-x';
         this.fcKeycloakClientId = window.ENVIRONMENT?.['FC_KEYCLOAK_CLIENT_ID'] || 'federated-catalogue';
         this.fcKeycloakClientSecret = window.ENVIRONMENT?.['FC_KEYCLOAK_CLIENT_SECRET'] || 'keycloak-secret';
+        this.demoUsername = window.ENVIRONMENT?.['DEMO_USERNAME'] || 'user';
+        this.demoPassword = window.ENVIRONMENT?.['DEMO_PASSWORD'] || 'password';
         const storedUsername = localStorage.getItem('username');
         const storedToken = localStorage.getItem('accessToken');
         const storedRefreshToken = localStorage.getItem('refreshToken');
@@ -58,16 +64,7 @@ export class AuthService {
                 this.refreshAccessToken();
             }
         } else {
-            // Log in per env variables for demo purposes
-            const demoUsername = window.ENVIRONMENT?.['DEMO_USERNAME'];
-            const demoPassword = window.ENVIRONMENT?.['DEMO_PASSWORD'];
-
-            if (demoUsername && demoPassword) {
-                this.login(demoUsername, demoPassword).subscribe((response) => {
-                    this.handleTokenResponse(response);
-                    this.isLoggedInSubject.next(true);
-                });
-            }
+            this.loginWithDemoCredentials();
         }
     }
 
@@ -96,6 +93,19 @@ export class AuthService {
             );
     }
 
+    loginWithDemoCredentials(): void {
+        if (this.demoUsername && this.demoPassword) {
+            this.login(this.demoUsername, this.demoPassword).subscribe({
+                next: (response) => {
+                    this.handleTokenResponse(response);
+                },
+                error: () => {
+                    this.logout();
+                },
+            });
+        }
+    }
+
     handleTokenResponse(response: TokenResponse): void {
         this.accessToken = response.access_token;
         this.refreshToken = response.refresh_token;
@@ -132,10 +142,11 @@ export class AuthService {
         this.http
             .post<TokenResponse>(this.fcKeycloakAuthUrl, body.toString(), { headers })
             .pipe(
-                tap((response: TokenResponse) => this.handleTokenResponse(response)),
-                catchError((error: HttpErrorResponse) => {
-                    console.error('Failed to refresh token', error);
-                    this.logout();
+                tap((response) => {
+                    this.handleTokenResponse(response);
+                }),
+                catchError(() => {
+                    this.loginWithDemoCredentials();
                     return of(null);
                 }),
             )

From 6e2388acf469973bdb85ef7606b66f3cc2668302 Mon Sep 17 00:00:00 2001
From: John Hoffmann <johnvonhoffmann@gmail.com>
Date: Mon, 6 Jan 2025 20:48:49 +0100
Subject: [PATCH 3/4] feat: ensure logout if demo credentials are missing

---
 src/app/services/auth.service.ts | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts
index 4040a04..0358d5c 100644
--- a/src/app/services/auth.service.ts
+++ b/src/app/services/auth.service.ts
@@ -22,8 +22,8 @@ export class AuthService {
     public readonly fcKeycloakClientScope: string;
     public readonly fcKeycloakClientId: string;
     public readonly fcKeycloakClientSecret: string;
-    private demoUsername: string;
-    private demoPassword: string;
+    private demoUsername: string | undefined;
+    private demoPassword: string | undefined;
     private loginRetryCount = 0;
     private readonly maxLoginRetries = 1;
     private usernameSubject: BehaviorSubject<string | null> = new BehaviorSubject<string | null>(null);
@@ -42,8 +42,8 @@ export class AuthService {
         this.fcKeycloakClientScope = window.ENVIRONMENT?.['FC_KEYCLOAK_CLIENT_SCOPE'] || 'gaia-x';
         this.fcKeycloakClientId = window.ENVIRONMENT?.['FC_KEYCLOAK_CLIENT_ID'] || 'federated-catalogue';
         this.fcKeycloakClientSecret = window.ENVIRONMENT?.['FC_KEYCLOAK_CLIENT_SECRET'] || 'keycloak-secret';
-        this.demoUsername = window.ENVIRONMENT?.['DEMO_USERNAME'] || 'user';
-        this.demoPassword = window.ENVIRONMENT?.['DEMO_PASSWORD'] || 'password';
+        this.demoUsername = window.ENVIRONMENT?.['DEMO_USERNAME'];
+        this.demoPassword = window.ENVIRONMENT?.['DEMO_PASSWORD'];
         const storedUsername = localStorage.getItem('username');
         const storedToken = localStorage.getItem('accessToken');
         const storedRefreshToken = localStorage.getItem('refreshToken');
@@ -63,8 +63,10 @@ export class AuthService {
             } else {
                 this.refreshAccessToken();
             }
-        } else {
+        } else if (this.demoUsername && this.demoPassword) {
             this.loginWithDemoCredentials();
+        } else {
+            this.logout();
         }
     }
 

From 7ee27db4e9e0c893dd814172c6916d01d17a5a3f Mon Sep 17 00:00:00 2001
From: John Hoffmann <johnvonhoffmann@gmail.com>
Date: Mon, 6 Jan 2025 20:49:21 +0100
Subject: [PATCH 4/4] chore: remove unused variables

---
 src/app/services/auth.service.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts
index 0358d5c..2482725 100644
--- a/src/app/services/auth.service.ts
+++ b/src/app/services/auth.service.ts
@@ -24,8 +24,6 @@ export class AuthService {
     public readonly fcKeycloakClientSecret: string;
     private demoUsername: string | undefined;
     private demoPassword: string | undefined;
-    private loginRetryCount = 0;
-    private readonly maxLoginRetries = 1;
     private usernameSubject: BehaviorSubject<string | null> = new BehaviorSubject<string | null>(null);
     username$: Observable<string | null> = this.usernameSubject.asObservable();
     private isLoggedInSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);