Azure Static App Not Respecting staticwebapp.config.json

Question

Goal

A publically-facing application that allows people to use a personal e-mail address not necessarily associated with Microsoft, GitHub, or X to login to the application.

Problem

I've spent hours (nearly two man days) trying to solve a problem with this sample azure-search-openai-javascript application leveraging GitHub codespaces. If you are not familiar with the project, it is effectively an Azure Static Web App (SWA) backed by an Azure Container App (API) layer. I have done everything I possibly can think of to ensure the SWA recognizes the staticwebapp.config.json file, placing it in both ./packages/webapp/public and ./packages/chat-component/public (trying to ensure it gets picked up and deployed.

The file configuration is simple (you can even visit the OIDC-configured provider values via the wellKnownOpenIdConfiguration URL included, below):

{
  "routes": [
    {
      "route": "/login",
      "rewrite": "/.auth/login/aadb2c"
    }],
    "auth": {
      "identityProviders": {
        "customOpenIdConnectProviders": {
          "aadb2c": {
            "registration": {
              "clientIdSettingName": "AADB2C_PROVIDER_CLIENT_ID",
              "clientCredential": {
                "clientSecretSettingName": "AADB2C_PROVIDER_CLIENT_SECRET"
              },
              "openIdConnectConfiguration": {
                "wellKnownOpenIdConfiguration": "https://gener8vai.b2clogin.com/gener8vai.onmicrosoft.com/B2C_1_GENER8V_SEARCH_AUTH/v2.0/.well-known/openid-configuration"
              }
            },
            "login": {
              "nameClaimType": "emails",
              "scopes": ["openid"],
              "loginParameterNames": []
            }
          }
        }
      }
    }
  }

I've effectively followed this simple guide (plus lots of other iterations).

Things I have tried in addition to the inclusion of the variables above (and association with the Azure SWA through the setting (manually) of the associated Environmental Variables):

1. Adding the file explicitly to the npm build script.
2. Configuring the swa CLI via swa-cli.config.json to explicitly point to and include the staticwebapp.config.json file.
3. Including the file directly in various locations in the directory structure of the project.

I've also tried numerous iterations of configuring the Azure AD B2C tenant, the associated Application Registrations, and the subsequent User Flows (which do work).

Can someone help me understand what I am doing wrong? Is there a permissions grant I am missing?

Ideally there would be a better way for me to check the build logs; but given that this is deployed via azd up and swa through GitHub Codepsaces, I don't know that there is.

The Application Registration

The associated User Flow

The Static Web App

Answer 1

Hi @Thomas Eaves

It sounds like your Azure Static Web App (SWA) is not recognizing your staticwebapp.config.json file, because of that authentication is not working correctly.

Make sure the staticwebapp.config.json file is in the correct location:

The file must be placed at the root of your built output.Since you're using workspaces packages/webapp, packages/chat-component, your build process might not be copying it correctly.

1. Place staticwebapp.config.json in packages /webapp/public/.
2. Run your build command (npm run build).
3. Check the output directory (e.g., packages/webapp/dist/ or packages/webapp/build/).
4. Confirm that staticwebapp.config.json exists in the final build output. If it's missing, you need to copy it manually using a script:
   • Add this to package.json:

          "scripts": {
          "postbuild": "cp staticwebapp.config.json dist/"
          }
     

   • Then, run the build again and check the dist/ folder.

Validate staticwebapp.config.json ensure there are no syntax errors in staticwebapp.config.json.

Check Logs in Azure:

1. Go to Azure Portal ->Your Static Web App.
2. Open Logs (Diagnostic Settings).
3. Check if it says, "No valid staticwebapp.config.json found".

Hope this helps.

If the answer is helpful, please click Accept Answer and kindly upvote it. If you have any further questions about this answer, please click Comment.