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

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

@@ -1,15 +1,19 @@
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
 import { ApplicationConfig, importProvidersFrom, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
 import { BrowserModule, HammerModule } from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { provideRouter } from '@angular/router';
+import { AuthModule } from 'angular-auth-oidc-client';
 import {
   IgxLayoutModule,
   IgxNavbarModule,
   IgxNavigationDrawerModule,
   IgxRippleModule,
 } from '<%=igxPackage%>';
 
-import { AuthenticationModule, ExternalAuthService } from './authentication';
+import { BackendProvider } from './authentication/services/fake-backend.service';
+import { JwtInterceptor } from './authentication/services/jwt.interceptor';
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
@@ -24,9 +28,12 @@ export const appConfig: ApplicationConfig = {
       IgxNavbarModule,
       IgxNavigationDrawerModule,
       IgxRippleModule,
-      AuthenticationModule
+      AuthModule.forRoot({ config: [] })
     ),
     provideAnimations(),
-    ExternalAuthService
+    provideHttpClient(withInterceptorsFromDi()),
+    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
+    // TODO: DELETE THIS BEFORE PRODUCTION!
+    BackendProvider
   ]
 };

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

@@ -1,3 +1,13 @@
 import { Routes } from '@angular/router';
+import { AuthGuard } from './authentication/auth.guard';
+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.service';
 
-export const routes: Routes = [];
+export const 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 } }
+];

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

@@ -1,9 +1,11 @@
+import { importProvidersFrom } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
+import { provideHttpClient } from '@angular/common/http';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule } from '@angular/router';
+import { AuthModule } from 'angular-auth-oidc-client';
 import { IgxLayoutModule, IgxNavbarModule, IgxNavigationDrawerModule, IgxRippleModule } from 'igniteui-angular';
 import { App } from './app';
-import { AuthenticationModule } from './authentication';
 
 describe('App', () => {
   beforeEach(async () => {
@@ -12,11 +14,14 @@ describe('App', () => {
         NoopAnimationsModule,
         RouterModule.forRoot([]),
         IgxNavigationDrawerModule,
-        AuthenticationModule,
         IgxNavbarModule,
         IgxLayoutModule,
         IgxRippleModule,
         App
+      ],
+      providers: [
+        importProvidersFrom(AuthModule.forRoot({ config: [] })),
+        provideHttpClient()
       ]
     }).compileComponents();
   });

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

@@ -1,6 +1,4 @@
 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';

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="userService.currentUser" igxRipple="white" igxButton="flat" igxButtonBackground="c"
   igxButtonColor="white" [igxToggleAction]="options">
   <igx-avatar [initials]="userService.initials ?? ''" [src]="userService.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,6 +4,8 @@ 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 { importProvidersFrom } from '@angular/core';
+import { provideHttpClient } from '@angular/common/http';
 import { AuthModule } from 'angular-auth-oidc-client';
 import {
   IgxAvatarComponent,
@@ -54,7 +56,6 @@ describe('LoginBar', () => {
       imports: [
         RouterTestingModule,
         NoopAnimationsModule,
-        AuthModule,
         IgxAvatarModule,
         IgxButtonModule,
         IgxDialogModule,
@@ -66,6 +67,8 @@ describe('LoginBar', () => {
 		TestLoginDialog
       ],
       providers: [
+        importProvidersFrom(AuthModule.forRoot({ config: [] })),
+        provideHttpClient(),
         { provide: UserService, useClass: TestUserServSpy },
         { provide: ExternalAuthService, useClass: TestAuthService }
       ]

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

@@ -1,7 +1,6 @@
 import { ExternalLogin } from '../models/login';
 
 export interface AuthProvider {
-  config(): void;
   login(): void;
   getUserInfo(): Promise<ExternalLogin>;
   logout(): void;

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

@@ -1,71 +1,34 @@
-import {
-  AuthWellKnownEndpoints,
-  OidcConfigService,
-  OidcSecurityService,
-  OpenIDImplicitFlowConfiguration
-} from 'angular-auth-oidc-client';
-import { take } from 'rxjs/operators';
+import { OidcSecurityService } from 'angular-auth-oidc-client';
+import { firstValueFrom } from 'rxjs';
 import { ExternalLogin } from '../models/login';
 import { ExternalAuthConfig } from '../services/external-auth-configs';
 import { AuthProvider } from './auth-provider';
 
 /** Base provider for OpenID Connect (OIDC) https://openid.net/connect/ */
 export abstract class BaseOidcProvider implements AuthProvider {
   constructor(
-    protected oidcConfigService: OidcConfigService,
     protected oidcSecurityService: OidcSecurityService,
     protected externalStsConfig: ExternalAuthConfig) { }
 
-  public config() {
-    const openIDImplicitFlowConfiguration = new OpenIDImplicitFlowConfiguration();
-    openIDImplicitFlowConfiguration.stsServer = this.externalStsConfig.stsServer;
-    openIDImplicitFlowConfiguration.redirect_url = this.externalStsConfig.redirect_url;
-    openIDImplicitFlowConfiguration.client_id = this.externalStsConfig.client_id;
-    openIDImplicitFlowConfiguration.response_type = this.externalStsConfig.response_type;
-    openIDImplicitFlowConfiguration.scope = this.externalStsConfig.scope;
-    openIDImplicitFlowConfiguration.post_logout_redirect_uri = this.externalStsConfig.redirect_url;
-    openIDImplicitFlowConfiguration.post_login_route = this.externalStsConfig.post_login_route;
-    openIDImplicitFlowConfiguration.auto_userinfo = this.externalStsConfig.auto_userinfo;
-    openIDImplicitFlowConfiguration.max_id_token_iat_offset_allowed_in_seconds =
-      this.externalStsConfig.max_id_token_iat_offset_allowed_in_seconds;
-
-    const authWellKnownEndpoints = new AuthWellKnownEndpoints();
-    authWellKnownEndpoints.setWellKnownEndpoints(this.oidcConfigService.wellKnownEndpoints);
-    this.oidcSecurityService.setupModule(openIDImplicitFlowConfiguration, authWellKnownEndpoints);
-  }
-
   public login() {
-    this.oidcConfigService.onConfigurationLoaded.pipe(take(1)).subscribe(() => {
-      this.config();
-      this.oidcSecurityService.authorize();
-    });
-    this.oidcConfigService.load_using_stsServer(this.externalStsConfig.stsServer);
+    this.oidcSecurityService.authorize(this.externalStsConfig.configId);
   }
 
-  public getUserInfo(): Promise<ExternalLogin> {
-    let resolve: (val: ExternalLogin) => void;
-    let reject: () => void;
-    const user = new Promise<ExternalLogin>((res, rej) => {
-      resolve = res;
-      reject = rej;
-    });
-    this.oidcConfigService.onConfigurationLoaded.pipe(take(1)).subscribe(() => {
-      this.config();
-      this.oidcSecurityService.onAuthorizationResult.subscribe(() => {
-        this.oidcSecurityService.getUserData().subscribe(userData => {
-          resolve(this.formatUserData(userData));
-        });
-      });
-      this.oidcSecurityService.authorizedImplicitFlowCallback();
-    });
-    this.oidcConfigService.load_using_stsServer(this.externalStsConfig.stsServer);
-    return user;
+  public async getUserInfo(): Promise<ExternalLogin> {
+    const result = await firstValueFrom(this.oidcSecurityService.userData$);
+    const configData = result.allUserData?.find(
+      d => d.configId === this.externalStsConfig.configId
+    );
+    if (configData?.userData) {
+      return this.formatUserData(configData.userData);
+    }
+    return Promise.reject(null);
   }
 
   public logout() {
-    this.oidcSecurityService.logoff();
+    this.oidcSecurityService.logoff(this.externalStsConfig.configId);
   }
 
   /** Format received user data per provider claims */
-  protected abstract formatUserData(userData: { [key: string]: any; }): ExternalLogin;
+  protected abstract formatUserData(userData: { [key: string]: any; }): Promise<ExternalLogin>;
 }

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

@@ -27,13 +27,13 @@ export class FacebookProvider implements AuthProvider {
           '/me?fields=id,email,name,first_name,last_name,picture',
           (newResponse: { [key: string]: any; }) => {
             this.user = {
-              id: newResponse.id,
-              name: newResponse.name,
-              given_name: newResponse.first_name,
-              family_name: newResponse.last_name,
-              email: newResponse.email,
-              picture: newResponse.picture,
-              externalToken: FB.getAuthResponse()[accessToken]
+              id: newResponse['id'],
+              name: newResponse['name'],
+              given_name: newResponse['first_name'],
+              family_name: newResponse['last_name'],
+              email: newResponse['email'],
+              picture: newResponse['picture'],
+              externalToken: FB.getAuthResponse()?.[accessToken] ?? ''
             };
             this.router.navigate([this.externalStsConfig.redirect_url]);
           });