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