Configure B2C sample to work with PathLocationStrategy instead of HashLocationStrategy

[shadyabouelmakarem]

Library

• [x] @azure/msal-angular@2.0.0-alpha.5

Description

How can I replicate the angular11-b2c-sample project without turning on the HashLocationStrategy ?

The issue I'm facing is that redirect URIs from Azure AD B2C always start with # which misses up the application because I'm using PathLocationStrategy instead of HashLocationStrategy.

I can set the useHash: false instead of useHash: true like this:

RouterModule.forRoot(routes, { useHash: false, // Don't perform initial navigation in iframes initialNavigation: !isIframe ? 'enabled' : 'disabled', }),

But still, how can I interact with the redirect URIs starting with # ?

Source

• [x] Customer request

[jo-arroyo]

@shadyabouelmakarem PathLocationStrategy is fully supported by msal-angular. However, MSAL does not support redirectUris that have a hash, because that is where the response from the server is. MSAL will automatically handle parsing the response hash for you.

But still, how can I interact with the redirect URIs starting with # ?

Could you clarify what you mean by this?

[eluchsinger]

@jo-arroyo The sample uses HashLocation strategy (see here). How is PathLocationStrategy supported? I have also pointed this out here.

[jo-arroyo]

@eluchsinger The PathLocationStrategy should be supported by the library. The samples show the HashLocationStrategy, but you are able to turn that off or remove it from the RouterModule.forRoot. Are you having problems using the PathLocationStrategy with our library?

[eluchsinger]

@jo-arroyo I'm having the problem that after logging in, it does not redirect correctly to the protected page I tried to access.

I am trying to adhere to the samples to avoid bugs like this, but I do not know which parts of the samples I can and which ones I can not change. The sample tells me to use HashLocationStrategy - which probably most users do not use because it is discouraged/deprecated. And I have no other information about how to implement it correctly using PathLocationStrategy.

What I would suggest or like to see is that the documentation and samples addresses the issues of most users and encourages them to use the best practice approach available. In this case it would be a sample with PathLocationStrategy. I do not know, if my problem is related to HashLocationStrategy or not - probably only a contributor with more in depth knowledge can tell me right now. But to me, my issue is secondary right now. There are enough construction sites in here and we should try to fix each one of them step by step to get this thing flying.

Tell me if you would like to see a PR and I can propose the change myself, although since I can not get my own application running maybe it is better that an existing contributor does it instead 😉.

[jo-arroyo]

@eluchsinger Thank you for your feedback regarding our samples. As we aim to provide samples that cover a wide range of use cases, we will look into updating our samples to demonstrate using the PathLocationStrategy as well as the HashLocationStrategy. We are also currently working on improving our documentation with better guidance regarding the nuances of using each strategy.

In the meantime, if you are wanting help with your app, it would be great if you either send us a link to your repo, or open an issue with your configuration, usage, MSAL version and logs. We would be happy to help figure out why the redirects are not working for you.

[ozkoidi]

Any progress on that sample with PathLocationStrategy? I wonder how we can make it work without having these routes in app-routing.module.ts:

  {
    // Needed for hash routing
    path: 'error',
    component: HomeComponent,
  },
  {
    // Needed for hash routing
    path: 'state',
    component: HomeComponent,
  },
  {
    // Needed for hash routing
    path: 'code',
    component: HomeComponent
  }

[jo-arroyo]

@eluchsinger @shadyabouelmakarem @ozkoidi Thanks again for your feedback. We have just released a new version of @azure/msal-angular with updated guidance for path and hash routing, and the sample Angular10-sample-app now uses the PathLocationStrategy. There have also been other changes to the library that should reduce problems experiencing with login on app load.

Please take a look at our new documentation, try out our new versions, and if you are still experiencing issues, please open a new issue with your configuration and usage.