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.
- Part I - Using the VS Code Extension
- Part II - Using the Astro Static Site Generator
- Part III – Deploying to multiple environments
- Part IV – Password protect your environments
- Part V – Traffic splitting
- Part VI(this post) – Authentication using pre-configured providers
I ended 2023 with a post about protecting access to your Azure Static Web App using a password. Of course this is a poor man’s implementation of security. So let us have a look today on how to properly integrate authentication in our Azure Static Web App.
Authentication in itself is a broad topic, we can further refine it in 2 parts:
- Who are you? The real authentication part
- What are you allowed to do? This is more a question of authorization instead of authentication
Let us focus on the first question in this post. To allow a Static Web App to know who you are we need to integrate with an authentication provider.
Pre-configuration authentication providers
Azure Static Web Apps comes with 2 pre-configured authentication providers:
- Github
- Azure Active Directory (Microsoft Entra ID)
Remark: Originally there was also a pre-configured provider for Twitter(X) but this got removed.
To authenticate against one of the preconfigured providers you need to browse to a specific endpoint:
Then I embedded this in my navigation component:
| Authorization Provider | Endpoint |
| Microsoft Entra ID | /.auth/login/aad |
| Github | /.auth/login/github |
Both providers are enabled by default. If you want to disable one of them you need to do this by blocking access to this endpoint through the staticwebapps.json.config file:
Next to the built-in providers, it is also possible to configure one or more custom providers but I’ll leave that for a later post.
Authenticating
To authenticate, you need to send the user to one of the above endpoints. Here is an example on how I did this in an Angular application:
I first created a login component that renders a link for a specific authentication provider:
This renders a (simple) UI that looks like this:
When clicking on a specific authentication provider the user is redirected and is requested to authenticate against the selected provider:
After being authenticated we can receive the user information by sending a GET request to the /.auth/me endpoint. This will return a JSON object like the following:
In my Angular app I added some extra logic to call this endpoint and receive the user info:
More information
Authenticate and authorize Static Web Apps | Microsoft Learn
Accessing user information in Azure Static Web Apps | Microsoft Learn