fix(igx-ts): fix login

Author: Hristo313

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

@@ -58,8 +58,8 @@ export class App implements OnInit {
      * To register a social login, un-comment one or more of the following and add your service provider Client ID.
      * See https://github.com/IgniteUI/igniteui-cli/wiki/Angular-Authentication-Project-Template#add-a-third-party-social-provider
      */
-    // this.externalAuth.addGoogle('CLIENT_ID');
-    // this.externalAuth.addMicrosoft('CLIENT_ID');
+    // this.externalAuth.addGoogle();
+    // this.externalAuth.addMicrosoft();
     // this.externalAuth.addFacebook('CLIENT_ID');
   }
 

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

@@ -1,14 +1,25 @@
 import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-import { EnvironmentProviders, importProvidersFrom, Provider } from '@angular/core';
-import { AuthModule } from 'angular-auth-oidc-client';
+import { EnvironmentProviders, Provider } from '@angular/core';
+import { provideAuth } from 'angular-auth-oidc-client';
 
 import { BackendProvider } from './services/fake-backend';
 import { JwtInterceptor } from './services/jwt.interceptor';
 
 /** Provides all authentication-related dependencies (OIDC, JWT interceptor, fake backend). */
 export function provideAuthentication(): Array<Provider | EnvironmentProviders> {
   return [
-    importProvidersFrom(AuthModule.forRoot({ config: [] })),
+    provideAuth({
+      config: {
+        // authority: '<your OIDC authority URL>',
+        // redirectUrl: '<your redirect URL>',
+        // postLogoutRedirectUri: window.location.origin,
+        // clientId: '<your client ID>',
+        // scope: 'openid profile email offline_access',
+        // responseType: 'code',
+        // silentRenew: true,
+        // useRefreshToken: true
+      },
+    }),
     provideHttpClient(withInterceptorsFromDi()),
     { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
     // BackendProvider intercepts HTTP requests and simulates a REST API for development/testing.

packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/providers/base-oidc-provider.ts

@@ -10,7 +10,7 @@ export abstract class BaseOidcProvider implements AuthProvider {
     protected configId: string) { }
 
   public login() {
-    this.oidcSecurityService.authorize(this.configId);
+    this.oidcSecurityService.authorize();
   }
 
   public async getUserInfo(): Promise<ExternalLogin> {
@@ -25,7 +25,7 @@ export abstract class BaseOidcProvider implements AuthProvider {
   }
 
   public logout() {
-    this.oidcSecurityService.logoff(this.configId);
+    this.oidcSecurityService.logoff().subscribe();
   }
 
   /** Format received user data per provider claims */

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

@@ -42,10 +42,10 @@ export class ExternalAuth {
     return this.providers.size > 0;
   }
 
-  public addGoogle(clientID: string) {
+  public addGoogle() {
     this.providers.set(
       ExternalAuthProvider.Google,
-      new GoogleProvider(this.oidcSecurityService, clientID)
+      new GoogleProvider(this.oidcSecurityService, ExternalAuthProvider.Google)
     );
   }
 
@@ -61,10 +61,10 @@ export class ExternalAuth {
     );
   }
 
-  public addMicrosoft(clientID: string) {
+  public addMicrosoft() {
     this.providers.set(
       ExternalAuthProvider.Microsoft,
-      new MicrosoftProvider(this.oidcSecurityService, clientID)
+      new MicrosoftProvider(this.oidcSecurityService, ExternalAuthProvider.Microsoft)
     );
   }
 

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

@@ -109,7 +109,7 @@ describe('Services', () => {
 
     it(`Should properly call 'addGoogle'`, () => {
       const providersSpy = vi.spyOn((extAuthServ as any).providers, 'set');
-      extAuthServ.addGoogle('test');
+      extAuthServ.addGoogle();
       expect(providersSpy).toHaveBeenCalled();
       expect(providersSpy).toHaveBeenCalledWith('Google',
         new GoogleProvider(MOCK_OIDC_SECURITY, 'test'));
@@ -129,7 +129,7 @@ describe('Services', () => {
 
     it(`Should properly call 'addMicrosoft'`, () => {
       const providersSpy = vi.spyOn((extAuthServ as any).providers, 'set');
-      extAuthServ.addMicrosoft('test');
+      extAuthServ.addMicrosoft();
       expect(providersSpy).toHaveBeenCalled();
       expect(providersSpy).toHaveBeenCalledWith('Microsoft',
         new MicrosoftProvider(MOCK_OIDC_SECURITY, 'test'));