angularoauth-2.0azure-active-directoryazure-blob-storagehash-location-strategy

Azure OAuth2 fails with Angular HashLocationStrategy


This is a follow up question to Angular App Hosting Azure Storage Container - Azure Authentication Callback and Routing fails.

Summary:

I want to host my Angular 8 app on an Azure Storage Account. To make the routing work I had to turn on the HashLocationStrategy. This strategy prefixes the routes with a hashtag like this: https://<projectname>.z6.web.core.windows.net/#/auth/login

The routing works now but the Azure OAuth2 process adds the access token information to the base url also by using a hashtag: <baseurl>/<callbackurl>#access_token=eyJ0eXAiOiJKV1Q.... Without using the HashLocationStrategy the route would be like this (callback route is /auth/callback):

https://<projectname>.z6.web.core.windows.net/auth/callback#access_token=eyJ0eXAiOiJKV1Q...

With HashLocationStrategy it should be like this:

https://<projectname>.z6.web.core.windows.net/#/auth/callback#access_token=eyJ0eXAiOiJKV1Q...

But what it does is this:

https://<projectname>.z6.web.core.windows.net/#access_token=eyJ0eXAiOiJKV1Q...

It just swallows the callback url part and adds the access_token part directly behind the base url. The redirect fails.

Is there a way to make Azure OAuth2 work with HashLocationStrategy?


Solution

  • I've not investigated all the facets of your question nor have I needed to leverage HashLocationStrategy, but on S3 buckets we've specified the custom 404 page to point to the index.html file, similar to a suggestion in the Angular Deployment documentation for use in static GitHub Pages.

    In Azure's Static website hosting in Azure Storage page, it indicates that a custom 404 page can be specified. You could try to specify the index.html file as well. This effectively "actives" the Angular router on non URL-rewritable hosting - at least this worked on S3 static site hosting.