start changing auth library

backend/src/main/java/ch/puzzle/okr/ForwardFilter.java

@@ -16,7 +16,7 @@
 public class ForwardFilter extends GenericFilterBean {
 
     private static final Logger logger = LoggerFactory.getLogger(ForwardFilter.class);
-    private final String[] allowedRoutes = { "/keyresult", "/objective", "/?state" };
+    private final String[] allowedRoutes = { "/keyresult", "/objective", "/callback", "/dashboard" };
 
     @Override
     public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)

frontend/package.json

@@ -35,7 +35,7 @@
     "@angular/router": "^17.0.6",
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^8.0.0",
-    "angular-oauth2-oidc": "^17.0.0",
+    "angular-auth-oidc-client": "^18.0.1",
     "bootstrap": "^5.3.2",
     "moment": "^2.30.1",
     "ngx-toastr": "^18.0.0",

frontend/src/app/app-routing.module.ts

@@ -4,6 +4,8 @@ import { OverviewComponent } from './overview/overview.component';
 import { EMPTY, of } from 'rxjs';
 import { SidepanelComponent } from './shared/custom/sidepanel/sidepanel.component';
 import { authGuard } from './shared/guards/auth.guard';
+import { AutoLoginPartialRoutesGuard } from 'angular-auth-oidc-client';
+import { CallbackComponent } from './callback/callback.component';
 
 /**
  * Resolver for get the id from url like `/objective/42` or `/keyresult/42`.
@@ -36,8 +38,9 @@ const routes: Routes = [
         data: { type: 'KeyResult' },
       },
     ],
-    canActivate: [authGuard],
+    canActivate: [AutoLoginPartialRoutesGuard],
   },
+  { path: 'callback', component: CallbackComponent },
   { path: '**', redirectTo: '', pathMatch: 'full' },
 ];
 

frontend/src/app/app.component.spec.ts

@@ -3,7 +3,6 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { TranslateTestingModule } from 'ngx-translate-testing';
-import { AuthConfig, OAuthModule, OAuthService } from 'angular-oauth2-oidc';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 // @ts-ignore
 import * as de from '../assets/i18n/de.json';
@@ -16,9 +15,10 @@ import { of } from 'rxjs';
 import { OverviewComponent } from './overview/overview.component';
 import { ObjectiveDetailComponent } from './objective-detail/objective-detail.component';
 import { CommonModule } from '@angular/common';
+import { OpenIdConfiguration } from 'angular-auth-oidc-client';
 
 const oauthServiceMock = {
-  configure(environment: AuthConfig): void {},
+  configure(environment: OpenIdConfiguration): void {},
   initCodeFlow(): void {},
   setupAutomaticSilentRefresh(): void {},
   hasValidAccessToken(): boolean {
@@ -57,12 +57,12 @@ describe('AppComponent', () => {
         TranslateTestingModule.withTranslations({
           de: de,
         }),
-        OAuthModule.forRoot(),
+        // OAuthModule.forRoot(),
         MatSidenavModule,
         NoopAnimationsModule,
         CommonModule,
       ],
-      providers: [{ provide: OAuthService, useValue: oauthServiceMock }],
+      // providers: [{ provide: OAuthService, useValue: oauthServiceMock }],
       declarations: [AppComponent, OverviewComponent],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     })

frontend/src/app/app.component.ts

@@ -1,9 +1,17 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { OidcSecurityService } from 'angular-auth-oidc-client';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AppComponent {}
+export class AppComponent implements OnInit {
+  constructor(private oidcSecurityService: OidcSecurityService) {}
+  ngOnInit(): void {
+    this.oidcSecurityService.checkAuth().subscribe(({ isAuthenticated, userData, accessToken, idToken, configId }) => {
+      console.log('callback authenticated', isAuthenticated);
+    });
+  }
+}

frontend/src/app/app.module.ts

@@ -20,14 +20,13 @@ import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-transla
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
 import { MomentDateAdapter } from '@angular/material-moment-adapter';
-import { OAuthModule, OAuthService, OAuthStorage } from 'angular-oauth2-oidc';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { A11yModule } from '@angular/cdk/a11y';
 import { ExampleDialogComponent } from './shared/dialog/example-dialog/example-dialog.component';
 import { MatRadioModule } from '@angular/material/radio';
 import { ConfigService } from './config.service';
-import { firstValueFrom } from 'rxjs';
+import { config, firstValueFrom, map } from 'rxjs';
 import { environment } from '../environments/environment';
 import { OauthInterceptor } from './shared/interceptors/oauth.interceptor';
 import { ApplicationTopBarComponent } from './application-top-bar/application-top-bar.component';
@@ -72,22 +71,29 @@ import { CdkDrag, CdkDragHandle, CdkDropList } from '@angular/cdk/drag-drop';
 import { TeamManagementComponent } from './shared/dialog/team-management/team-management.component';
 import { KeyresultDialogComponent } from './shared/dialog/keyresult-dialog/keyresult-dialog.component';
 import { CustomizationService } from './shared/services/customization.service';
+import {
+  AuthModule,
+  DefaultLocalStorageService,
+  AbstractSecurityStorage,
+  StsConfigLoader,
+  StsConfigHttpLoader,
+  AuthInterceptor,
+} from 'angular-auth-oidc-client';
+import { CallbackComponent } from './callback/callback.component';
 
-function initOauthFactory(configService: ConfigService, oauthService: OAuthService) {
-  return async () => {
-    const config = await firstValueFrom(configService.config$);
-    oauthService.configure({ ...environment.oauth, issuer: config.issuer, clientId: config.clientId });
-  };
+function initOauthFactory(configService: ConfigService) {
+  const config$ = configService.config$.pipe(
+    map((config) => {
+      return { ...environment.oauth, authority: config.issuer, clientId: config.clientId };
+    }),
+  );
+  return new StsConfigHttpLoader(config$);
 }
 
 export function createTranslateLoader(http: HttpBackend) {
   return new TranslateHttpLoader(new HttpClient(http), './assets/i18n/', '.json');
 }
 
-export function storageFactory(): OAuthStorage {
-  return localStorage;
-}
-
 export const MY_FORMATS = {
   parse: {
     dateInput: 'LL',
@@ -134,12 +140,20 @@ export const MY_FORMATS = {
     ActionPlanComponent,
     TeamManagementComponent,
     KeyresultDialogComponent,
+    CallbackComponent,
   ],
   imports: [
     CommonModule,
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
+    AuthModule.forRoot({
+      loader: {
+        provide: StsConfigLoader,
+        useFactory: initOauthFactory,
+        deps: [ConfigService],
+      },
+    }),
     MatFormFieldModule,
     MatSelectModule,
     MatIconModule,
@@ -164,7 +178,6 @@ export const MY_FORMATS = {
         deps: [HttpBackend],
       },
     }),
-    OAuthModule.forRoot(),
     A11yModule,
     MatRadioModule,
     NgOptimizedImage,
@@ -189,10 +202,13 @@ export const MY_FORMATS = {
       deps: [MAT_DATE_LOCALE],
     },
     { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
-    { provide: HTTP_INTERCEPTORS, useClass: OauthInterceptor, multi: true },
-    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
-    { provide: OAuthStorage, useFactory: storageFactory },
-    { provide: APP_INITIALIZER, useFactory: initOauthFactory, deps: [ConfigService, OAuthService], multi: true },
+    // { provide: HTTP_INTERCEPTORS, useClass: OauthInterceptor, multi: true },
+    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
+    // { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
+    {
+      provide: AbstractSecurityStorage,
+      useClass: DefaultLocalStorageService,
+    },
     {
       provide: Router,
       useClass: CustomRouter,

frontend/src/app/application-top-bar/application-top-bar.component.spec.ts

@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ApplicationTopBarComponent } from './application-top-bar.component';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { DateTimeProvider, OAuthLogger, OAuthService, UrlHelperService } from 'angular-oauth2-oidc';
+// import { DateTimeProvider, OAuthLogger, OAuthService, UrlHelperService } from 'angular-oauth2-oidc';
 import { HttpClient, HttpHandler } from '@angular/common/http';
 import { MatMenuModule } from '@angular/material/menu';
 import { HarnessLoader } from '@angular/cdk/testing';
@@ -12,6 +12,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { of } from 'rxjs';
 import { team1 } from '../shared/testData';
+import { OidcSecurityService } from 'angular-auth-oidc-client';
 
 const oAuthMock = {
   getIdentityClaims: jest.fn(),
@@ -33,12 +34,12 @@ describe('ApplicationHeaderComponent', () => {
       imports: [MatMenuModule, NoopAnimationsModule, MatDialogModule],
       declarations: [ApplicationTopBarComponent],
       providers: [
-        { provide: OAuthService, useValue: oAuthMock },
+        { provide: OidcSecurityService, useValue: oAuthMock },
         { provide: HttpClient },
         { provide: HttpHandler },
-        { provide: UrlHelperService },
-        { provide: OAuthLogger },
-        { provide: DateTimeProvider },
+        // { provide: UrlHelperService },
+        // { provide: OAuthLogger },
+        // { provide: DateTimeProvider },
         {
           provide: MatDialog,
           useValue: dialogMock,

frontend/src/app/application-top-bar/application-top-bar.component.ts

@@ -1,5 +1,4 @@
 import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { OAuthService } from 'angular-oauth2-oidc';
 import { BehaviorSubject, ReplaySubject, Subscription } from 'rxjs';
 import { ConfigService } from '../config.service';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
@@ -8,6 +7,7 @@ import { TeamManagementComponent } from '../shared/dialog/team-management/team-m
 import { Router } from '@angular/router';
 import { RefreshDataService } from '../shared/services/refresh-data.service';
 import { isMobileDevice } from '../shared/common';
+import { OidcSecurityService } from 'angular-auth-oidc-client';
 
 @Component({
   selector: 'app-application-top-bar',
@@ -26,7 +26,7 @@ export class ApplicationTopBarComponent implements OnInit, OnDestroy {
   private subscription?: Subscription;
 
   constructor(
-    private oauthService: OAuthService,
+    private oauthService: OidcSecurityService,
     private configService: ConfigService,
     private dialog: MatDialog,
     private router: Router,
@@ -42,20 +42,20 @@ export class ApplicationTopBarComponent implements OnInit, OnDestroy {
       },
     });
 
-    if (this.oauthService.hasValidIdToken()) {
-      this.username.next(this.oauthService.getIdentityClaims()['name']);
-    }
+    // if (this.oauthService.isAuthenticated()) {
+    //   this.username.next(this.oauthService.getUserData()['name']);
+    // }
   }
 
   ngOnDestroy(): void {
     this.subscription?.unsubscribe();
   }
 
   logOut() {
-    const currentUrlTree = this.router.createUrlTree([], { queryParams: {} });
-    this.router.navigateByUrl(currentUrlTree).then(() => {
-      this.oauthService.logOut();
-    });
+    // const currentUrlTree = this.router.createUrlTree([], { queryParams: {} });
+    // this.router.navigateByUrl(currentUrlTree).then(() => {
+    this.oauthService.logoff();
+    // });
   }
 
   openTeamManagement() {

frontend/src/app/callback/callback.component.cy.ts

@@ -0,0 +1,7 @@
+import { CallbackComponent } from './callback.component';
+
+describe('CallbackComponent', () => {
+  it('should mount', () => {
+    cy.mount(CallbackComponent);
+  });
+});

frontend/src/app/callback/callback.component.html

@@ -0,0 +1 @@
+<p>callback works!</p>

frontend/src/app/callback/callback.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-callback',
+  templateUrl: './callback.component.html',
+  styleUrl: './callback.component.css',
+})
+export class CallbackComponent {}

frontend/src/app/overview/overview.component.spec.ts

@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { OverviewComponent } from './overview.component';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { overViewEntity1 } from '../shared/testData';
@@ -11,7 +10,6 @@ import { RefreshDataService } from '../shared/services/refresh-data.service';
 import { authGuard } from '../shared/guards/auth.guard';
 import { ApplicationBannerComponent } from '../application-banner/application-banner.component';
 import { ApplicationTopBarComponent } from '../application-top-bar/application-top-bar.component';
-import { DateTimeProvider, OAuthLogger, OAuthService, UrlHelperService } from 'angular-oauth2-oidc';
 import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
@@ -65,10 +63,10 @@ describe('OverviewComponent', () => {
           provide: MatDialogRef,
           useValue: {},
         },
-        OAuthService,
-        UrlHelperService,
-        OAuthLogger,
-        DateTimeProvider,
+        // OAuthService,
+        // UrlHelperService,
+        // OAuthLogger,
+        // DateTimeProvider,
       ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents();