MsalInterceptor do not set IdToken to Authorization header when I pass 'openid' scope

Core Library

MSAL.js v2 (@azure/msal-browser)

Core Library Version

2.14.1

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

2.0.0-beta.0

Description

As you mention in this comment I just need to set openid scope to intercept IdToken But it’s not working. Maybe I don’t understand something. Can you help my with this ?

Error Message

No response

Msal Logs

No response

MSAL Configuration

auth: {
        clientId: '440c91c9-8c58-42b0-b88f-f3284c583859',
        authority: `https://login.microsoftonline.com/${tenantId}/`,
        redirectUri: `${url}/ui-signin-oidc`,
        postLogoutRedirectUri: `${url}/`,
    },

Relevant Code Snippets

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { environment } from '@app/env';
import { IconModule } from '@shared/icon';

import { DxLoadIndicatorModule } from 'devextreme-angular/ui/load-indicator';

import { AccessDeniedPageComponent } from './403/access-denied.page';
import { AuthGuard } from './auth.guard';
import { AuthInterceptor } from './auth.interceptor';
import { AuthService } from './auth.service';

import {
    MsalGuardConfiguration,
    MsalInterceptor,
    MsalInterceptorConfiguration,
    MsalModule,
    MsalService,
    MSAL_GUARD_CONFIG,
    MSAL_INSTANCE,
    MSAL_INTERCEPTOR_CONFIG,
} from '@azure/msal-angular';
import { BrowserCacheLocation, InteractionType, IPublicClientApplication, PublicClientApplication } from '@azure/msal-browser';
import { CodeInputModule } from 'angular-code-input';
import { CountdownModule } from 'ngx-countdown';

function MsalInstanceFactory(): IPublicClientApplication {
    return new PublicClientApplication({
        auth: {
            clientId: environment.auth.clientId,
            authority: environment.auth.authority,
            knownAuthorities: [environment.auth.authority],
            redirectUri: environment.auth.redirectUri,
            postLogoutRedirectUri: environment.auth.postLogoutRedirectUri,
            navigateToLoginRequestUrl: true,
        },
        cache: {
            cacheLocation: BrowserCacheLocation.LocalStorage,
            storeAuthStateInCookie: true,
        },
    });
}

function MSALGuardConfigFactory(): MsalGuardConfiguration {
    return {
        interactionType: InteractionType.Redirect,
    };
}

function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
    const protectedResourceMap = new Map<string, Array<string>>();
    // example how to use protected map in case we adapt backend to use access tokens
    protectedResourceMap.set('/api/*', ['openid']);

    return {
        interactionType: InteractionType.Redirect,
        protectedResourceMap,
    };
}

@NgModule({
    imports: [
        DxLoadIndicatorModule,
        MsalModule,
        CountdownModule,
        CodeInputModule,
        IconModule,
        RouterModule.forChild([
            {
                path: 'access-denied',
                component: AccessDeniedPageComponent,
            },
        ]),
    ],
    declarations: [AccessDeniedPageComponent],
    providers: [
        AuthService,
        AuthGuard,
        {
            provide: HTTP_INTERCEPTORS,
            useClass: MsalInterceptor,
            multi: true,
        },
        {
            provide: MSAL_INSTANCE,
            useFactory: MsalInstanceFactory,
        },
        {
            provide: MSAL_GUARD_CONFIG,
            useFactory: MSALGuardConfigFactory,
        },
        {
            provide: MSAL_INTERCEPTOR_CONFIG,
            useFactory: MSALInterceptorConfigFactory,
        },
        MsalService,
    ],
})
export class AuthModule {}

Reproduction Steps

1. Configure app by this tutorial
2. Set openid scope to protected resource map(protectedResourceMap.set('/api/*', ['openid']);)
3. Try to get IdToken in Authorization header

Expected Behavior

If I set ‘openid’ scope, the MsalInterceptor will set IdToken to Authorization header

Identity Provider

Azure AD / MSA

Browsers Affected (Select all that apply)

Chrome, Firefox

Regression

No response

Source

Internal (Microsoft)

[tnorling]

@var1ap-WA That should support access tokens. The openid scope will return an access token for MS Graph so audience validation in your middleware will fail. Without more information about what exactly is failing that would be my first guess as to why it’s not working with your current config. You should create a custom scope for your API on your app registration and then request this new scope instead of openid. Try that out and let me know how it goes.

[tnorling]

@var1ap-WA This would be something you have to configure in your middleware. I’d suggest reaching out to the folks who maintain that to get some guidance on the correct configuration.