Angular single page application with angular-oauth2-oidc unable to get identity claims. How can I evaluate the token after the initCodeFlow method?

Question

I created a SPA angular application and trying to authenticate the api of a third party to be able to make requests. I encounter the problem, that the getIdentityClaims() method always return null.

get token(){
    this.claims = this.oauthService.getIdentityClaims();

    var accessToken = this.oauthService.getAccessToken();
    var idToken = this.oauthService.getIdToken();
    
    if(this.claims){
      console.log('-- home claims--', this.claims);
    }
    return this.claims ? this.claims : null;
  }

claims, accessToken and idToken are always null after a successful login.

How can I retrieve the IdToken?

And it is not a CORS problem I checked but I am not sure if I use the oauth-oidc library correctly.

I use the [email protected] ng module with angular 11.

After the successful login the application is redirected to the home component where the token should be evaluated.

This is what I get after a the login is completed:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { HttpClientModule } from '@angular/common/http';
import { OAuthModule } from 'angular-oauth2-oidc';
import { LoginComponent } from './login/login.component';
import { NavComponent } from './nav/nav.component';
import { ContactComponent } from './contact/contact.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    LoginComponent,
    NavComponent,
    ContactComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    OAuthModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { }

login.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { OAuthService } from 'angular-oauth2-oidc';
import { authCodeFlowConfig } from '../config/sso.config';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  claims;
  
  constructor(
    private oauthService:OAuthService,
    private router:Router) { }

  ngOnInit(): void {
    this.configSso();
  }

  async configSso(){
    this.oauthService.configure(authCodeFlowConfig);
    this.oauthService.loadDiscoveryDocumentAndTryLogin();
  }


  async login(){
    console.log('login');
    this.oauthService.setupAutomaticSilentRefresh();
    this.oauthService.initCodeFlow();
  }
  async logout(){
    console.log('logout');
    this.oauthService.logOut();
  }

  get token(){
    this.claims = this.oauthService.getIdentityClaims();
    if(this.claims){
      console.log('-- Login claims--', this.claims);
      this.router.navigateByUrl('home');
    }
    return this.claims ? this.claims : null;
  }
}

home.component.ts

import { Component, OnInit } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  claims;
  constructor(private oauthService:OAuthService) { }

  ngOnInit(): void {
  }

  get token(){
    this.claims = this.oauthService.getIdentityClaims();

    var accessToken = this.oauthService.getAccessToken();
    var idToken = this.oauthService.getIdToken();
    
    if(this.claims){
      console.log('-- home claims--', this.claims);
    }
    return this.claims ? this.claims : null;
  }
}