Tips on how to secure your Azure Static Web App

Tips on how to secure your Azure Static Web App

Azure Static Web Apps is excellent. However, there are some tips to help you enjoy it even more.

Victor Shi · 2 minute read

Azure Static Web Apps is a service that allows developers to build, deploy & host full-stack apps to Azure from either GitHub or Azure DevOps. It offers developers a great alternative to host their static web apps from AWS's offering (S3+Lambda). I think Microsoft has done a much better job compared to Amazon. A lot of complexities like CORS and pipeline have been handled out-of-box so developers can focus on writing code.

Here are some resources that can help you learn Azure Static Web Apps:

Microsoft Learn

GitHub Examples

Here are a few tips I have learned so far:

  • Static Web App provides a streamlined authentication experience. By default, you have access to a series of pre-configured providers (Azure Active Directory, GitHub, Twitter). If you are using React, you can have a look Static Web App Auth tools for React, Anthony Chu's example & #30DaysOfSWA, to get started. Few more things to be noted here:

    • The preconfigured Azure Active Directory provider allows any Microsoft Account to sign in. You will need to configure a custom Azure Active Directory provider to restrict login to a specific Active Directory tenant. This might be a requirement if you want to use it for work. In this case, you will need to use the standard plan, which costs around $12 per month. Follow this page to configure your AAD and Static Web App

    • In a workplace setup, developers might not be able to configure the applications under the active directory. If the organisation doesn't allow users to grant consent to new applications. You will need to work with your Azure Administrators to configure the consent on behalf of users. https://learn.microsoft.com/en-us/azure/active-directory/manage-apps/configure-user-consent?pivots=portal https://learn.microsoft.com/en-us/azure/active-directory/develop/application-consent-experience https://learn.microsoft.com/en-us/azure/active-directory/manage-apps/grant-admin-consent

    • The out-of-the-box GitHub Action & Azure DevOps Pipeline only monitor the main branch and deploy to production. You can find additional environments by following https://techcommunity.microsoft.com/t5/apps-on-azure-blog/multi-stage-azure-static-web-apps-deployments-with-azure-devops/ba-p/3390625