Merge pull request #79 from damienbod/copilot/fix-angular-login-issue

Fix Angular 21 login by adding APP_INITIALIZER for OIDC authentication

Author: damienbod

AngularCliCodeFlowPkce/src/app/app.component.ts

@@ -22,8 +22,8 @@ export class AppComponent implements OnInit {
     ngOnInit(): void {
         this.userData$ = this.oidcSecurityService.userData$;
 
-        this.oidcSecurityService.checkAuth().subscribe((isAuthenticated: any) => {
-          this.isAuthenticated = isAuthenticated;
+        this.oidcSecurityService.isAuthenticated$.subscribe((isAuthenticated) => {
+          this.isAuthenticated = isAuthenticated.isAuthenticated;
           console.log('app authenticated', isAuthenticated);
         });
     }

AngularCliCodeFlowPkce/src/app/app.module.ts

@@ -8,7 +8,12 @@ import { DataEventRecordsModule } from './dataeventrecords/dataeventrecords.modu
 import { ForbiddenComponent } from './forbidden/forbidden.component';
 import { HomeComponent } from './home/home.component';
 import { UnauthorizedComponent } from './unauthorized/unauthorized.component';
-import { AuthModule, LogLevel } from 'angular-auth-oidc-client';
+import { AuthModule, LogLevel, OidcSecurityService } from 'angular-auth-oidc-client';
+import { firstValueFrom } from 'rxjs';
+
+export function configureAuth(oidcSecurityService: OidcSecurityService) {
+  return () => firstValueFrom(oidcSecurityService.checkAuth());
+}
 
 @NgModule({ declarations: [
         AppComponent,
@@ -33,7 +38,15 @@ import { AuthModule, LogLevel } from 'angular-auth-oidc-client';
                 useRefreshToken: true,
                 logLevel: LogLevel.Debug,
             },
-        })], providers: [provideHttpClient(withInterceptorsFromDi())] })
+        })], providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        {
+            provide: APP_INITIALIZER,
+            useFactory: configureAuth,
+            deps: [OidcSecurityService],
+            multi: true,
+        }
+    ] })
 
 export class AppModule {
   constructor() {

AngularCliCodeFlowPkce/src/app/dataeventrecords/components/dataeventrecords-create.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
 import { OidcSecurityService, ConfigAuthenticatedResult, AuthenticatedResult } from 'angular-auth-oidc-client';
 
 import { DataEventRecordsService } from '../dataeventrecords.service';
@@ -31,10 +30,9 @@ export class DataEventRecordsCreateComponent implements OnInit {
     }
 
     ngOnInit() {
-        this.isAuthenticated$.pipe(
-            map((isAuthenticated: any) => {
-                console.log('isAuthorized: ' + isAuthenticated);
-            }));
+        this.isAuthenticated$.subscribe((isAuthenticated: AuthenticatedResult) => {
+            console.log('isAuthorized: ' + isAuthenticated.isAuthenticated);
+        });
 
         this.DataEventRecord = { id: 0, name: '', description: '', timestamp: '' };
     }

AngularCliCodeFlowPkce/src/app/dataeventrecords/components/dataeventrecords-edit.component.ts

@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
 import { Router, ActivatedRoute } from '@angular/router';
 import { OidcSecurityService, AuthenticatedResult } from 'angular-auth-oidc-client';
 
@@ -37,10 +36,9 @@ export class DataEventRecordsEditComponent implements OnInit   {
     }
 
     ngOnInit() {
-        this.isAuthenticated$.pipe(
-            map((isAuthenticated: any) => {
-                console.log('isAuthorized: ' + isAuthenticated);
-            }));
+        this.isAuthenticated$.subscribe((isAuthenticated: AuthenticatedResult) => {
+            console.log('isAuthorized: ' + isAuthenticated.isAuthenticated);
+        });
 
         this._route.params.subscribe((params:any) => {
             const id = +params['id']; // (+) converts string 'id' to a number

AngularCliCodeFlowPkce/src/app/dataeventrecords/components/dataeventrecords-list.component.ts

@@ -30,7 +30,7 @@ export class DataEventRecordsListComponent implements OnInit {
 
     ngOnInit() {
         this.isAuthenticated$.pipe(
-            switchMap((isAuthenticated: any) => this.getData(isAuthenticated))
+            switchMap((isAuthenticated: AuthenticatedResult) => this.getData(isAuthenticated.isAuthenticated))
         ).subscribe(
             (data: any) => this.DataEventRecords = data,
             () => console.log('getData Get all completed')