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?

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 { }

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