How to deploy an Angular 14 app integrated with AD B2C with authorization code flow PKCE in an App Service?

Question

I'm trying to deploy in an Azure App Service an Angular application that has integrated AD B2C with a user flow (signupsignin1) and with authorization code flow PKCE, this is what I did:

1. For all the configuration of the B2C and the Angular app I used this link: https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-authentication-sample-angular-spa-app

• I moved the code to Angular 14 and created a home component with the button sign-in.

The redirect URL: http://localhost:4200/home

It works properly.

-Configuration to deploy in App Service-

1. App Service

Stack Node v16 SO: Windows

Created...

Then I copied the URL => https://name-app.azurewebsites.net

2. Angular

a. I added the web.config and configure the angular.json

web.config:

<?xml version="1.0" encoding="utf-8"?>
<configuration>

<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>
</configuration>

Angular.json

 "assets": [
    "src/favicon.ico",
    "src/assets",
    "src/web.config"
            ],

b. msalConfig I added the new redirect URL:

const msalConfig: Configuration = {
  auth: {
    clientId: <clientId>,
    authority: b2cPolicies.authorities.signUpSignIn.authority,
    knownAuthorities: [b2cPolicies.authorityDomain],
    redirectUri: 'https://name-app.azurewebsites.net/home',
  },
  cache: {
    cacheLocation: BrowserCacheLocation.LocalStorage,
    storeAuthStateInCookie: isIE,
  },
  system: {
    loggerOptions: {
      loggerCallback(logLevel: LogLevel, message: string) {
      },
      logLevel: LogLevel.Verbose,
      piiLoggingEnabled: false
    }
  }
}

3. Adding the new Redirect URIs in the app registration of the Angular:

Single-page application:

New URL: https://name-app.azurewebsites.net/home

4. Build the Angular.

a. ng b

5. Install in the VS the extension Azure App Service.

6. Deploy the dist folder.

7. In portal Azure go to the App service -> configuration -> Path mappings/Virtual applications and directories/Virtual path: Edit: site\wwwroot\name-project-angular Save.

8. Start the app service.

9. Go to URL.

Now here comes the problem, it loads the home page but when I click on sign-in throw these errors:

a. In page: The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

b. Console: GET https://name-app.azurewebsites.net/home, HTTP 404 'Not Found'.

c. https://test-deploy-angular.azurewebsites.net/favicon.ico, HTTP 404 'Not Found'

Warnings:

d. Cookie “ARRAffinity” does not have a proper “SameSite” attribute value. Soon, cookies without the “SameSite” attribute or with an invalid value will be treated as “Lax”. This means that the cookie will no longer be sent in third-party contexts. If your application depends on this cookie being available in such contexts, please add the “SameSite=None“ attribute to it. To know more about the “SameSite“ attribute.

e. This page is in Quirks Mode. Page layout may be impacted. For Standards Mode use “”.

10.

Is the redirect URL incorrect in msalconfig or in the registration app?

Is the web.config incorrect?

I don´t know what is wrong. And I searched information about this but I didn´t find anything related.

Regards, Luis Cáceres.

Answer 1

If your web.config can't process the request, you will get this error on the page:

The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

That can happen for many reason, but in your case the likelihood is that your code param that comes from the B2C redirect is too big for the default limits. If that is the case, the solution will be setting the maxQueryString higher than the default in your web.config.

It would look like:

<?xml version="1.0" encoding="utf-8"?>
<configuration>

<system.webServer>
    <security>
      <requestFiltering>
        <requestLimits maxQueryString="8192" />
      </requestFiltering>
    </security>
  <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>
  <staticContent>
        <mimeMap fileExtension=".json" mimeType="application/json" />
        <remove fileExtension=".woff"/>
        <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
        <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
      </staticContent>
</system.webServer>
</configuration>