[BUG] enableAutoRouteTracking breaks `angular-auth-oidc-client`

[xionglingfeng]

Description/Screenshot Before enabling enableAutoRouteTracking, _oidcSecurityService.authorize() will not send any AJAX request and directly redirect browser to the /authorize endpoint. Once enabled enableAutoRouteTracking, _oidcSecurityService.authorize() starts to send AJAX requests to /.well-known/*.

Steps to Reproduce

1. Set up applicationinsights-web as:

   config: {
       connectionString: environment.appInsights.connectionString,
       enableAutoRouteTracking: true,
       enableCorsCorrelation: true,
       enableRequestHeaderTracking: true,
       enableResponseHeaderTracking: true,
     }

2. Configure angular-auth-oidc-client as:

   @NgModule({
   imports: [AuthModule.forRoot({
       config: {
           authority: environment.authConfig.authority,
           redirectUrl: document.head.baseURI,
           clientId: environment.authConfig.clientId,
           scope: 'openid profile offline_access',
           responseType: 'code',
           silentRenew: true,
           useRefreshToken: true,
       }
     })],
   exports: [AuthModule],
   })
   export class AuthConfigModule {}

3. Call _oidcSecurityService.authorize()

   • OS/Browser: Any (tested on Firefox 111)
   • SDK Version [e.g. 22]: "@microsoft/applicationinsights-web": "3.0.0", "@microsoft/applicationinsights-angularplugin-js": "^3.0.2"
   • How you initialized the SDK: See above

Expected behavior Calling _oidcSecurityService.authorize() will not send any AJAX request. It directly redirect the browser to the configured /authorize endpoint.

Additional context Add any other context about the problem here.

[MSNev]

Well, that does seem strange.... Basically enableAutoRouteTracking really just hooks the history API for replaceState and pushState which when either of those events occur, on completion it sends it's own "internal" events named "replaceState", "locationchange" "pushState" with any defined "namePrefix" (from config) prefixed to the event name. (https://github.com/microsoft/ApplicationInsights-JS/blob/2847561dc627728bd20879b23ad212b5158c30d2/extensions/applicationinsights-analytics-js/src/JavaScriptSDK/AnalyticsPlugin.ts#L715-L821)

And on receipt of this "internal" event it will trigger a PageView event to get queued

So this "should" not be interfering with any other components.... unless

• They also listen to their own "internal" events which happen to clash with the ApplicationInsights ones (if you have not specified a namePrefix)

I'm struggling to think of any other reasons.

So the workaround for your scenario would be to specify a namePrefix to the configuration, this will also change the session cookie name and any local storage used, so any previous existing cookies / session storage will no longer get referenced.

Also note we have not released an ApplicationInsights v3.x compatible version of the angularplugin yet! And as such this combination has not been tested, which means that the AI v3 changes to support dynamic configuration may not completly work as expected as the angularplugin is not listening to any changes. There are also some changes around exported properties and some assumptions around the config object that have changed between AI v3 and v3. So it (might) work ok and it might not, I don't think this issue is related to the version mismatch (I'd expect TS compile errors and exceptions to be thrown if something is not working correct)

[github-actions[bot]]

This Issue will be closed in 30 days. Please remove the "Stale" label or comment to avoid closure with no action.