Skip to main content

Azure Static Web App–Custom authentication

As a follow-up on the presentation I did at CloudBrew about Azure Static Web Apps I want to write a series of blog posts.

After getting side tracked by talking about configuration, it is now time to focus back on the authentication and authorization part.  I already explained that when using Static Web Apps you get 2 authentication providers out-of-the-box:

  • GitHub
  • Azure Active Directory (Microsoft Entra ID)

Today I want to show you how to use the OIDC provider of your choice through custom authentication. So if you want to specify your own Azure AD instance or use a 3th party identity provider like Auth0, IdentityServer, KeyCloak, … this is all perfectly possible.

Remark: Custom authentication is only supported when using the Standard plan for Azure Static Web Apps.

The advantage of using the built-in authentication providers is that it is a configuration free experience. Everything that is needed is already setup for you.

However if you want to have more control you can switch to a custom authentication provider. When using custom authentication providers, we have to make a difference between supported and unsupported authentication providers.

Using a supported authentication provider

Static Web Apps has out of the box support for some of the well known (social) identity providers like Microsoft Entra ID, Apple, Facebook, Twitter and GitHub. To use these providers, specific configuration should be added to the staticwebapps.json.config file.

I’ll show you an example using Azure AD but you can find the configuration for other providers here.

First we need to register our application in Azure AD:

  • Go to your Microsoft Entra ID instance in the Azure Portal

  • Click on New registration

  • Open the application registration we just created.
  • Capture the Application (client) ID and Directory (tenant) ID. We’ll need it later.
  • Then go to Client credentials and add a new secret. also copy the secret value.

Now we are going to update our config:

Note that we don’t have to store the secrets in the config file itself but we can specify 2 placeholders values. Azure Static Web Apps will use this value to search for a corresponding key in the application settings:


To call this provider we need to use ‘aad’ as the provider name in the URL(and not azureActiveDirectory as used inside the configuration):

Using an ‘unsupported’ authentication provider

Let me now show you the steps when using an unsupported provider. I’m using here Azure AD as well, but the steps are similar when using other providers like Auth0 or Keycloak.

First make sure that you have registered the application in the authentication provider. The steps required will differ depending on the chosen provider.

Next add the following configuration:

To call this provider we need to use the provider name we used inside our configuration:

That’s it!



More information

Custom authentication in Azure Static Web Apps | Microsoft Learn
Labels:

Popular posts from this blog

Podman– Command execution failed with exit code 125

After updating WSL on one of the developer machines, Podman failed to work. When we took a look through Podman Desktop, we noticed that Podman had stopped running and returned the following error message: Error: Command execution failed with exit code 125 Here are the steps we tried to fix the issue: We started by running podman info to get some extra details on what could be wrong: >podman info OS: windows/amd64 provider: wsl version: 5.3.1 Cannot connect to Podman. Please verify your connection to the Linux system using `podman system connection list`, or try `podman machine init` and `podman machine start` to manage a new Linux VM Error: unable to connect to Podman socket: failed to connect: dial tcp 127.0.0.1:2655: connectex: No connection could be made because the target machine actively refused it. That makes sense as the podman VM was not running. Let’s check the VM: >podman machine list NAME         ...
Read more

Cache stampede: when our cache turned against us

While investigating some performance issues, we ran into an ASP.NET Core API that cached a fairly expensive aggregation query for 60 seconds. Under normal load, that was fine: one request rebuilds the cache, everyone else reads from it. Under peak load, dozens of requests would arrive in that same expiry window, all see a cache miss, and all fire the same expensive query in parallel. The database didn't like that. That was the moment when our caching layer stopped helping and started hurting. A burst of requests comes in at the same time, all miss the cache, and all go hammer the database or the downstream API at once. That's a cache stampede . The cache was supposed to protect our backend, and for a few hundred milliseconds it did the opposite. Why this happens IMemoryCache.GetOrCreate (and its async sibling) looks like it protects you, but it doesn't add any locking on its own. Look at the naive version: public async Task<Report> GetReportAsync(string key) ...
Read more

A complex system designed from scratch never works

A few years ago, I worked as an architect on a big mainframe rewrite. I still count it as one of my failures. Not because the technology was wrong, but because I couldn't convince the management team to simplify the approach. Years later, the organization is still struggling to get the new system up and running. I left the project at the time, because I couldn't put my name behind an approach that would take very long and cost a lot of money without a working system to show for it along the way. Gall’s Law That memory keeps coming back to me, because it's a textbook case of Gall's Law playing out in real life. Gall's Law , from John Gall's Systemantics , states it plainly: A complex system that works is invariably found to have evolved from a simple system that worked. A complex system designed from scratch never works, and it cannot be patched to make it work. You have to start over with a simple system that works. What does that mean in practice,...
Read more