Single Sign-On, Azure Static Web Apps and Azure Active Directory (2023)

We often build and deploy web applications specifically for users internal to our organisation. Azure Static Web Appsis proving to be an excellent replacement for Azure App Servicein these scenarios.

At a high-level the service provides you with a great set of features (outlined in the Azure release notes)

  • Globally distributed content for production apps
  • Tailored CI/CD workflows from code to cloud
  • Auto-provisioned preview environments
  • Custom domain configuration and free SSL certificates
  • Built-in access to a variety of authentication providers
  • Route-based authorization
  • Custom routing
  • Integration with serverless APIs powered by Azure Functions
  • A custom Visual Studio Code developer extension
  • A feature-rich CLI for local development

The desired experience?

The experience I wanted to achieve was that if one of our internal users browsed to any of our internal apps, they would be able to use SSO across them provided they were a member of the AAD group needed to access the app (or just a member of our tenant for organisation-wide apps) - no login button, just a seamless logged-in user experience.

It turns out this was super easy to get right! Follow below!

Authentication options

Azure Static Web Apps makes authentication easy to enable across the three pre-configured identity providers

  • Azure Active Directory (AAD)
  • Github or
  • Twitter

These options allow users to login using a login button linking to the desired provider.

Initially I tried to use the pre-configured AAD provider, and when trying to log in using my company account I was presented with this approval dialogue

Meaning if I was able to get an admin to grant the permission, all users from our tenant would be able to log in to all Azure Static Web Apps, regardless of who had deployed them making this a non-starter for me.

Fortunately we already deploy our static web apps using the Standard plan for $9/per app/month, giving us the ability to use custom authenticationand use SSO with our organisations AAD tenant, internal app registrations and restrict access to groups / users in our tenants directory.

Getting it done!

To achieve the desired experience there are a number of components required

  • the static web app (the website)
  • an Azure App Registration for your app in your tenant
  • an Azure resource group for your project (I’m working on the assumption you already have a subscription, if not read here)
    • an Azure Static Web App for the web app
    • an Azure Key Vault to safely store the secrets for your app

I will be showing you how to create, configure and deploy these using GitHub Actions, Bicep(for creating the Azure resources) and some once off scripts.


All code is available on GitHub over here


It is a good idea to wire up your Key Vault to a Log Analytics workspace or similar to track audit events when in production.

(Video) How to integrate authentication [8 of 22] | Azure Tips and Tricks: Static Web Apps

Initial setup and deployment

First we are going to scaffold our web app, define our infrastructure and deploy to Azure without any auth in place. Once done, we will move onto the configuration of the app with auth.

Scaffold the web app

For the purposes of this post, I needed a simple static web app and used the SvelteKitskeleton project with the static adapter.

npm init svelte@next webappcd webappnpm install --save-dev @sveltejs/adapter-static@next

You need to update the default svelte.config.js to use the static adapter, see an example here.

Define the Azure Infrastructure

Resource Group

First, create an Azure resource group. For this tutorial I’m creating it manually from my terminal and Azure CLI

az group create -g rg-swa-sso -l northeurope


We will be deploying a Static Web App as well as a Key Vault using Bicep. I’ve split out the Bicep files to make them easier to work with as follows (filenames link to the code on GitHub)

In the main.bicepthere are the following highlights to make note of

  • Configuring the static web app
    • to have app settings that are Key Vault references (AAD_CLIENT_ID, AAD_CLIENT_SECRET)
    • to use the Standard sku
 1 2 3 4 5 6 7 8 9101112131415
module swa 'static-sites.bicep' = { name: 'deploy-swa-${appName}' params: { appSettings: { AAD_CLIENT_ID: refs.outputs.aadClientIdRef AAD_CLIENT_SECRET: refs.outputs.aadClientSecretRef } ... sku: { name: 'Standard' tier: 'Standard' } ... }}
  • And configuring the key vault to allow the static web app permissions to read from it
 1 2 3 4 5 6 7 8 91011121314151617
// keyVaultSecretsUserRole = '4633458b-17de-408a-b874-0445c86b69e6'module kv 'key-vault.bicep' = { name: 'deploy-kv-${appName}' params: { ... roleAssignments: [ { roleDefinitionId: keyVaultSecretsUserRole principalType: 'ServicePrincipal' principalId: swa.outputs.siteSystemAssignedIdentityId } ] ... }}

Deploy using GitHub

Deployment credentials

For a GitHub Action to be able to deploy to your resource group you need to have some form of deployment credentials. You can read about the options available here. I’ll be using the Service Principalapproach with Azure CLI.

az ad sp create-for-rbac --name "sp-swa-sso" \ --role Owner \ --scopes /subscriptions/{subscription-id}/resourceGroups/{resource-group-name} \ --sdk-auth

You will get a JSON output from this that you can then save as a GitHub secret with the name AZURE_CREDENTIALS.


  • Replace {subscription-id} with the ID of your subscription
  • Replace {resource-group-name} with the name of your resource group
  • I’ve made the service principal have Owner access to the resource group (so that I can assign roles).
(Video) How to Authenticate an Azure AD, Configure Azure Web App to Use Azure Active Directory

Workflow token

Azure Static Web Apps needs access to your workflow when deploying. For this we’ll set up a WORKFLOW_TOKEN secret using a GitHub personal access token with the workflow scope. Follow the instructions hereto create the token.

Github Action Workflow

With the above secrets in place, we can now create a workflow (mines in .github/workflows/deploy.yaml) which

  • specifies some environment variables for names, tags and locations
  • checks out the repo
  • logs into Azure using ${{ secrets.AZURE_CREDENTIALS }}
  • deploys to the resource group using the azure/CLI@v1 action
  • gets the API from the deployed static web app (so that we can deploy code to it)
  • deploys the webapp using the Azure/static-web-apps-deploy@v1 action

See the full workflow below.

 1 2 3 4 5 6 7 8 910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
name: Deploy Infra and Appon: push: branches: - main pull_request: types: [opened, synchronize, reopened, closed] branches: - mainenv: RESOURCE_GROUP: 'rg-swa-sso' RESOURCE_TAGS: '{"owner":"rick.roche", "app":"azure-swa-sso", "repo":"" }' APP_NAME: 'swa-sso' LOCATION: 'westeurope'jobs: deploy-infra: runs-on: ubuntu-latest steps: - name: Checkout Repository uses: actions/checkout@v2 - uses: actions/setup-node@v2 with: node-version: '16' - name: Azure Login uses: azure/login@v1 with: creds: ${{ secrets.AZURE_CREDENTIALS }} - name: Deploy Infra id: deploy_infra if: github.event_name != 'pull_request' uses: azure/CLI@v1 with: inlineScript: | az deployment group create \ --resource-group ${{ env.RESOURCE_GROUP }} \ --template-file ./infra/main.bicep \ --parameters \ appName='${{ env.APP_NAME }}' \ location='${{ env.LOCATION }}' \ repositoryUrl='' \ repositoryToken='${{ secrets.WORKFLOW_TOKEN }}' \ tags='${{ env.RESOURCE_TAGS }}'  - name: Get Static Web App API Key id: static_web_app_apikey if: github.event_name != 'pull_request' uses: azure/CLI@v1 with: inlineScript: | APIKEY=$(az staticwebapp secrets list --name 'stapp-${{ env.APP_NAME }}' | jq -r '.properties.apiKey') echo "::set-output name=APIKEY::$APIKEY"  - name: Deploy WebApp to Static Web App id: static_web_app_deploy if: github.event_name != 'pull_request' uses: Azure/static-web-apps-deploy@v1 with: azure_static_web_apps_api_token: ${{ steps.static_web_app_apikey.outputs.APIKEY }} repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments) action: 'upload' # Build configuration for Azure Static Web Apps: app_location: 'webapp' api_location: '' output_location: 'build' # relative to app_location

Finalising auth

At this stage you should have a GitHub workflow successfully deploying a Static Web App and a Key Vault to you resource group. You should also be able to browse to your web app using the generated URL (navigate into the Static Web App from the portal, and you will see your URL on the overview tab. e.g.


Your app won’t ask you to authenticate just yet!

To enable auth our next steps will be to

  • create an AAD app registration
  • add it’s client ID and secret as secrets in your key vault
  • configure the static web app to auto log you in if you aren’t already or your token has expired

AAD App Registration

An AAD app registration allows us to bind our application to a desired set of authentication flows and restrictions. Think of it as giving your application an identity inside AAD. Mark Foppen wrote a lovely articlethat may help demystify this a bit.

In this tutorial I’ll just be using Azure CLIto create one:

az ad app create --display-name aadapp-swa-sso \ --available-to-other-tenants false \ --identifier-uris api://stapp-swa-sso \ --reply-urls '' \ --native-app false


Ensure you set the --reply-urls to be the generated URL of your app with the /.auth/login/aad/callback suffix. This allows AAD to call your app once the auth flow has completed.

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

Once created, we need to create an application secret for the application. For this tutorial you can do this via the portal following the instructions here.

Copy the value of the secret as well as the Application (client) ID of the AAD app (found under the Overview section of the app).

Setup Key Vault Secrets

Once again, I’ve used the portal for this tutorial. You can follow the guide heresetting two secrets in your vault

  • aadClientId - this should be set to the Application (client) ID of your app registration
  • aadClientSecret - this should be set to the value of the application secret created above

Configuring the Static Web App

Configuration for Azure Static Web Apps is defined in the staticwebapp.config.jsonfile, which controls, among other things, authentication and authorisation.

I’ve put mine in the root of the webapp folderand set it to do the following to enable the auto-login SSO magic

  • enable custom auth with Azure Active Directory Version 2using the app settings references from earlier (AAD_CLIENT_ID, AAD_CLIENT_SECRET)

     1 2 3 4 5 6 7 8 91011
    "auth": { "identityProviders": { "azureActiveDirectory": { "registration": { "openIdIssuer": "", "clientIdSettingName": "AAD_CLIENT_ID", "clientSecretSettingName": "AAD_CLIENT_SECRET" } } }},
  • a navigationFallback routeto index.html

    "navigationFallback": { "rewrite": "index.html"},
  • specific rules for the apps routes

    • creates a /login route redirecting to AAD allowing anonymous access

      { "route": "/login", "rewrite": "/.auth/login/aad", "allowedRoles": ["anonymous", "authenticated"]},
    • blocks all providers except AAD

      { "route": "/.auth/login/github", "statusCode": 404},{ "route": "/.auth/login/twitter", "statusCode": 404},
      (Video) Understanding single sign-on (SSO) with Azure AD and Microsoft Teams
    • creates a /logout route redirecting to AAD allowing anonymous access

      { "route": "/logout", "redirect": "/.auth/logout", "allowedRoles": ["anonymous", "authenticated"]},
    • enforces auth for all other routes (/*)

      { "route": "/*", "allowedRoles": ["authenticated"]}
  • sets up a response override that if an unauthenticated user hits a page, they should be redirected to the /login route

    "responseOverrides": { "401": { "redirect": "/login", "statusCode": 302 }}

The combination of all of the above means that anyone accessing the site that isn’t logged in will be routed to the /login route which will ensure that the AAD auth flow is completed!

Finishing up!

Commit all your outstanding changes, push to GitHub and watch your action deploy… once done, access your web app in the browser, and it should redirect you to login

Initially you will need to provide admin consent for your AD app registration to read the logged-in user details

If all has gone well you should see the default page after login completes

And that’s it! Hope you enjoyed this tutorial and that it helps you setup SSO for your Static Web Apps!


(Video) Single sign-on (SSO) in Microsoft Teams tabs with Azure Active Directory

A reminder that all code is available on GitHub over here

Featured image background by Hello I’m Nikon Unsplash


What is the difference between Azure SSO and AD? ›

With password-based SSO, users sign in to the application with a username and password the first time they access it. After the first sign-on, Azure AD provides the username and password to the application.

Does Azure AD support single sign-on? ›

With Azure AD, users can conveniently access all their apps with SSO from any location, on any device, from a centralized and branded portal for a simplified user experience and better productivity.

How does Active Directory work with SSO? ›

In AD Mode, to get the user credentials, the SSO Agent makes a NetWkstaUserEnum call to the client computer over TCP port 445. The SSO Agent then uses the information it gets to authenticate the user for SSO. The SSO Agent uses only the first answer it gets from the computer.

How to implement single sign-on using Azure Active Directory? ›

To enable SSO for an application:
  1. Go to the Azure portal and sign in using one of the roles listed in the prerequisites.
  2. Browse to Azure Active Directory > Enterprise applications. ...
  3. In the Manage section of the left menu, select Single sign-on to open the Single sign-on pane for editing.
Mar 9, 2023

What is the difference between Active Directory and SSO? ›

With SSO, a user logs in once, and gains access to all systems without being prompted to log in again at each of them. Active Directory (AD) is a directory service that provides a central location for network administration and security.

Is Active Directory a part of SSO? ›

AD and SSO are very different; one is an on-prem directory service — the authoritative source of identities, the other a cloud-based, web app identity extension point solution that federates the identities from a core directory to web applications.

What is the benefit of single sign on Azure AD? ›

Azure AD's SSO feature enables users to login to multiple applications via a single pane, which includes both SaaS and on-premises applications. The SSO feature makes it easier for administrators to add new users and services without needing to set up credentials or security groups for each application or service.

What Azure license is needed for SSO? ›

Ensure the application is covered by the following licensing requirements: Azure AD licensing - SSO for pre-integrated enterprise applications is free. However, the number of objects in your directory and the features you wish to deploy may require more licenses.

What is the difference between SSO and federated SSO? ›

The key difference between SSO and FIM is while SSO is designed to authenticate a single credential across various systems within one organization, federated identity management systems offer single access to a number of applications across various enterprises.

How do I know if SSO is working? ›

Ensure that the Seamless SSO feature is still Enabled on your tenant. You can check the status by going to the Azure Active Directory > Azure AD Connect pane in the Azure portal. Click through to see all the AD forests that have been enabled for Seamless SSO.

How does SSO work for multiple domains? ›

About multi-domain support for SSO

To enable multi-domain support, all virtual servers must be on a single BIG-IP system and share the same access profile. All virtual servers must include all of the profiles that the access profile requires (for example, VDI, rewrite, server SSL, connectivity, and so on).

How do I enable SSO in web application? ›

Configure Single Sign-On for Web Applications Last Updated May 23, 2023
  1. In the SAC Admin Portal, create or edit a web application for which to configure SSO. ...
  2. Under Single Sign-On, select an authentication type: ...
  3. Save. ...
  4. (If using JWT Token) Enable user groups in JWT authentication:

What is the difference between single sign-on and same sign-on? ›

Single sign-on systems require a one-time authentication from the user. Once logged in, the user can access other web applications and services without re-authenticating themselves. Meanwhile, same sign-on requires the user to repeat the login process each time with the same authentication credentials.

What is the difference between API and SSO? ›

SSO vs API summary

SSO streamlines your user experience when accessing other applications. It's a set of Single Sign-On credentials associated with each user. API is all about data automation. It keeps your data in sync and automates pulling data out of a system to generate reports.

What are the 5 roles of Active Directory? ›

Currently in Windows there are five FSMO roles:
  • Schema master.
  • Domain naming master.
  • RID master.
  • PDC emulator.
  • Infrastructure master.
Feb 23, 2023

Which file is required to configure SSO on Active Directory? ›

Because the SSO Client installer for Windows is an MSI file, you can use an Active Directory Group Policy to automatically install it when users log on to your domain from a Windows computer.

What is the difference between SAML and OAuth in Azure Active Directory? ›

SAML is an Extensible markup language. On the other hand OAuth is the authorization protocol. It gives users the access to specific resources with a service provider or SP. It is based on JavaScript object Notation.

What is the difference between Azure SSO and LDAP? ›

What is the difference between SSO and LDAP? SSO is a convenient authentication method that allows users to access multiple applications and systems using just one login. LDAP is the protocol or communication process that will enable users to access a network resource through a directory service.

Does SSO require LDAP? ›

Furthermore, SSO is a large-scale system for granting access to systems, and LDAP is a component of the SSO system. SSO allows businesses to have centralized control over who has access to their systems and what level of access each person has.

Does Azure SSO use LDAP? ›

To communicate with your Azure Active Directory Domain Services (Azure AD DS) managed domain, the Lightweight Directory Access Protocol (LDAP) is used. By default, the LDAP traffic isn't encrypted, which is a security concern for many environments.

What are 3 benefits of single sign on? ›

Here are five Single Sign-On benefits:
  • Reduces Help Desk costs. SSO saves users from having to memorize a long list of passwords. ...
  • Improves customer satisfaction. ...
  • Boosts productivity. ...
  • Improves compliance and security capabilities. ...
  • Facilitates B2B collaboration.
Oct 24, 2022

What are the advantages of adding single sign on to a Web application? ›

Security and compliance benefits of SSO

SSO reduces the number of attack surfaces because users only log in once each day and only use one set of credentials. Reducing login to one set of credentials improves enterprise security. When employees have to use separate passwords for each app, they usually don't.

What are the advantages and disadvantages of single sign on? ›

Single Sign On (SSO) Advantages and Disadvantages
Streamlines user access to their applicationsUsing a single password increases the chances of password vulnerability
Reduces the load of memorising several passwordsWhen SSO fails, access to all related systems is lost
1 more row

What is the limit of Azure Active Directory free? ›

By default, a maximum of 50,000 Azure AD resources can be created in a single tenant by users of the Azure Active Directory Free edition. If you have at least one verified domain, the default Azure AD service quota for your organization is extended to 300,000 Azure AD resources.

Does Azure SSO require MFA? ›

Yes. Azure AD Multi-Factor Authentication is required at sign-in.

Does SSO require MFA? ›

MFA and SSO are not mutually exclusive. As a matter of fact, you can combine these two technologies to provide your users with high security while ensuring a good user experience. MFA can add an extra layer of protection to the SSO logins of your users.

What is the difference between SSO and non SSO? ›

While SSO enables users to log in with a single, secure password, non-SSO means that a user is required to log into each individual account that they are using each time they want to access it.

What is the difference between authentication and SSO? ›

Authentication: process of an entity (the Principal) proving its identity to another entity (the System). Single Sign On (SSO): characteristic of an authentication mechanism that relates to the user's identity being used to provide access across multiple Service Providers.

Does SSO expire? ›

Information and explanation about SSO password expiry. Your Single Sign-on password will expire in two circumstances: Automatically after a year.

Can I bypass SSO? ›

If SSO-only Authentication is enabled, it can ONLY be bypassed by a user with full-admin access logging in directly to TDAdmin.

Is SSO authentication or authorization? ›

Single sign-on (SSO) is an authentication method that enables users to securely authenticate with multiple applications and websites by using just one set of credentials.

Can you have two SSO accounts? ›

Yes, you can define multiple SSO configurations for accounts in your organization. You can define a default security policy that will be applicable to all admins/agents logging into any account that is part of the organization.

Can I use one SSL for multiple domains? ›

The simple answer is a resounding Yes! You absolutely can use one SSL certificate for multiple domains — or one SSL certificate for multiple subdomains in addition to domains.

Can you have more than one SSO? ›

You can mix the default login form with multiple SSO methods. If one SSO authentication method is configured, your users will be redirected to that method for authentication. Once you enable more than one authentication method, users will see a login page with different login options.

What type of SSO is Azure AD? ›

Azure Active Directory Seamless single sign-on (Azure AD Seamless SSO) automatically signs users in when they are on their corporate devices connected to your corporate network. When enabled, users don't need to type in their passwords to sign in to Azure AD, and usually, even type in their usernames.

Where is SSO token stored? ›

SSO stores a combination of (Guid, Token, Expiry) on the server, where Guid is a random guid and Expiry is something like 30 seconds.

What are SSO protocols? ›

Single Sign-On (SSO) is a protocol used to authenticate and authorize users to multiple applications using a single set of credentials. SSO is very convenient for users because they don't need to memorize multiple passwords and don't need to perform multiple login operations.

Does SSO work across browsers? ›

SSO is based on a session, and sessions are stored in cookies. Browsers don't share cookies, so you cannot do SSO between them.

How do I create my own SSO? ›

Setting Up SSO on your own
  1. Go to Admin Console > Enterprise Settings, and then click the User Settings tab.
  2. In the Configure Single Sign-On (SSO) for All Users section, click Configure.
  3. Select your Identity Provider (IdP). ...
  4. Upload your IdP's SSO metadata file. ...
  5. Click Submit.
Feb 26, 2020

What is the opposite of single sign-on? ›

Federated Identity (FID) refers to where the user stores their credentials. Alternatively, FID can be viewed as a way to connect Identity Management systems together. In FID, a user's credentials are always stored with the "home" organization (the "identity provider").

How do I know if SSO is enabled in Azure? ›

To verify that you have enabled Seamless SSO correctly:
  1. Sign in to the Azure portal with the Hybrid Identity Administrator account credentials for your tenant.
  2. In the left menu, select Azure Active Directory.
  3. Select Azure AD Connect.
  4. Verify that Seamless single sign-on is set to Enabled.
May 4, 2023

Is Azure AD an SSO provider? ›

With Azure AD, users can conveniently access all their apps with SSO from any location, on any device, from a centralized and branded portal for a simplified user experience and better productivity.

Does SSO use an API? ›

miniOrange allows you to authenticate your users via API authentication provider into multiple applications. This way, you can achieve Single Sign-On (SSO) into your applications where the users will need to authenticate themselves via your API Server only once and they can access all the configured applications.

What does Azure SSO do? ›

Single sign-on with Azure AD

Enabling SSO with Azure Active Directory (Azure AD) means users can sign-in once to access their Microsoft apps and other cloud, SaaS, and on-premises apps with the same credential.

What are the different types of SSO in Azure? ›

Azure Single Sign-On Options
  • OAuth/OpenID Connect—select the OIDC option based on OAuth 2.0 for applications that support this option. ...
  • SAML—this is the best option for applications that don't support OIDC/OAuth. ...
  • Password-based SSO—this option is suited to applications with HTML sign-in pages.

Which is better LDAP or SSO? ›

Integration: LDAP will usually be more recognizable to users across different applications. For example, using an SSO system will allow a user to access multiple platforms with web portals. LDAP, however, might be a key technology that syncs email contacts in an email client.

What are 3 benefits of SSO? ›

Some of the key benefits of SSO authentication for IT administrators and other IT team members include user adherence to password rules, user password reset call reduction, and administrative ability to track and control application access.

What is the key benefit of SSO? ›

Benefits of SSO

Single sign-on (SSO) in the enterprise refers to the ability for employees to log in just one time with one set of credentials to get access to all corporate apps, websites, and data for which they have permission. SSO solves key problems for the business by providing: Greater security and compliance.

What is the benefit of using a SSO? ›

Single Sign-On or SSO is an authentication process that allows consumers to log in to multiple independent applications with a single set of credentials. With SSO, users can access a suite of applications via one single login, irrespective of the platform, technology, or domain used.

What are the two basic user types in Azure Active Directory? ›

Azure AD only accepts two values for the UserType attribute: Member and Guest.

What protocol does Azure SSO use? ›

Azure AD supports many standardized protocols for authentication and authorization, such as SAML 2.0, OpenID Connect, OAuth 2.0, and WS-Federation. Azure AD also supports password vaulting and automated sign-in capabilities for apps that only support forms-based authentication.


1. How To: Authenticate Two .NET Apps with Azure AD SSO
(Azure Tutorials)
2. Using MSAL.js to integrate React Single-page applications with Azure Active Directory – July 2022
(Microsoft 365 & Power Platform Community)
3. Tutorial Add Azure AD login to a React app
(The Azure Cave)
4. Using AWS Single Sign-on to Integrate with Azure Active Directory
(Amazon Web Services)
5. Peerdom SSO - Microsoft Azure (Teams) Single Sign-On
6. Using MSAL and Azure AD in Single Page Applications to Access Azure Resources


Top Articles
Latest Posts
Article information

Author: Patricia Veum II

Last Updated: 11/01/2023

Views: 5426

Rating: 4.3 / 5 (44 voted)

Reviews: 91% of readers found this page helpful

Author information

Name: Patricia Veum II

Birthday: 1994-12-16

Address: 2064 Little Summit, Goldieton, MS 97651-0862

Phone: +6873952696715

Job: Principal Officer

Hobby: Rafting, Cabaret, Candle making, Jigsaw puzzles, Inline skating, Magic, Graffiti

Introduction: My name is Patricia Veum II, I am a vast, combative, smiling, famous, inexpensive, zealous, sparkling person who loves writing and wants to share my knowledge and understanding with you.