Angular - Bearer token not sent in request header on API calls

Question

Since this turned out longer than expected here's a tl;dr:

My Angular application is not sending the bearer token it receives from Azure AD to the API and thus the API returns a 401 response. The setup is based on a blog post explanation for how to implement it. The sample application mentioned in the blog post works with my Azure AD setup and correctly provides the token on API calls.

Long version:

I'm working on a relatively simple Angular based front-end with a Spring Boot back-end. Front-end and back-end communicate via a REST API. The application is deployed on Azure Spring Cloud. For user Authentication the application requests and receives a bearer token from Azure AD. It should then transmit this token with each REST request to the API.

I followed this blog post to setup the necessary changes. Azure AD does deliver a valid JWT token.

My problem is, that the token is not passed on to the back-end in the REST calls and thus authentication fails and a 401 status is returned.

Here are the relevant configurations I made on the front-end side (based on the descriptions in the blog post linked):

app.module.ts

    @NgModule({
      imports: [
        ...
        HttpClientModule,
        OAuthModule.forRoot({
          resourceServer: {
            allowedUrls: ['http://localhost:8020/api', 'http://localhost:4200/api'], //environment.allowedUrls,
            sendAccessToken: true
          }
        })
    ...
      ],
      declarations: [AppComponent],
      providers: [{ provide: APP_BASE_HREF, useValue: environment.baseHref }],
      bootstrap: [AppComponent]
    })

auth.config.ts

    import { AuthConfig } from 'angular-oauth2-oidc';
    import {environment} from "../environments/environment";
    
    export const authConfig: AuthConfig = {
      issuer: 'https://login.microsoftonline.com/*****************61ea/v2.0',
      redirectUri: window.location.origin + environment.redirectURIPath,
      clientId: '*****************cf76',
      responseType: 'code',
      strictDiscoveryDocumentValidation: false,
      scope: 'openid api://*****************cf76/Rest.Api',
    }

Client and Tenant ID "blurred" out. But they are correct. Screenshot of the app overview on Azure (Tenant and Client ID)

app.component.ts

    export class AppComponent {

      constructor(private oauthService: OAuthService, private apiService: ApiService, private adapterService: AdapterService) {
        this.oauthService.configure(authConfig);
        this.oauthService.loadDiscoveryDocumentAndLogin();
        this.oauthService.setupAutomaticSilentRefresh();
    ...

I have cloned and setup the provided example from the blog post and configured it with the same Azure app (tenant and client ID etc.). There it works fine and I can see it sending my bearer token in the requests to the API

Screenshot of request header from request sent from the sample application I've noticed that the sample application sends two requests to the api with the first one providing the bearer token and the second one being a simple GET request. Two requests in the sample application

Meanwhile my application is only sending one request and that doesn't include the bearer token: Request header from own application without bearer token While the above screenshot returns a 200 that is because the locally run backend doesn't check for the token. But as you can see in the screenshot the token isn't transmitted. Here's another screenshot from a request run on the deployed application. Some more information due to the setup but the token is still not sent. Request header from own application (deployed version) without bearer token

Any ideas on what the issue could be?

user_4462253 · Answer

OP here. As it turns out the problem was caused because the "X-Frame-Options" response header was set to "DENY". This header if set to "DENY" blocks invisible frames from being opened. The implementation uses an iFrame for the silent redirect during the authentication process and this crucial part was blocked.

To solve the issue I changed it to "SAME ORIGIN" in the back-end configurations

        @Override
        protected void configure(HttpSecurity http) throws Exception {
        ...
        // global security configuration
        http.headers().frameOptions().sameOrigin().
        ...

Hope this helps anybody who may stumble upon this in the future, Cheers and thanks to those who helped, Leo

Angular - Bearer token not sent in request header on API calls

1 Answers