I am working on an Angular 19 project and am integrating @azure/msal-angular v4. I added the configuration from this standalone reference and this b2c reference and added the MsalGuard to my route. When I navigate to the route, if I'm not signed in it correctly redirects me to my signInSignUp user-flow, then redirects to the component which loads after I logIn.

My problem is that my auth interceptor isn't working. I set it up like the example, but I'm getting a few weird things logged in the console when I try to submit and api request.

 @azure/[email protected] : Info - CacheManager:getIdToken - Returning ID token
 [Thu, 13 Mar 2025 22:43:15 GMT] : [] : @azure/[email protected] : Info - Interceptor - 2 scopes found for endpoint
 [Thu, 13 Mar 2025 22:43:16 GMT] : [] : @azure/[email protected] : Info - CacheManager:getAccessToken - No token found
 [Thu, 13 Mar 2025 22:43:16 GMT] : [019591ad-1c2c-7f22-94d0-90bee991f7f3] : @azure/[email protected] : Info - Token refresh is required due to cache outcome: 2
 [Thu, 13 Mar 2025 22:43:17 GMT] : [] : @azure/[email protected] : Info - CacheManager:getRefreshToken - returning refresh token
 [Thu, 13 Mar 2025 22:43:18 GMT] : [] : @azure/[email protected] : Error - Interceptor - acquireTokenSilent resolved with null access token. Known issue with B2C tenants, invoking interaction to resolve.
 [Thu, 13 Mar 2025 22:43:19 GMT] : [] : @azure/[email protected] : Info - CacheManager:getIdToken - Returning ID token

There are 2 other things of note. The api request is never logged in the network tab of devtools, and the page reloads. I tried creating a custom Interceptor that inherits from MsalInterceptor so I can look at the internals, and the interceptor executes but then prints out the log statements and reloads the page.

Here is the configuration for the MsalInterceptor:

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
  protectedResourceMap.set(
    'http://127.0.0.1:8000/*',
    ['user.read']
  );

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

When I change the url from 'http://127.0.0.1:8000/*' to something that excludes the endpoint I'm trying to hit, the call completes but without the bearer token in the header.

Here is the custom MsalInterceptor that I created and added to my providers in my app.conifg:

@Injectable()
export class CustomMsalInterceptor extends MsalInterceptor implements HttpInterceptor {
  override intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    console.log('request', request.headers)
    if (request.context.get(BYPASS_MSAL)) {
      return next.handle(request);
    }
    return super.intercept(request, next);
  }
}

I am working on an Angular 19 project and am integrating @azure/msal-angular v4. I added the configuration from this standalone reference and this b2c reference and added the MsalGuard to my route. When I navigate to the route, if I'm not signed in it correctly redirects me to my signInSignUp user-flow, then redirects to the component which loads after I logIn.

My problem is that my auth interceptor isn't working. I set it up like the example, but I'm getting a few weird things logged in the console when I try to submit and api request.

 @azure/[email protected] : Info - CacheManager:getIdToken - Returning ID token
 [Thu, 13 Mar 2025 22:43:15 GMT] : [] : @azure/[email protected] : Info - Interceptor - 2 scopes found for endpoint
 [Thu, 13 Mar 2025 22:43:16 GMT] : [] : @azure/[email protected] : Info - CacheManager:getAccessToken - No token found
 [Thu, 13 Mar 2025 22:43:16 GMT] : [019591ad-1c2c-7f22-94d0-90bee991f7f3] : @azure/[email protected] : Info - Token refresh is required due to cache outcome: 2
 [Thu, 13 Mar 2025 22:43:17 GMT] : [] : @azure/[email protected] : Info - CacheManager:getRefreshToken - returning refresh token
 [Thu, 13 Mar 2025 22:43:18 GMT] : [] : @azure/[email protected] : Error - Interceptor - acquireTokenSilent resolved with null access token. Known issue with B2C tenants, invoking interaction to resolve.
 [Thu, 13 Mar 2025 22:43:19 GMT] : [] : @azure/[email protected] : Info - CacheManager:getIdToken - Returning ID token

There are 2 other things of note. The api request is never logged in the network tab of devtools, and the page reloads. I tried creating a custom Interceptor that inherits from MsalInterceptor so I can look at the internals, and the interceptor executes but then prints out the log statements and reloads the page.

Here is the configuration for the MsalInterceptor:

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
  protectedResourceMap.set(
    'http://127.0.0.1:8000/*',
    ['user.read']
  );

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

When I change the url from 'http://127.0.0.1:8000/*' to something that excludes the endpoint I'm trying to hit, the call completes but without the bearer token in the header.

Here is the custom MsalInterceptor that I created and added to my providers in my app.conifg:

@Injectable()
export class CustomMsalInterceptor extends MsalInterceptor implements HttpInterceptor {
  override intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    console.log('request', request.headers)
    if (request.context.get(BYPASS_MSAL)) {
      return next.handle(request);
    }
    return super.intercept(request, next);
  }
}

• angular
• msal.js
• msal-angular

Share Improve this question Follow asked Mar 14 at 0:40 afriedman111afriedman111 2,37955 gold badges2929 silver badges5555 bronze badges 1

• Are you sure your interceptor config is correct? Rather I am looking at the scope, is it correct? I'm not familiar with B2C part, so can't say much, but by my understanding you should be providing your actual API scope from Azure B2C? – AVJT82 Commented Mar 14 at 14:16

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I ran into the same problem. Here is what I did to resolve it:

1st, Make sure you are allowing access tokens:

2nd, Make sure you are giving the app the right scope permissions. In my case i'm giving apiaccess

After you make the changes, I've found that Azure Entra and B2C take a while for changes to propagate so give it a try in a few minutes. Hope that helps!