staticwebapp.config.json

Neil Haddley • March 10, 2024

staticwebapp.config.json

← Back to Posts

The "auth" section of the staticwebapp.config.json can be used to configure access to a static web app.

Static web app environment variables can be used to manage authentication properties

I created an index.html file. I created a staticwebapp.config.json file.

I created an index.html file. I created a staticwebapp.config.json file.

I right clicked the Static Web App icon and selected the "Create Static Web App... (Advanced)" option

I right clicked the Static Web App icon and selected the "Create Static Web App... (Advanced)" option

I clicked the Create button

I clicked the Create button

I provided a git initial commit message

I provided a git initial commit message

I provided a name for a new Azure Resource Group

I provided a name for a new Azure Resource Group

I accepted the detail Azure Static Web app name

I accepted the detail Azure Static Web app name

I selected the Free pricing option

I selected the Free pricing option

I selected the GitHub organization name

I selected the GitHub organization name

I accepted the default repository name

I accepted the default repository name

I selected the private option

I selected the private option

I selected the default shortname

I selected the default shortname

I selected the default region

I selected the default region

I selected the HTML project structure

I selected the HTML project structure

I selected location /

I selected location /

I left the Azure Function name empty

I left the Azure Function name empty

I selected location /

I selected location /

I created a new Azure Active Directory/Entra ID App Registration

I created a new Azure Active Directory/Entra ID App Registration

I selected the "any organization... option

I selected the "any organization... option

I added a platform

I added a platform

I selected Web

I selected Web

I specified the Redirect URI

I specified the Redirect URI

I added https://jolly-bush.../.auth/login/add/callback

I added https://jolly-bush.../.auth/login/add/callback

I selected the ID tokens checkbox

I selected the ID tokens checkbox

I copied the client ID

I copied the client ID

I created an application Environment Variable called AZURE_CLIENT_ID and pasted in the value

I created an application Environment Variable called AZURE_CLIENT_ID and pasted in the value

I created a Client Secret

I created a Client Secret

I copied the Client Secret value

I copied the Client Secret value

I created an application Environment Variable called AZURE_CLIENT_SECRET and pasted in the value

I created an application Environment Variable called AZURE_CLIENT_SECRET and pasted in the value

I upgraded the Static web app's hosting plan

I upgraded the Static web app's hosting plan

I copied the Static Web Application's URL

I copied the Static Web Application's URL

I clicked the Accept button

I clicked the Accept button

I entered a username and password

I entered a username and password

I logged onto the app

I logged onto the app

TEXT
1{
2  "routes": [
3    {
4      "route": "/*",
5      "allowedRoles": [
6        "authenticated"
7      ]
8    }
9  ],
10  "responseOverrides": {
11    "401": {
12      "statusCode": 302,
13      "redirect": "/.auth/login/aad"
14    }
15  },
16  "auth": {
17    "identityProviders": {
18      "azureActiveDirectory": {
19        "registration": {
20          "openIdIssuer": "https://login.microsoftonline.com/1661e837-0a95-4bc6-a655-865365c2419b/v2.0",
21          "clientIdSettingName": "AZURE_CLIENT_ID",
22          "clientSecretSettingName": "AZURE_CLIENT_SECRET"
23        }
24      }
25    }
26  }
27}

References

Build a website using Azure Static Web Apps and Authenticate with AAD