Single Sign-on using Azure AD with Static Web Apps, let’s create a Simple Azure AD Page, Enable Single Sign-on Using Azure AD.
Uploaded the same javascript below the GitHub repo.
Sign in, Redirects to Microsoft Login, and Logout Kills all the session.
![](https://www.azure365pro.com/wp-content/uploads/2022/11/image-35-1024x496.png)
![](https://www.azure365pro.com/wp-content/uploads/2022/11/image-34.png)
GitHub Repo Reference – azure365pro/AAD-StaticWebApp: Simple Login Logout Page using Azure AD in Static Web App (github.com)
Let’s create an Azure Static Web App, Deployment source is GitHub.
![](https://www.azure365pro.com/wp-content/uploads/2022/11/image-13.png)
Choose Organization / Repo / Branch / Build presets to Custom
![](https://www.azure365pro.com/wp-content/uploads/2022/11/image-14.png)
![](https://www.azure365pro.com/wp-content/uploads/2022/11/image-15-1024x449.png)
![](https://www.azure365pro.com/wp-content/uploads/2022/11/image-16-1024x541.png)
Now the site is loaded using GitHub repo
![](https://www.azure365pro.com/wp-content/uploads/2022/11/image-17-1024x568.png)
Now lets create an enterprise application for Single Sign on
![](https://www.azure365pro.com/wp-content/uploads/2022/11/image-18-1024x275.png)
Assign users for enabling sso
![](https://www.azure365pro.com/wp-content/uploads/2022/11/image-19-1024x444.png)
Copy AZURE_CLIENT_ID
![](https://www.azure365pro.com/wp-content/uploads/2022/11/image-20.png)
Add a Variable for the same
![](https://www.azure365pro.com/wp-content/uploads/2022/11/image-21-1024x544.png)
Copy AZURE_CLIENT_SECRET
![](https://www.azure365pro.com/wp-content/uploads/2022/11/image-22-1024x532.png)
Add a Variable for the same – Choose SAVE
![](https://www.azure365pro.com/wp-content/uploads/2022/11/image-23-1024x539.png)
Modify staticwebapp.config.json based on your environment, Maybe you can fork it and do a simple lab.
The appropriate tenant ID is updated in the JSON file.
![](https://www.azure365pro.com/wp-content/uploads/2022/11/image-24-1024x761.png)
App User.Read Permissions
![](https://www.azure365pro.com/wp-content/uploads/2022/11/image-25-1024x635.png)
Grant Admin Consent
![](https://www.azure365pro.com/wp-content/uploads/2022/11/image-36.png)
Redirect URIs based on your URL Add /.auth/login/aad/callback
https://zealous-grass-0ea7c0c03.2.azurestaticapps.net/.auth/login/aad/callback
![](https://www.azure365pro.com/wp-content/uploads/2022/11/image-28.png)
Choose Web
![](https://www.azure365pro.com/wp-content/uploads/2022/11/image-29-1024x398.png)
![](https://www.azure365pro.com/wp-content/uploads/2022/11/image-30-1024x428.png)
Based on my URL – Changing the login route to Authenticated directory.
https://zealous-grass-0ea7c0c03.2.azurestaticapps.net/authenticated/
![](https://www.azure365pro.com/wp-content/uploads/2022/11/image-31-1024x413.png)
As soon as you update any files – you can see GitHub Actions takes places to deploy
![](https://www.azure365pro.com/wp-content/uploads/2022/11/image-32-1024x322.png)
Update Index.js on Sign in Button action
https://zealous-grass-0ea7c0c03.2.azurestaticapps.net/authenticated/
![](https://www.azure365pro.com/wp-content/uploads/2022/11/image-33-1024x364.png)
Now after login
![](https://www.azure365pro.com/wp-content/uploads/2022/11/image-34.png)