Azure Static Web App Authentication + Services App

Question

I am trying to make work an application deployed on Azure Static Web App, which uses an API deployed on Services App (fastapi). Everything works fine, but I am struggling making work the authentication for the API.

Authentication using Entra ID provider is configured and working fine for the Static Web App, but not sure about what I need to do for my API allowing Static Web App authenticated users. I am always getting a 401 error for API requests, even when I can see on /.auth/me that the user is correctly authenticated. If I disable authentication on my Services App, everything works fine, but I do not want to disable backend API authentication for security reasons.

I have deployed a Static Web App (Standard SKU), and linked my Services App as backend. I can also see Static Web App listed as Identity Provider on my Services App Authentication. I have also the staticwebapp.config.json file in place, with a route for /* allowing access to authenticated users. Not sure about which extra steps are necessary for making this work, and cannot find anything related on Internet. According to a Microsoft document:

The API functions available in Static Web Apps via the Azure Functions backend (I think this also applies to any "bring you own functions" feature, which includes Service Apps) have access to the same user information as a client application, with the exception of the claims array. While the API does receive user-identifiable information, it does not perform its own checks if the user is authenticated or if they match a required role. Access control rules are defined in the staticwebapp.config.json file.

Client principal data is passed to API functions in the x-ms-client-principal request header.

So, if I am understanding it correctly, the browser should be adding the x-ms-client-principal request header automatically when calling the API.

Can someone please help me with this? Thanks.

Answer 1

Based on the issue description, I understand you are trying to authenticate users for your API deployed on Services App (fastapi) using Entra ID provider, but you are getting a 401 error for API requests even when the user is correctly authenticated and that you have also added a route for /* in the staticwebapp.config.json file to allow access to authenticated users.
I understand you're referring to the doc steps : Accessing user information in Azure Static Web Apps | API functions

While I'm checking on this on this further, to make sure that the browser is adding the x-ms-client-principal request header automatically when calling the API, kindly double-check these, just to isolate (if you haven't done already):

1. Ensure that you are calling the API from the Static Web App using the correct URL and path.
   You may check the URL and path in the Azure portal under the Static Web App's Configuration
2. Make sure that you have added the x-ms-client-principal request header to your API's CORS settings under CORS section.
3. Review in your API's code by checking for the presence of the header in the incoming request.

Kindly let us know, I'll follow-up with you further.

Answer 2

Arnaldo Morales Busato, Adding more info for better clarity:

Short answer: With Easyauth and linking BYO backends to a static webapp, you would not need to modify code.

When connecting the Bring Your Own Functions, Web App, or Container App to the BYO backend within the SWA, the Authentication blade automatically integrates the SWA identity. If the SWA identity is removed accidentally or not added, the SWA would encounter a 401 error while attempting to communicate with the BYO backend.

 

Also,  if using Functions as the backend, and require authentication (e.g. function or admin keys), then the SWA code would need to provide this key when it makes a request to the Function.
Please see this doc section: Authorization level

The user claims info is related to authorization rather than authentication. Getting the user claims info assumes that the request is already authenticated. Hence, it does not seem to be applicable to the issue.

 
If you haven't done already, you may unlink and relink the BYO backend to the SWA and see if resolves the issue.

If the issue still persists, I would need additional details about your resource URIs of the Static Web App and of the backend that you are using, to perform a deeper investigation -for this, I'll follow-up further with you offline.

Kindly let us know, I'll be happy to assist you further.
(I have summarized, and converted comment to answer)

---

If the answer helped (pointed, you in the right direction) > please click Accept Answer

Answer 3

Yes, I have relinked the BYO Backend many times with the same result. I have also re-created both, the SWA and the Backend again, but I am getting the same error.

I have replaced the Web App by Azure Function and it works fine, but I would like to make this work using Web App as my backend.

I do not need any authorization for the moment, and I just want to backend sucessfully giving a response to my authenticated users.

We can continue checking this offline if it is ok for you. Thank you very much!

Best regards,

Arnaldo