Azure deployed SPA application app registration redirect url gives Resource Unavailable

Question

I've deployed a SPA app that uses MSAL for authentication. I've registered the app and setup the redirect uri for both localhost (http://localhost:4200) and the azure deployed app (https://myappname.azurewebsites.net).

I am able to browse to my applicaiton on azure and hit my default page. When I click a button on the page (Go To Home Page), I am able to authenticate using MSAL and azure login. My homepage calls an azure deployed API that I've setup for implicit flow. When I'm on localhost I'm able to click Go To Home and get redirected to my Home Page and the api data is loaded. When I'm on the azure deployed site, however, I get the error screen at the bottom. How can I resolve this?

Note that I found out from this other post (Azure Active Directory always redirects to '~/.auth/login/done' when deployed to Azure despite working on localhost) that apparently I can't have Authentication turned on in my app service for my SPA while also using MSAL within my SPA logic to handle my authentication process. That did indeed resolve the previous issue I had where the recommended redirect url (https://myappname.azurewebsites.net/.auth/login/aad/callback) was causing a 400 Invalid Token error with authentication turned on for the app service. This is why I turned it off and set the redirect uri to https://myappname.azurewebsites.net, which got me further.

As you can see in the image below I successfully get a token and there is an attempt to redirect to the requested url with the token in the querystring. The full redirect url looks like this: https://myappname.azurewebsites.net/t/home#id_token=eyJ0W9uIn0%3d&session_state=c88578fb-1522-9823-87d4-0e7b08abe397 (the token is shortened...)

Can you please ensure that you redirect to `index.html` if the route is not found. In the Deployed `app service- settings-configuration-default document` as `index.html` — Raghavendra beldona, Sep 29 '20 at 12:05

score 0 · Answer 1 · answered Oct 03 '20 at 17:04

So after searching around I found out that apparently SPA applications served through IIS (or any other server) require that a routing script be provided on the server. Details and explanation are here if you scroll down to the Server Configuration section: https://angular.io/guide/deployment So the solution to my problem was to add a web.config to the root of my azure site. I did this by dropping the following web.config file into the site root using Kudu (https://mysitename.scm.azurewebsites.net/DebugConsole).

Hopefully, this helps someone facing a similar situation.

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>

Azure deployed SPA application app registration redirect url gives Resource Unavailable

1 Answers1