JWT Token Generation Differences: Functional via Postman but Not Through Angular Front-End

Question

Context: I am developing a web application using Angular with a backend service integration. For authentication, I am using JWT tokens. Interestingly, tokens generated via Postman work correctly, but those generated by the Angular front-end fail during authentication.

Implementation Details: I use Angular for the user interface and make calls to the backend service. JWT tokens are generated from the Angular front-end, and I have also tested token generation via Postman for comparison purposes.

Problem: JWT tokens generated through Postman authenticate successfully, whereas those generated by the Angular front-end result in authentication failure. Both tokens appear to have similar structures, but something in the token generated by Angular is preventing successful authentication.

Questions: What could be causing this difference in the behavior of JWT tokens generated by Angular compared to those generated by Postman?

Is there any specific configuration in Angular that might be affecting the JWT token generation incorrectly? How can I debug and identify the root cause for the authentication failure of the tokens generated by the front-end?

Relevant Code:

enter image description here

// Azure AD
import {
  MsalModule,
  MsalService,
  MSAL_INSTANCE,
  MsalGuard,
  MsalInterceptorConfiguration,
  MSAL_INTERCEPTOR_CONFIG,
  MsalBroadcastService,
  MsalGuardConfiguration,
  MsalRedirectComponent,
  MSAL_GUARD_CONFIG,
} from '@azure/msal-angular';
import { InteractionType, PublicClientApplication } from '@azure/msal-browser';
 
const isIE =
  window.navigator.userAgent.indexOf('MSIE ') > -1 ||
  window.navigator.userAgent.indexOf('Trident/') > -1;
 
export function MSALInstanceFactory(): PublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: '(ui-client-id)',
      authority:
        'https://login.microsoftonline.com/(my-tenant-id)',
      redirectUri: 'http://localhost:4200',
    },
    cache: {
      cacheLocation: 'localStorage',
      storeAuthStateInCookie: isIE,
    },
  });
}
 
export function MSALGuardConfigFactory(): MsalGuardConfiguration {
  return {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: ['api://(api-client-id)', 'User.Read'],
      authority:
        'https://login.microsoftonline.com/(my-tenant-id)',
    },
  };
}
 
export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
 
  protectedResourceMap.set('http://localhost:5004', [
    'api://(api-client-id)/client',
  ]);
 
  protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', [
    'User.Read',
  ]);
 
  return {
    interactionType: InteractionType.Popup,
    protectedResourceMap,
  };
}
 
@NgModule({
  declarations: [
   [my-declarations]
  ],
  imports: [
    MsalModule.forRoot(
      MSALInstanceFactory(),
      {
        interactionType: InteractionType.Popup,
        authRequest: {
          scopes: ['api://(api-client-id)', 'User.Read'],
          authority:
            'https://login.microsoftonline.com/(my-tenant-id)',
        },
      },
      MSALInterceptorConfigFactory(),
    ),
    [...]
  ],
  providers: [
    httpInterceptorProviders,
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALInstanceFactory,
    },
    {
      provide: MSAL_INTERCEPTOR_CONFIG,
      useFactory: MSALInterceptorConfigFactory,
    },
    {
      provide: MSAL_GUARD_CONFIG,
      useFactory: MSALGuardConfigFactory,
    },
    MsalService,
    MsalGuard,
    MsalBroadcastService,
  ],
  bootstrap: [AppComponent, MsalRedirectComponent],
})
export class AppModule {}

OBS: My Back-End is in C#, but as it is able to authenticate with the token generated by Postman, I don't think it's relevant to put it here