30 C
Dubai
Saturday, November 23, 2024

Single Sign-on using Azure AD with Static Web Apps

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.

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.

Choose Organization / Repo / Branch / Build presets to Custom

Now the site is loaded using GitHub repo

Now lets create an enterprise application for Single Sign on

Assign users for enabling sso

Copy AZURE_CLIENT_ID

Add a Variable for the same

Copy AZURE_CLIENT_SECRET

Add a Variable for the same – Choose SAVE

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.

App User.Read Permissions

Grant Admin Consent

Redirect URIs based on your URL Add /.auth/login/aad/callback
https://zealous-grass-0ea7c0c03.2.azurestaticapps.net/.auth/login/aad/callback

Choose Web

Based on my URL – Changing the login route to Authenticated directory.

https://zealous-grass-0ea7c0c03.2.azurestaticapps.net/authenticated/

As soon as you update any files – you can see GitHub Actions takes places to deploy

Update Index.js on Sign in Button action

https://zealous-grass-0ea7c0c03.2.azurestaticapps.net/authenticated/

Now after login

Satheshwaran Manoharan
Satheshwaran Manoharanhttps://www.azure365pro.com
Award-winning Technology Leader with a wealth of experience running large teams and diversified industry exposure in cloud computing. From shipping lines to rolling stocks.In-depth expertise in driving cloud adoption strategies and modernizing systems to cloud native. Specialized in Microsoft Cloud, DevOps, and Microsoft 365 Stack and conducted numerous successful projects worldwide. Also, Acting as a Technical Advisor for various start-ups.

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

× How can I help you?