reactor(igx-ts,side-nav-auth): standalone and angular-auth-oidc-client v21 (#1554)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Hristo313 <57346540+Hristo313@users.noreply.github.com>
Co-authored-by: Hristo Hristov <HHristov@infragistics.com>
Co-authored-by: damyanpetev <3198469+damyanpetev@users.noreply.github.com>

Author: 3 people

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-module.ts

@@ -9,7 +9,7 @@ import {
   IgxRippleModule,
 } from '<%=igxPackage%>';
 
-import { AuthenticationModule, ExternalAuth } from './authentication';
+import { provideAuthentication } from './authentication';
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
@@ -24,9 +24,12 @@ export const appConfig: ApplicationConfig = {
       IgxNavbarModule,
       IgxNavigationDrawerModule,
       IgxRippleModule,
-      AuthenticationModule
     ),
     provideAnimations(),
-    ExternalAuth
+    provideAuthentication({
+      // google: { clientId: 'YOUR_GOOGLE_CLIENT_ID' },
+      // microsoft: { clientId: 'YOUR_MICROSOFT_CLIENT_ID', tenantId: 'YOUR_TENANT_ID' },
+      // facebook: { clientId: 'YOUR_FACEBOOK_CLIENT_ID' },
+    })
   ]
 };

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

@@ -1,3 +1,10 @@
 import { Routes } from '@angular/router';
+import { Home } from './home/home';
+import { AUTH_ROUTES } from './authentication';
+import { AUTH_BASE_PATH } from './authentication/services/external-auth-configs';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  { path: '', redirectTo: '/home', pathMatch: 'full' },
+  { path: 'home', component: Home, data: { text: 'Home' } },
+  { path: AUTH_BASE_PATH, children: AUTH_ROUTES }
+];

packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.routes.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/app.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/auth.guard.spec.ts

@@ -1,24 +1,13 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { Routes } from '@angular/router';
 import { AuthGuard } from './auth.guard';
 import { Profile } from './profile/profile';
 import { Redirect } from './redirect/redirect';
 import { ExternalAuthProvider } from './services/external-auth-configs';
 import { ExternalAuthRedirectUrl } from './services/external-auth';
 
-const authRoutes: Routes = [
+export const AUTH_ROUTES: Routes = [
   { 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 } }
 ];
-
-@NgModule({
-  imports: [
-    RouterModule.forChild(authRoutes)
-  ],
-  exports: [
-    RouterModule
-  ]
-})
-export class AuthenticationRoutingModule { }