Azure OAuth2 fails with Angular HashLocationStrategy

Question

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?

Answer 1

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.

Answer 2

I'm afraid you're trying to put a square peg in a round hole!

You tried to use HashLocationStrategy because you can't redirect Angular routes to index.html when using Azure Storage as a web server.

However, you're using OAuth, which always provides the token in an URL fragment. This is to keep the access_token away from the app server, since the browser doesn't send it at all, after receiving it in the redirection from the identity provider.

I don't see any workaround to help you achieve what you're trying, I'm afraid you'll have to host the app on a "URL rewriting capable" web server.

Answer 3

Use &response_mode=query instead of the default fragment.

https://learn.microsoft.com/en-us/azure/active-directory/azuread-dev/v1-protocols-openid-connect-code#send-the-sign-in-request

GET https://login.microsoftonline.com/{tenant}/oauth2/authorize?
client_id=6731de76-14a6-49ae-97bc-6eba6914391e
&response_type=id_token
&redirect_uri=https://<projectname>.z6.web.core.windows.net/auth/callback // escape this..
&response_mode=query
&scope=openid
&state=12345
&nonce=7362CAEA-9CA5-4B43-9BA3-34D7C303EBA7

Your response should now look like this:

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