x-ms-client-principal header not included in request from SWA to connected Container App API

Question

We are experiencing an issue with our SWA where the x-ms-client-principal header is intermittently not included in requests to APIs host on a connected Azure Container App, which is causing intermittent 401 responses which are incorrect. We are following the steps laid out in the Azure documentation for accessing user information for SWAs: https://learn.microsoft.com/en-us/azure/static-web-apps/user-information?tabs=javascript and call the "/.auth/me" on the front end via a fetch implementation laid out in Vue documentation: https://vuejs.org/guide/reusability/composables.html#async-state-example.

Is there any way to protect against this issue?

This issue has also been previously raised on GitHub at: https://github.com/Azure/static-web-apps/issues/1053#issuecomment-1845878160

Answer 1

@Austin James Have you been able to implement the suggested workaround? This may help to provide you relief until we receive an answer from the product group.

There is a workaround for this:

• adding an "allowedRoles" with route "*"
• adding all non-secured routes (a long list) in front of it

Here is an example for this:

{
  "navigationFallback": {
    "rewrite": "/api/render"
  },
  "routes": [
    {
      "route": "/manifest.json"
    },
    {
      "route": "/service-worker.js"
    },
    {
      "route": "/robots.txt"
    },
    {
      "route": "/static/*"
    },
    ...
    {
      "route": "*",
      "allowedRoles": ["authenticated"]
    }
  ]
}

In the meantime, we have reached out to the product group for their input.