Angular App Hosting Azure Storage Container - Azure Authentication Callback and Routing fails

Question

I developed an Angular 8 App with NgxAdmin and hosted it as Azure Web App. It uses Azure AD Oauth2 Authentication with the help of NbAuthModule. Everything works fine. Now I tried to host the same SPA on an Azure Storage Account. I added the new callback url to the Azure Ad App Registration and updated the redirectUri in the NbOAuth2AuthStrategy.setup-method.

When I call the base url of the static app (https://<projectname>.z6.web.core.windows.net), it correctly redirects to https://<projectname>.z6.web.core.windows.net/auth/login?return=%2Fpages%2Fdashboard. I can login via Azure Ad. Then the url changes to https://<projectname>.z6.web.core.windows.net/auth/callback#access_token=eyJ0eXAiOiJKV1Q... and there should be a redirect to the previously defined return-url /pages/dashboard. But all I get is a 404 on the callback link.

Additionally, if I try to call e.g. https://<projectname>.z6.web.core.windows.net/auth/login directly, it returns a 404 (if I do the same with the web app, the login component is displayed).

What am I doing wrong? Are there additional changes to made in my Angular code to make the routing run in Azure Storage Account?

Parham

Answer 1

It looks like you're not using the HashLocationStrategy, so the 404 is likely because the webserver doesn't have any folder/files in auth/callback. You have two options:

1. Configure your webserver to redirect to {root}/index.html when it gets a sub route like auth/callback
2. Use the HashLocationStrategy, which will prefix your routes with #, for example:

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

https://<projectname>.z6.web.core.windows.net/#/auth/login?return=/#/pages/dashboard

Here's how you can enable hash location strategy:

@NgModule({   
    imports: [
      /* more imports here */
      RouterModule.forRoot(routes, { useHash: true })
    ],   
    declarations: [
       /* components here */ 
    ],
    providers: [   
       /* services here */ 
    ],
    bootstrap: [ AppComponent ]
 }) 
 export class AppModule { }

Enmesh

I'm not all too familiar myself with making re-write modules to redirect properly, but I found another question that may help you. #38210156 – Enmesh

Thank you for your anser! Please have a look at my comments to Nimezzz's answer – Parham

Sorry, the URL I originally provided in the HashLocationStrategy example was wrong, I've edited it to correct the problem. There should be a "?" to denote that "access_token" is a query string param. Based on your comments on the other question, that's why the url didn't work. – Enmesh

Also, if you're using the HashLocationStrategy, you shouldn't need to implement a re-write module. – Enmesh

Unfortunately, if I add a question mark at the end of the redirectUri in my app.module, I also have to add it in the azure ad app config as redirect uri. But I cannot save the uri with the ? in azure ad, it complains that it is not a valid url. – Parham

The URL I posted is a valid url, I suspect what you've configured does not match what I've written. I've updated the answer with more example URLs that demonstrate the proper routing. – Enmesh

Yes, the whole thing is valid, but what I have to configure as redirect uri in azure is https://<projectname>.z6.web.core.windows.net/#/auth/callback?, because access_token=ey... will be added automatically by the OAuth2 process. And this is assessed as not valid by azure. I'd like to add a screenshot to prove it, but I think it is not possible in a comment? – Parham

I marked your answer as the most helpful answer, because it solved the routing problem. Nonetheless the consecutive fault is not yet solved :-( – Parham

I created a follow up question for the access_token issue: #60165161 – Parham

Answer 2

You need to rewrite URLs in order use routes when you deploy an angular apps to a server. I'm assuming you are using an iis server and add following to web.config

<system.webServer>
 <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

Source

Or you can add Hash Location strategy, which results a # before route start (ex: https://sample.com/#/login)

In app.module.ts

import {LocationStrategy, HashLocationStrategy} from '@angular/common';

After import add following line to providers.

{provide: LocationStrategy, useClass: HashLocationStrategy}

ex:

providers: [AuthService, 
            AuthGuard, 
            FlxUiDataTable,
            {provide: LocationStrategy, useClass: HashLocationStrategy}] 

Source

Hope this helped. Thanks

Reachmedown

Thank you for your answer. No, I do not use iis - I deploy the angular app as static website to an azure storage account. I added the hash location strategy as suggested, but it still does not work :-( – Parham

Ok I'm a step forward now. I made some additional changes: – Parham

1. Changed the redirect url in my app.module to redirectUri: ${environment.frontend.baseUrl}/#/auth/callback 2. Changed the callback uri in the app registration in azure active directory to https://<projectname>.z6.web.core.windows.net/#/auth/callback 3. Added useHash: trueconfig to the RouterModule import. No I'm not getting the 404 anymore. But instead there is a different error: – Parham

https://<projectname>.z6.web.core.windows.net/auth/callback#access_token=eyJ0eXAiOiJKV1Q...has changed to https://<projectname>.z6.web.core.windows.net/#access_token=eyJ0eXAiOiJKV1Q.... Should be: https://<projectname>.z6.web.core.windows.net/#/auth/callback#access_token=eyJ0eXAiOiJKV1Q... Seems like there's some confusion about the two hashtags in the url. How can I fix this? – Parham

Change "callback#access_token" to "callback?access_token" - I've corrected my answer to clarify. – Enmesh

you are passing access token as a parameter right? Refer this answer here. https://mcmap.net/q/1914916/-hashlocationstrategy-and-query-parameters-in-angular-4 @spot 's comment should solve your hash with parameters issue. – Reachmedown

No, the access token is passed by AZURE in the format #access_token=. To add the suggested code to the app.component did not lead to any improvements :-( – Parham