This guide walks you through configuring a custom identity provider for a Static Web App to restrict access to your organization's users only.
Go to App registrations page in Entra. Click New Registration. Check that supported account types is set to Accounts in this organizational directory only. Select a name for your registration and click Register.
Navigate to your App Registration and go to Authentication blade. Under Platform configurations, click Add a platform.
Select Web platform. Set a redirect URI to https://yourstaticwebappurl.azurestaticapps.net/.auth/login/aad/callback. If you want to test your authentication locally with Static Web Apps CLI, add another redirect URI to https://localhost:4280/.auth/login/aad/callback. Then click Configure.
The authorization endpoint needs to be able to issue access tokens for the app. This guide assumes using the default Azure authentication flow (no MSAL), only access tokens need to be enabled. Select them and click Save.
Go to API permissions view in your app registration. Click Add a permission -> Microsoft Graph -> Delegated permissions -> Search for User.Read and select it. Click Add permissions. The result should look like this:
Go to Certificates & secrets in your app registration. Select New client secret. Set a description and expiry, and click Add. Copy the secret value for use in the next step.
Navigate to your Static Web App -> Environment Variables. Set two client variables:
- AZURE_CLIENT_ID (the client id of your app registration)
- AZURE_CLIENT_SECRET (value of the secret created in the previous step)
Click Apply.
In your staticwebapp.config.json, set the following properties:
"auth": {
"identityProviders": {
"azureActiveDirectory": {
"registration": {
"openIdIssuer": "https://login.microsoftonline.com/{your_tenant_id}/v2.0",
"clientIdSettingName": "AZURE_CLIENT_ID",
"clientSecretSettingName": "AZURE_CLIENT_SECRET"
}
}
}
},
"routes": [
{
"route": "/logout",
"statusCode": 302,
"redirect": "/.auth/logout"
},
{
"route": "/*",
"allowedRoles": ["authenticated"]
}
],
"responseOverrides": {
"401": {
"statusCode": 302,
"redirect": "/.auth/login/aad"
}
}
Insert your tenant id. Set routes and response overrides per your use case, these are just working defaults.
Run the configuration either locally or in Azure and verify you're able to login.