How to setup Built-in Authentication for Azure Static Web Apps with Azure Active Directory
Published Feb 07 2023 12:34 AM 9,974 Views
Microsoft

Azure Static Web Apps provides 2 mechanisms for authentication: built-in authentication and custom authentication. It enables the authentication by simply defining the routing rules and the roles in the configuration file staticwebapp.config.json.

 

In this blog, we are going to introduce how to enable built-in authentication for Azure Static Web Apps with Azure Active Directory step by step.

 

Pre-requires

1. Create a Static Web App from the Azure Portal

2. Check workflow file for the app_location setting. The default path of app_location in the workflow file should be defined as "/".

3. Manually create the configuration file staticwebapp.config.json in the folder set as the app_location in the workflow file.

4. Configure built-in authentication in the file staticwebapp.config.json by the following sample

 

 

 

{
  "routes": [
    {
      "route": "/anonymous/*",
      "allowedRoles": ["anonymous"]
    },
    {
      "route": "/authenticated/*",
      "allowedRoles": ["authenticated"]
    },
    {
      "route": "/custom/*",
      "allowedRoles": ["custom"]
    }
  ]
}

 

 

 

5. Define root html for the Azure Static Web App

 

 

 

<html lang="en">
<body>
    <h1>Azure Static Web Apps auth demo</h1>
    <div>
        <a href="/.auth/login/aad">Login</a>
        <a href="/.auth/logout">Logout</a>
    </div>
    <div>
        <ul>
            <li><a href="/anonymous/">Anonymous Role page</a></li>
            <li><a href="/authenticated/">Authenticated Role page</a></li>
            <li><a href="/custom/">Custom Role page</a></li>
        </ul>
    </div>
</body>
</html>

 

 

 

6. Create 3 folders under the root path and put an index.html inside each folder

(1) anonymous

(2) authenticated

(3) custom

 

 

 

Introduction about the role

Before we demo the sample code, I would like to introduce more about the authentication role.

By default, every user belongs to the built-in anonymous role, and all logged-in users are members of the authenticated role.

To be specific, even if a user does not login, the user is default having the anonymous role. And after the user login, the user will get the authenticated role.

 

We can also define a custom role by setting up a value in allowedRoles and associate user to the custom roles via invitations.

For example:

1. Define a custom role "custom" in the staticwebapp.config.json.

 

 

    {
      "route": "/custom/*",
      "allowedRoles": ["custom"]
    }

 

 

2. Create invitation link and put your custom role name in the Role column.

(Through Static Web Apps > Role management > Invite)

joeyhuang_0-1675681837166.png

3. Send the link to the user to active the role setting.

 

Demo

1. Access the Static Web App home page without Login

joeyhuang_6-1675678853023.png

2. Click the link of "Anonymous Role page"

We can access the route /anonymous/* because we are default having the anonymous role

joeyhuang_7-1675678853025.png

3. Click the link of "Authenticated Role page"

We cannot access the route /authenticated/* because we haven't login.

So, we don't have the authenticated role.

joeyhuang_8-1675678853027.png

4. Click Login to acquire the authenticated role

joeyhuang_9-1675678853029.png

5. After login, we can access the route /authenticated/*

joeyhuang_10-1675678853031.png

6. But we still getting blocked for the route /custom/* because we do not have the custom role

joeyhuang_11-1675678853033.png

7. Assign custom role to the specific user by invitation link

joeyhuang_15-1675680109660.png

8. Active custom role by accessing the link and login (Please make sure to do this step, otherwise the role will not be assigned)

9. Check if the custom role is successfully assigned on the Azure Portal

joeyhuang_16-1675680432249.png

10. After activating the custom role from the invitation link, we can now access the route /custom/*

joeyhuang_14-1675678853046.png

 

CongratulationsAfter these steps, you are now understanding how to enable the built-in authentication to protect your Azure Static Web Apps.

 

Hope this article is helpful for you and thank you for reading.

4 Comments
Co-Authors
Version history
Last update:
‎Feb 07 2023 04:58 PM
Updated by: