Refactor igx-ts side-nav-auth template to standalone components and angular-auth-oidc-client v21

packages/igx-templates/igx-ts/projects/_base/files/tsconfig.json

@@ -13,7 +13,8 @@
     "experimentalDecorators": true,
     "importHelpers": true,
     "target": "ES2022",
-    "module": "preserve"
+    "module": "preserve",
+    "moduleResolution": "Bundler"
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,

packages/igx-templates/igx-ts/projects/side-nav-auth/files/package.json

@@ -19,7 +19,7 @@
     "@angular/platform-browser": "~21.2.0",
     "@angular/platform-browser-dynamic": "~21.2.0",
     "@angular/router": "~21.2.0",
-    "angular-auth-oidc-client": "~15.0.4",
+    "angular-auth-oidc-client": "~21.0.1",
     "hammerjs": "~2.0.8",
     "igniteui-angular": "~21.1.0",
     "minireset.css": "~0.0.7",

packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.config.ts

@@ -9,7 +9,7 @@ import {
   IgxRippleModule,
 } from '<%=igxPackage%>';
 
-import { AuthenticationModule, ExternalAuth } from './authentication';
+import { oidcConfigs, provideAuthentication } from './authentication';
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
@@ -24,9 +24,8 @@ export const appConfig: ApplicationConfig = {
       IgxNavbarModule,
       IgxNavigationDrawerModule,
       IgxRippleModule,
-      AuthenticationModule
     ),
     provideAnimations(),
-    ExternalAuth
+    provideAuthentication(oidcConfigs)
   ]
 };

packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.routes.ts

@@ -1,3 +1,16 @@
 import { Routes } from '@angular/router';
+import { AuthGuard } from './authentication/auth.guard';
+import { Home } from './home/home';
+import { Profile } from './authentication/profile/profile';
+import { Redirect } from './authentication/redirect/redirect';
+import { ExternalAuthProvider } from './authentication/services/external-auth-configs';
+import { ExternalAuthRedirectUrl } from './authentication/services/external-auth';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  { path: '', redirectTo: '/home', pathMatch: 'full' },
+  { path: 'home', component: Home, data: { text: 'Home' } },
+  { path: 'profile', component: Profile, canActivate: [AuthGuard] },
+  { path: ExternalAuthRedirectUrl.Google, component: Redirect, data: { provider: ExternalAuthProvider.Google } },
+  { path: ExternalAuthRedirectUrl.Facebook, component: Redirect, data: { provider: ExternalAuthProvider.Facebook } },
+  { path: ExternalAuthRedirectUrl.Microsoft, component: Redirect, data: { provider: ExternalAuthProvider.Microsoft } }
+];

packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.spec.ts

@@ -3,7 +3,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule } from '@angular/router';
 import { IgxLayoutModule, IgxNavbarModule, IgxNavigationDrawerModule, IgxRippleModule } from 'igniteui-angular';
 import { App } from './app';
-import { AuthenticationModule } from './authentication';
+import { provideAuthentication } from './authentication/provide-authentication';
 
 describe('App', () => {
   beforeEach(async () => {
@@ -12,11 +12,13 @@ describe('App', () => {
         NoopAnimationsModule,
         RouterModule.forRoot([]),
         IgxNavigationDrawerModule,
-        AuthenticationModule,
         IgxNavbarModule,
         IgxLayoutModule,
         IgxRippleModule,
         App
+      ],
+      providers: [
+        ...provideAuthentication()
       ]
     }).compileComponents();
   });

packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/auth.guard.spec.ts

@@ -3,6 +3,9 @@ import { AuthGuard } from './auth.guard';
 describe('AuthGuard', () => {
   let mockRouter: any;
   let mockUserService: any;
+
+  afterEach(() => { vi.restoreAllMocks(); });
+
   beforeEach(() => {
     mockRouter = {
       navigate: () => { }
@@ -19,14 +22,14 @@ describe('AuthGuard', () => {
 
   it(`Should properly call 'canActivate'`, () => {
     const authGuard = new AuthGuard(mockRouter, mockUserService);
-    const mockSpy = jasmine.createSpy('mockSpy');
+    const mockSpy = vi.fn();
     expect(authGuard.canActivate(mockSpy as any, mockSpy as any)).toEqual(true);
   });
   it(`Should properly call 'canActivate'`, () => {
     const authGuard = new AuthGuard(mockRouter, mockUserService);
-    const mockSpy = jasmine.createSpy('mockSpy');
+    const mockSpy = vi.fn();
     mockUserService.currentUser = false;
-    spyOn(mockRouter, 'navigate');
+    vi.spyOn(mockRouter, 'navigate');
     expect(authGuard.canActivate(mockSpy as any, { url: 'test' } as any)).toEqual(false);
     expect(mockRouter.navigate).toHaveBeenCalled();
     expect(mockRouter.navigate).toHaveBeenCalledWith([''], { queryParams: { returnUrl: 'test' } });

packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/index.ts

@@ -1,9 +1,9 @@
 export * from './auth.guard';
-export * from './authentication-routing-module';
-export * from './authentication-module';
 export * from './models/login';
 export * from './models/register-info';
 export * from './models/user';
+export * from './oidc-configs';
+export * from './provide-authentication';
 export * from './services/authentication';
 export * from './services/external-auth';
 export * from './services/user-store';

packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/login-bar/login-bar.html

@@ -4,7 +4,7 @@
 <button class="login-button" *ngIf="userStore.currentUser" igxRipple="white" igxButton="flat" igxButtonBackground="c"
   igxButtonColor="white" [igxToggleAction]="options">
   <igx-avatar [initials]="userStore.initials ?? ''" [src]="userStore.currentUser.picture ?? ''"
-    [roundShape]="true" size="small" bgColor="white">
+    shape="circle" size="small" bgColor="white">
   </igx-avatar>
   <igx-icon>keyboard_arrow_down</igx-icon>
 </button>

packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/login-bar/login-bar.spec.ts

@@ -4,7 +4,6 @@ import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
-import { AuthModule } from 'angular-auth-oidc-client';
 import {
   IgxAvatarComponent,
   IgxAvatarModule,
@@ -18,6 +17,7 @@ import {
 import { LoginDialog } from '../login-dialog/login-dialog';
 import { ExternalAuth } from '../services/external-auth';
 import { UserStore } from '../services/user-store';
+import { provideAuthentication } from '../provide-authentication';
 import { LoginBar } from './login-bar';
 
 @Component({
@@ -33,7 +33,7 @@ import { LoginBar } from './login-bar';
 	  IgxToggleModule]
 })
 class TestLoginDialog extends LoginDialog {
-  open() { }
+  override open() { }
 }
 
 describe('LoginBar', () => {
@@ -47,14 +47,16 @@ describe('LoginBar', () => {
 
   class MockExternalAuth {
     logout() { }
+    hasProvider() { }
   }
 
+  afterEach(() => { vi.restoreAllMocks(); });
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
         RouterTestingModule,
         NoopAnimationsModule,
-        AuthModule,
         IgxAvatarModule,
         IgxButtonModule,
         IgxDialogModule,
@@ -66,6 +68,7 @@ describe('LoginBar', () => {
 		TestLoginDialog
       ],
       providers: [
+        ...provideAuthentication(),
         { provide: UserStore, useClass: TestUserServSpy },
         { provide: ExternalAuth, useClass: MockExternalAuth }
       ]
@@ -85,15 +88,15 @@ describe('LoginBar', () => {
 
   it('should switch between buttons based on logged user ', () => {
     let buttons = fixture.debugElement.queryAll(By.css('button'));
-    expect(buttons.length).toBe(1);
+    expect(buttons.length).toBe(2);
     expect(buttons[0].nativeElement.innerText).toBe('Log In');
     const userStore = TestBed.inject(UserStore);
-    spyOnProperty(userStore, 'currentUser', 'get').and.returnValue({
+    vi.spyOn(userStore, 'currentUser', 'get').mockReturnValue({
       picture: 'picture'
-    });
+    } as any);
     fixture.detectChanges();
     buttons = fixture.debugElement.queryAll(By.css('button'));
-    expect(buttons.length).toBe(1);
+    expect(buttons.length).toBe(2);
     expect(buttons[0].nativeElement.children.length).toEqual(2);
     const avatar: IgxAvatarComponent = fixture.debugElement.query(By.css('igx-avatar')).componentInstance;
     expect(avatar.src).toBe('picture');
@@ -104,16 +107,16 @@ describe('LoginBar', () => {
     component.loginDialog = new TestLoginDialog();
 
     const button = fixture.debugElement.query(By.css('button'));
-    spyOn(component.loginDialog, 'open');
+    vi.spyOn(component.loginDialog, 'open');
     button.triggerEventHandler('click', {});
     expect(component.loginDialog.open).toHaveBeenCalled();
   });
 
   it('should open drop down on button click (logged in)', async () => {
     const userStore = TestBed.inject(UserStore);
-    spyOnProperty(userStore, 'currentUser', 'get').and.returnValue({
+    vi.spyOn(userStore, 'currentUser', 'get').mockReturnValue({
       picture: 'picture'
-    });
+    } as any);
     fixture.detectChanges();
 
     const button = fixture.debugElement.query(By.css('button'));
@@ -126,9 +129,9 @@ describe('LoginBar', () => {
     const userStore = TestBed.inject(UserStore);
     const externalAuth = TestBed.inject(ExternalAuth);
     const router: Router = TestBed.inject(Router);
-    spyOn(router, 'navigate');
-    spyOn(userStore, 'clearCurrentUser');
-    spyOn(externalAuth, 'logout');
+    vi.spyOn(router, 'navigate');
+    vi.spyOn(userStore, 'clearCurrentUser');
+    vi.spyOn(externalAuth, 'logout');
 
     component.igxDropDown.open();
     component.igxDropDown.setSelectedItem(0);