Adding Authentication to your Azure Static Web App

So you are writing a documentation page and you want to protect it? Azure Static Web Apps has the solution for you.

Simply create a staticwebapp.config.json file in your App artifact folder (i.e., where your app code will live to be deployed) with the following content:

{
  "routes": [
    {
      "route": "*",
      "allowedRoles": ["authenticated"]
    }
  ],
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
  },
  "responseOverrides": {
    "401": {
      "redirect": "/.auth/login/aad?post_login_redirect_uri=.referrer",
      "statusCode": 302,
      "exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
    }
  },
  "globalHeaders": {
    "content-security-policy": "default-src https: 'unsafe-eval' 'unsafe-inline'; object-src 'none'; img-src 'self' data: *"
  }
}

This will now enforce authentication to all your routes and exclude the CSS or Images from being protected.

Deploying this now automatically redirects us to the authentication page!