Managed Identity for Azure Static Web Apps to access Storage Accounts?

Question

Hi,

I have a Vue app deployed on Azure Static Web App. My developers need to retrieve images stored in Azure Blob Storage and display them on the website.

I notice that Azure Static Web Apps (Standard plan) offers Managed Identity so I thought this could be an easy way to securely retrieve images from blob storage.

I had experiences in .NET on Azure App Service before where I suggested developers to follow this tutorial (using DefaultAzureCredential class) and it worked perfectly. I wonder if this could be achieved in Vue as well? It would be great if there are code samples to study.

If it can't be done today, what other options do I have? One method I can think of is to have backend (hosted on App Service) retrieve the images from blob storage, pass the binary to frontend, and render it client-side. Not sure if this is the most efficient way to do though.

Thanks.

Answer 1

PitawatNantamanop-3754, Thanks for the great question! While I check on this internally/request anthonychu-msft (our Azure Static Web Apps PG) for additional insights.

As mentioned in this FAQ: 'Does Static Web Apps support managed identity?'

"Static Web Apps supports managed identity, but it's only used to retrieve authentication secrets from Key Vault.

If you need managed identity or Key Vault references in your API, use the bring your own Functions app feature to use a separate Functions app that uses managed identity."