Angular 19 @azure/msal-angular v4 B2C standalone MsalInterceptor not working

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/msal-common@15.2.1 : Info - CacheManager:getIdToken - Returning ID token
[Thu, 13 Mar 2025 22:43:15 GMT] : [] : @azure/msal-angular@4.0.6 : Info - Interceptor - 2 scopes found for endpoint
[Thu, 13 Mar 2025 22:43:16 GMT] : [] : @azure/msal-common@15.2.1 : Info - CacheManager:getAccessToken - No token found
[Thu, 13 Mar 2025 22:43:16 GMT] : [019591ad-1c2c-7f22-94d0-90bee991f7f3] : @azure/msal-common@15.2.1 : Info - Token refresh is required due to cache outcome: 2
[Thu, 13 Mar 2025 22:43:17 GMT] : [] : @azure/msal-common@15.2.1 : Info - CacheManager:getRefreshToken - returning refresh token
[Thu, 13 Mar 2025 22:43:18 GMT] : [] : @azure/msal-angular@4.0.6 : 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/msal-common@15.2.1 : 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);
}
}

Continue reading...