I am considerably new to Oauth2 paradigm. I am using Angular 14 with Keycloak Identity Server with angular-oauth2-oidc dependency and Auth Code flow grant. I am able to successfully login and getting Auth code back as well, but somehow my application is not making Access Token request to Keycloak. I have gone through few posts on Stack Overflow, Medium and see a few videos on Youtube as well to no avail. I have followed npm angular-oauth2-oidc documentation. See below code snippets:

auth.config.ts

import { AuthConfig } from "angular-oauth2-oidc";

export const oauthConfig:AuthConfig = {
    issuer:'http://localhost:8080/realms/personal-account-manager',
    redirectUri:'http://localhost:4200/user-home',
    // redirectUri:window.location.origin,
    clientId:'personal-account-manager-pkce-client',
    // strictDiscoveryDocumentValidation:false,
    scope:'openid profile',
    responseType:'code',
    showDebugInformation:true,
    tokenEndpoint:'http://localhost:8080/realms/personal-account-manager/protocol/openid-connect/token'
}

auth.guard.ts

import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { OAuthService } from 'angular-oauth2-oidc';

export const authGuard: CanActivateFn = (route, state) => {
  const oauthService:OAuthService = inject(OAuthService);
  const router:Router = inject(Router);
  console.log('auth guard called');
  console.log(oauthService);
  if(oauthService.hasValidAccessToken() && oauthService.hasValidIdToken()){
    router.navigate(['/user-home']);
    return true;
  } else {
    console.log('no token');
    router.navigate(['/login']);
    return false;
  }
};

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { authGuard } from './auth.guard';
import { LoginComponent } from './login/login.component';
import { UserHomeComponent } from './user-home/user-home.component';

const routes: Routes = [
  { path: '', redirectTo: 'user-home', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  {
    path: 'user-home',
    component: UserHomeComponent,
    canActivate: [authGuard],
  },
  { path: '**', redirectTo: 'user-home', pathMatch: 'full' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'XYZ';

  constructor(private oauthService:OAuthService){
    this.configureAuthService();
  }

  ngOnInit(): void {
    
  }

  configureAuthService(){
    console.log('configuring oauth2');
    this.oauthService.configure(oauthConfig);
    // this.oauthService.tokenValidationHandler = new JwksValidationHandler();
    this.oauthService.loadDiscoveryDocumentAndTryLogin();
  
  }
}

app.component.html

<router-outlet></router-outlet>

login.component.ts

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrl: './login.component.css',
})
export class LoginComponent implements OnInit {
  constructor(private oauthService: OAuthService) {}

  ngOnInit(): void {}

  onLogin() {
    console.log('logging in...');
    this.oauthService.initCodeFlow();
  }
}

login.component.html

<button mat-raised-button (click)="onLogin()">Login</button>

user-home.component.ts

@Component({
  selector: 'app-user-home',
  templateUrl: './user-home.component.html',
  styleUrl: './user-home.component.css'
})
export class UserHomeComponent implements OnInit{
  constructor(private oauthService:OAuthService){}
  ngOnInit(): void {
    console.log('In user-home');
    console.log(this.oauthService.getIdentityClaims());
    
  }
}

user-home.component.html

<p>user-home works!</p>

The issue is I am never redirected to UserHomeComponent. I keep getting redirection to /login path, which is clearly happening as auth-guard doesn’t get token.
Any help is appreciated!