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)
3. Send the link to the user to active the role setting.
Demo
1. Access the Static Web App home page without Login
2. Click the link of "Anonymous Role page"
We can access the route /anonymous/* because we are default having the anonymous role
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.
4. Click Login to acquire the authenticated role
5. After login, we can access the route /authenticated/*
6. But we still getting blocked for the route /custom/* because we do not have the custom role
7. Assign custom role to the specific user by invitation link
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
10. After activating the custom role from the invitation link, we can now access the route /custom/*
Congratulations! After 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.
Microsoft
