@opendevstack/ngx-appshell 19.0.5

package/schematics/azure-login/files/azure-service/azure.service.spec.ts.template

@@ -0,0 +1,311 @@
+import { fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { AzureService } from './azure.service';
+import { MSAL_GUARD_CONFIG, MsalBroadcastService, MsalGuardConfiguration, MsalService } from "@azure/msal-angular";
+import { BehaviorSubject, of, Subject } from 'rxjs';
+import { AuthenticationResult, EventMessage, EventType, InteractionStatus, InteractionType, RedirectRequest } from '@azure/msal-browser';
+import { Router } from '@angular/router';
+
+const destroyingMethodName = '_destroying$';
+const fakeToken = 'test-token';
+
+describe('AzureService', () => {
+    let service: AzureService;
+    let msalService: jasmine.SpyObj<MsalService>;
+    const msalGuardConfig: jasmine.SpyObj<MsalGuardConfiguration> = jasmine.createSpyObj('MsalGuardConfiguration', ['authRequest', 'interactionType']);
+    let msalSubject$: Subject<EventMessage>;
+    let inProgress$: Subject<InteractionStatus>;
+    const msalInstanceSpy = jasmine.createSpyObj('instance', ['enableAccountStorageEvents', 'getAllAccounts', 'getActiveAccount', 'setActiveAccount', 'acquireTokenSilent']);
+    const mockRouter: jasmine.SpyObj<Router> =  jasmine.createSpyObj('Router', ['navigate']);;
+
+    beforeEach(() => {
+        msalSubject$ = new Subject<EventMessage>();
+        inProgress$ = new Subject<InteractionStatus>();
+        
+        const msalServiceSpy = jasmine.createSpyObj('MsalService', ['handleRedirectObservable', 'instance', 'loginRedirect', 'logout']);
+        const msalBroadcastServiceSpy = jasmine.createSpyObj('MsalBroadcastService', [], {
+            msalSubject$: msalSubject$.asObservable(),
+            inProgress$: inProgress$.asObservable()
+        });
+        
+        TestBed.configureTestingModule({
+            providers: [
+                AzureService,
+                { provide: MSAL_GUARD_CONFIG, useValue: msalGuardConfig },
+                { provide: MsalService, useValue: msalServiceSpy },
+                { provide: MsalBroadcastService, useValue: msalBroadcastServiceSpy },
+                { provide: Router, useValue: mockRouter }
+            ]
+        });
+
+        service = TestBed.inject(AzureService);
+        msalService = TestBed.inject(MsalService) as jasmine.SpyObj<MsalService>;
+        msalInstanceSpy.getAllAccounts.and.returnValue([{}]);
+        msalService.instance = msalInstanceSpy;
+        msalGuardConfig.interactionType = InteractionType.Redirect;
+        
+        window.onbeforeunload = () => "Oh no!"; // Prevent page reloads during tests 
+    });
+
+    it('should be created', () => {
+        expect(service).toBeTruthy();
+    });
+
+    it('should initialize properties in the constructor', () => {
+        expect(service.isIframe).toBeFalse();
+        expect(service.loginDisplay).toBeFalse();
+        expect(service.isFirstTime).toBeTrue();
+        expect(service.loggedUser$).toBeInstanceOf(BehaviorSubject);
+        expect(service.loggedUser$.value).toBeNull();
+    });
+
+    it('initialize method works', () => {
+        msalService.handleRedirectObservable.and.returnValue(of({} as AuthenticationResult));
+        service.initialize();
+        msalSubject$.next({eventType: EventType.ACCOUNT_ADDED} as EventMessage);
+        inProgress$.next(InteractionStatus.None);
+        expect(msalService.handleRedirectObservable).toHaveBeenCalled();
+    });
+
+    it('initialize - should set window.location.pathname to "/" when all accounts are removed', fakeAsync(() => {
+        msalService.handleRedirectObservable.and.returnValue(of({} as AuthenticationResult));
+        msalInstanceSpy.getAllAccounts.and.returnValue([]);
+        service.initialize();
+        msalSubject$.next({ eventType: EventType.ACCOUNT_REMOVED } as EventMessage);
+        tick();
+        expect(mockRouter.navigate).toHaveBeenCalledWith(['/']);
+    }));
+
+    it('refreshLoggedUser - should set loggedUser$ to null if no msalUser and isFirstTime is true', fakeAsync(() => {
+        service.isFirstTime = true;
+        msalInstanceSpy.getActiveAccount.and.returnValue(null);
+        service.refreshLoggedUser();
+        expect(service.isFirstTime).toBe(false);
+        tick();
+        expect(service.loggedUser$.value).toBeNull();
+    }));
+
+    it('refreshLoggedUser - should set loggedUser$ to null if no msalUser and isFirstTime is false', fakeAsync(() => {
+        service.isFirstTime = false;
+        msalInstanceSpy.getActiveAccount.and.returnValue(null);
+        service.refreshLoggedUser();
+        tick();
+        expect(service.loggedUser$.value).toBeNull();
+    }));
+
+    it('refreshLoggedUser - should set loggedUser$ with user details if msalUser exists', (done) => {
+        const msalUser = { name: 'Test User' };
+        msalInstanceSpy.getActiveAccount.and.returnValue(msalUser);
+        msalInstanceSpy.acquireTokenSilent.and.returnValue(Promise.resolve({ accessToken: fakeToken }));
+
+        spyOn(window, 'fetch').and.returnValues(
+            Promise.resolve(new Response(new Blob())),
+            Promise.resolve(new Response('{"value": [{"displayName": "Group"}]}'))
+        );
+
+        service.loggedUser$.subscribe((user) => {
+            if (user) {
+                expect(user.fullName).toBe(msalUser.name);
+                expect(user.avatarSrc).not.toBeUndefined();
+                done();
+            }
+        });
+
+        service.refreshLoggedUser();
+    });
+
+    it('refreshLoggedUser - should handle error when acquiring token silently', (done) => {
+        const msalUser = { name: 'Test User' };
+        msalInstanceSpy.getActiveAccount.and.returnValue(msalUser);
+        msalInstanceSpy.acquireTokenSilent.and.returnValue(Promise.reject(new Error('Error acquiring token silently')));
+
+        service.refreshLoggedUser();
+
+        setTimeout(() => {
+            expect(service.loggedUser$.value!.fullName).toBe(msalUser.name);
+            done();
+        }, 0);
+    });
+
+    it('refreshLoggedUser - should handle error when fetching profile picture', (done) => {
+        const msalUser = { name: 'Test User' };
+        msalInstanceSpy.getActiveAccount.and.returnValue(msalUser);
+        msalInstanceSpy.acquireTokenSilent.and.returnValue(Promise.resolve({ accessToken: fakeToken }));
+
+        spyOn(window, 'fetch').and.returnValue(Promise.reject(new Error('Error fetching profile picture')));
+
+        service.refreshLoggedUser();
+
+        setTimeout(() => {
+            expect(service.loggedUser$.value!.fullName).toBe(msalUser.name);
+            done();
+        }, 0);
+    });
+
+    it('refreshLoggedUser - should handle 404 error when fetching profile picture', (done) => {
+        const msalUser = { name: 'Test User' };
+        msalInstanceSpy.getActiveAccount.and.returnValue(msalUser);
+        msalInstanceSpy.acquireTokenSilent.and.returnValue(Promise.resolve({ accessToken: fakeToken }));
+    
+        spyOn(window, 'fetch').and.returnValue(Promise.resolve(new Response(null, { status: 404 })));
+    
+        service.refreshLoggedUser();
+    
+        setTimeout(() => {
+            expect(service.loggedUser$.value!.fullName).toBe(msalUser.name);
+            expect(service.loggedUser$.value!.avatarSrc).toBeUndefined();
+            done();
+        }, 0);
+    });
+
+    it('login - should call loginRedirect with authRequest if msalGuardConfig.authRequest is defined', () => {
+        msalGuardConfig.authRequest = { scopes: ['User.Read'] }
+
+        service.login();
+
+        expect(msalService.loginRedirect).toHaveBeenCalledWith({
+            ...{ scopes: ['User.Read'] }
+        } as RedirectRequest);
+    });
+
+    it('login - should call loginRedirect without parameters if msalGuardConfig.authRequest is not defined', () => {
+        msalGuardConfig.authRequest = undefined;
+
+        service.login();
+
+        expect(msalService.loginRedirect).toHaveBeenCalledWith();
+    });
+
+    it('logout - should call logout on msalService', () => {
+        service.logout();
+        expect(msalService.logout).toHaveBeenCalled();
+    });
+
+    it('checkAndSetActiveAccount - should set the first account as active if no active account is set', () => {
+        msalInstanceSpy.setActiveAccount.calls.reset();
+        msalInstanceSpy.getActiveAccount.calls.reset();
+        msalInstanceSpy.getAllAccounts.calls.reset();
+        const accounts = [{ username: 'testuser' }];
+        msalInstanceSpy.getActiveAccount.and.returnValue(null);
+        msalInstanceSpy.getAllAccounts.and.returnValue(accounts);
+        service.checkAndSetActiveAccount();
+        expect(msalInstanceSpy.setActiveAccount).toHaveBeenCalledWith(accounts[0]);
+        expect(msalInstanceSpy.getActiveAccount).toHaveBeenCalled();
+        expect(msalInstanceSpy.getAllAccounts).toHaveBeenCalled();
+    });
+
+    it('checkAndSetActiveAccount - should not set active account if an active account is already set', () => {
+        msalInstanceSpy.setActiveAccount.calls.reset();
+        msalInstanceSpy.getActiveAccount.calls.reset();
+        const activeAccount = { username: 'activeuser' };
+        msalInstanceSpy.getActiveAccount.and.returnValue(activeAccount);
+        msalInstanceSpy.acquireTokenSilent.and.returnValue(Promise.resolve({ accessToken: fakeToken }));
+        spyOn(window, 'fetch').and.returnValue(Promise.resolve(new Response(new Blob())));
+        service.checkAndSetActiveAccount();
+        expect(msalInstanceSpy.setActiveAccount).not.toHaveBeenCalled();
+        expect(msalInstanceSpy.getActiveAccount).toHaveBeenCalled();
+    });
+
+    it('checkAndSetActiveAccount - should not set active account if there are no accounts', () => {
+        msalInstanceSpy.setActiveAccount.calls.reset();
+        msalInstanceSpy.getActiveAccount.calls.reset();
+        msalInstanceSpy.getAllAccounts.calls.reset();
+        msalInstanceSpy.getActiveAccount.and.returnValue(null);
+        msalInstanceSpy.getAllAccounts.and.returnValue([]);
+        service.checkAndSetActiveAccount();
+        expect(msalInstanceSpy.setActiveAccount).not.toHaveBeenCalled();
+        expect(msalInstanceSpy.getActiveAccount).toHaveBeenCalled();
+        expect(msalInstanceSpy.getAllAccounts).toHaveBeenCalled();
+    });
+
+    it('checkAndSetActiveAccount - should call refreshLoggedUser', () => {
+        msalInstanceSpy.setActiveAccount.calls.reset();
+        msalInstanceSpy.getActiveAccount.calls.reset();
+        msalInstanceSpy.getAllAccounts.calls.reset();
+        spyOn(service, 'refreshLoggedUser');
+        msalInstanceSpy.getActiveAccount.and.returnValue(null);
+        msalInstanceSpy.getAllAccounts.and.returnValue([{ username: 'testuser' }]);
+        service.checkAndSetActiveAccount();
+        expect(service.refreshLoggedUser).toHaveBeenCalled();
+    });
+    
+    it('ngOnDestroy - should complete the _destroying$ subject', () => {
+        spyOn(service[destroyingMethodName], 'next');
+        spyOn(service[destroyingMethodName], 'complete');
+
+        service.ngOnDestroy();
+
+        expect(service[destroyingMethodName].next).toHaveBeenCalledWith(undefined);
+        expect(service[destroyingMethodName].complete).toHaveBeenCalled();
+    });
+
+    it('getIdToken - should return the idToken of the active account', () => {
+        const activeAccount = { idToken: 'test-id-token' };
+        msalInstanceSpy.getActiveAccount.and.returnValue(activeAccount);
+    
+        const token = service.getIdToken();
+    
+        expect(token).toBe('test-id-token');
+    });
+    
+    it('getIdToken - should return an empty string if no active account', () => {
+        msalInstanceSpy.getActiveAccount.and.returnValue(null);
+    
+        const token = service.getIdToken();
+    
+        expect(token).toBe('');
+    });
+
+    it('refreshToken - should call acquireTokenSilent with correct scopes', () => {
+        const acquireTokenSilentSpy = msalInstanceSpy.acquireTokenSilent.and.returnValue(Promise.resolve({ accessToken: fakeToken }));
+    
+        service.refreshToken();
+    
+        expect(acquireTokenSilentSpy).toHaveBeenCalledWith({ scopes: ["User.Read"] });
+    });
+    
+    it('refreshToken - should return a promise that resolves with the access token', async () => {
+        const expectedToken = { accessToken: fakeToken } as AuthenticationResult;
+        msalInstanceSpy.acquireTokenSilent.and.returnValue(Promise.resolve(expectedToken));
+    
+        const result = await service.refreshToken();
+    
+        expect(result).toEqual(expectedToken);
+    });
+    
+    it('refreshToken - should return a promise that rejects with an error', async () => {
+        const expectedError = new Error('Error acquiring token silently');
+        msalInstanceSpy.acquireTokenSilent.and.returnValue(Promise.reject(expectedError));
+    
+        try {
+            await service.refreshToken();
+            fail('Expected promise to be rejected');
+        } catch (error) {
+            expect(error).toEqual(expectedError);
+        }
+    });
+    
+    it('getRefreshedAccessToken - should return an observable that emits the access token', (done) => {
+        const expectedToken = 'test-access-token';
+        const authResult = { accessToken: expectedToken } as AuthenticationResult;
+        msalInstanceSpy.acquireTokenSilent.and.returnValue(Promise.resolve(authResult));
+
+        service.getRefreshedAccessToken().subscribe((token) => {
+            expect(token).toEqual(expectedToken);
+            done();
+        });
+    });
+
+    it('getRefreshedAccessToken - should handle error when acquiring token fails', (done) => {
+        const expectedError = new Error('Error acquiring token');
+        msalInstanceSpy.acquireTokenSilent.and.returnValue(Promise.reject(expectedError));
+
+        service.getRefreshedAccessToken().subscribe({
+            next: () => fail('Expected observable to error'),
+            error: (error) => {
+                expect(error).toEqual(expectedError);
+                done();
+            }
+        });
+    });
+    
+});

package/schematics/azure-login/files/azure-service/azure.service.ts.template

@@ -0,0 +1,161 @@
+import { Inject, Injectable, OnDestroy } from "@angular/core";
+import { MSAL_GUARD_CONFIG, MsalBroadcastService, MsalGuardConfiguration, MsalService } from "@azure/msal-angular";
+import { AuthenticationResult, EventMessage, EventType, InteractionStatus, RedirectRequest } from "@azure/msal-browser";
+import { AppShellUser } from "@appshell/ngx-appshell";
+import { BehaviorSubject, filter, from, map, Observable, Subject, switchMap, takeUntil } from "rxjs";
+import { Router } from "@angular/router";
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AzureService implements OnDestroy {
+    isIframe = false;
+    loginDisplay = false;
+    private readonly _destroying$ = new Subject<void>();
+
+    isFirstTime = true;
+    loggedUser$ = new BehaviorSubject<AppShellUser | null >(null);
+  
+    constructor(
+      @Inject(MSAL_GUARD_CONFIG) private readonly msalGuardConfig: MsalGuardConfiguration,
+      private readonly msalService: MsalService,
+      private readonly msalBroadcastService: MsalBroadcastService,
+      private readonly router: Router
+    ) {}
+
+    initialize() {
+        this.msalService.handleRedirectObservable().subscribe();
+        this.isIframe = window !== window.parent && !window.opener; // Remove this line to use Angular Universal
+
+        this.setLoginDisplay();
+
+        this.msalService.instance.enableAccountStorageEvents(); // Optional - This will enable ACCOUNT_ADDED and ACCOUNT_REMOVED events emitted when a user logs in or out of another tab or window
+        this.msalBroadcastService.msalSubject$
+        .pipe(
+            filter((msg: EventMessage) =>
+                msg.eventType === EventType.ACCOUNT_ADDED ||
+                msg.eventType === EventType.ACCOUNT_REMOVED
+            )
+        )
+        .subscribe(() => {
+            if (this.msalService.instance.getAllAccounts().length === 0) {
+                this.router.navigate(['/']);
+            } else {
+                this.setLoginDisplay();
+            }
+        });
+
+        this.msalBroadcastService.inProgress$
+        .pipe(
+            filter((status: InteractionStatus) => status === InteractionStatus.None),
+            takeUntil(this._destroying$)
+        )
+        .subscribe(() => {
+            this.setLoginDisplay();
+            this.checkAndSetActiveAccount();
+        });
+    }
+
+    setLoginDisplay() {
+        this.loginDisplay = this.msalService.instance.getAllAccounts().length > 0;
+    }
+
+    getIdToken(): string {
+        return this.msalService.instance.getActiveAccount()?.idToken ?? '';
+    }
+
+    refreshToken(): Promise<AuthenticationResult> {
+        return this.msalService.instance.acquireTokenSilent({scopes: ["User.Read"]});
+    }
+
+    getRefreshedAccessToken(): Observable<string> {
+        return from(this.refreshToken()).pipe(
+            map((azureData: AuthenticationResult) => azureData.accessToken)
+        );
+    }
+
+    refreshLoggedUser(): void {
+        const msalUser = this.msalService.instance.getActiveAccount();
+        if (!msalUser) {
+            if(this.isFirstTime && !this.isIframe) {
+                this.isFirstTime = false;
+                // Add a small delay to prevent rapid loops
+                setTimeout(() => {
+                    this.login();
+                }, 100);
+            } else {
+                this.loggedUser$.next(null);
+            }
+        } else {
+            const loggedUser = {
+                fullName: msalUser.name,
+                username: msalUser.username,
+                avatarSrc: undefined
+            } as AppShellUser;
+            
+            this.msalService.instance.acquireTokenSilent({
+                scopes: ["User.Read"]
+            })
+            .then(async response => {
+                try {
+                    const res = await fetch('https://graph.microsoft.com/v1.0/me/photo/$value', {
+                        headers: {
+                            'Authorization': `Bearer ${response.accessToken}`
+                        }
+                    });
+                    if (!res.ok) {
+                        console.warn('Microsoft profile picture not found');
+                        return;
+                    }
+                    const blob = await res.blob();
+                    loggedUser.avatarSrc = URL.createObjectURL(blob);
+                } catch (error) {
+                    console.error('Error fetching profile picture', error);
+                }
+            })
+            .catch(error => {
+                console.error('Error acquiring token silently', error);
+            })
+            .finally(() => {
+                this.loggedUser$.next(loggedUser);
+            });
+        }
+    }
+
+    checkAndSetActiveAccount() {
+        /**
+         * If no active account set but there are accounts signed in, sets first account to active account
+         * To use active account set here, subscribe to inProgress$ first in your component
+         * Note: Basic usage demonstrated. Your app may require more complicated account selection logic
+         */
+        const activeAccount = this.msalService.instance.getActiveAccount();
+
+        if (
+            !activeAccount &&
+            this.msalService.instance.getAllAccounts().length > 0
+        ) {
+            const accounts = this.msalService.instance.getAllAccounts();
+            this.msalService.instance.setActiveAccount(accounts[0]);
+        }
+        this.refreshLoggedUser();
+    }
+
+    login() {
+        if (this.msalGuardConfig.authRequest) {
+            this.msalService.loginRedirect({
+                ...this.msalGuardConfig.authRequest,
+            } as RedirectRequest);
+        } else {
+            this.msalService.loginRedirect();
+        }
+    }
+
+    logout() {
+        this.msalService.logout();
+    }
+
+    ngOnDestroy(): void {
+        this._destroying$.next(undefined);
+        this._destroying$.complete();
+    }
+}

package/schematics/azure-login/index.d.ts

@@ -0,0 +1,2 @@
+import { Rule } from '@angular-devkit/schematics';
+export declare function azureLoginGenerator(): Rule;