Error when attempting to create an Entra External Directory and associate a App Service Web App to it

Question

I've been trying to add Entra External authentication to a new app I'm building.

I'm following https://learn.microsoft.com/en-us/azure/app-service/configure-authentication-provider-aad?tabs=external-configuration

Steps taken

1. Go to Web App
2. Choose Settings -> Authentication
3. "Add Identity Provider"
4. Select "Microsoft"
5. Choose "External Configuration"
6. App Registration - Choose "Create New App Registration"
7. Select a Tenant - I created this the first time I ran the wizard, every time after I have chosen the created tenant let's call it "Tenant X"
8. On Configure External Authentication
   1. Asks me to Authenticate
   2. I choose my global Admin account
   3. 
   4. The Next screen it dies.
   5. 
   Error Below
   1. { "error": { "code": null, "error": { "data": { "capturedErrors": [ { "message": "Error caught in error boundary", "metadata": { "area": "renderComponentIntoRoot", "error": { "message": "Cannot read properties of null (reading 'value')", "name": "TypeError", "stack": "TypeError: Cannot read properties of null (reading 'value')\n at Bt (https://afd-v2.hosting.portal.azure.net/registeredapps/Content/Dynamic/H9BoZ90rb0co.js:3:58118)\n at go (https://afd-v2.hosting.portal.azure.net/registeredapps/Content/Dynamic/H9BoZ90rb0co.js:3:136203)\n at mo (https://portal.azure.com/Content/Dynamic/_WrcBcpl8VJB.js:12:60338)\n at wi (https://portal.azure.com/Content/Dynamic/_WrcBcpl8VJB.js:12:119653)\n at vs (https://portal.azure.com/Content/Dynamic/_WrcBcpl8VJB.js:12:108805)\n at hs (https://portal.azure.com/Content/Dynamic/_WrcBcpl8VJB.js:12:108733)\n at ms (https://portal.azure.com/Content/Dynamic/_WrcBcpl8VJB.js:12:108596)\n at os (https://portal.azure.com/Content/Dynamic/_WrcBcpl8VJB.js:12:105737)\n at Vl (https://portal.azure.com/Content/Dynamic/_WrcBcpl8VJB.js:12:46695)\n at is (https://portal.azure.com/Content/Dynamic/_WrcBcpl8VJB.js:12:106241)" }, "errorInfo": { "componentStack": "\n at go (https://afd-v2.hosting.portal.azure.net/registeredapps/Content/Dynamic/H9BoZ90rb0co.js:3:135168)\n at ht (https://afd-v2.hosting.portal.azure.net/registeredapps/Content/Dynamic/H9BoZ90rb0co.js:3:50617)\n at N (https://afd-v2.hosting.portal.azure.net/registeredapps/Content/Dynamic/H9BoZ90rb0co.js:3:15789)\n at r (https://afd-v2.hosting.portal.azure.net/registeredapps/Content/Dynamic/H9BoZ90rb0co.js:3:145826)\n at s (https://portal.azure.com/Content/Dynamic/Qu8SkCtRv2c_.js:18:1421)\n at r\n at div\n at div\n at div\n at t.FocusRectsProvider (https://portal.azure.com/Content/Dynamic/ojAZRXgsESYB.js:294:273)\n at https://portal.azure.com/Content/Dynamic/ojAZRXgsESYB.js:150:477\n at https://portal.azure.com/Content/Dynamic/ojAZRXgsESYB.js:356:479\n at t (https://portal.azure.com/Content/Dynamic/ojAZRXgsESYB.js:314:430)\n at div\n at t.FocusRectsProvider (https://portal.azure.com/Content/Dynamic/ojAZRXgsESYB.js:294:273)\n at https://portal.azure.com/Content/Dynamic/ojAZRXgsESYB.js:201:437\n at t.ThemedFabric (https://portal.azure.com/Content/Dynamic/Sgg1qfUKEzxb.js:8:1585)" } } } ], "message": "The renderComponentIntoRoot component encountered an error while loading.", "metadata": { "area": "renderComponentIntoRoot" } } }, "message": "The renderComponentIntoRoot component encountered an error while loading.", "metadata": { "area": "renderComponentIntoRoot" } }, "shellProps": { "contentName": "EasyAuthCiamWizard.ReactView", "extName": "Microsoft_AAD_RegisteredApps", "sessionId": "a02152a8685a4144a2e8001bee445214" } }

Troubleshooting steps taken

• I can go to the new tenant by "Switching Directory"
• I have tried again in incognito mode, same issue
• I was able to create a User Flow directly in the new tenant, but can't get it to attach to my app
• To be honest I'm completely lost about what is going on. The error looks like a React error.

Any ideas?

Answer 1

@Edward Kenny It looks like you're encountering a client-side JavaScript error while trying to configure Microsoft Entra External authentication for your Azure App Service.

1. Try a Different Browser. It's possible that the issue is browser specific. Try using a different browser to see if the problem persists.
2. Check Permissions and Roles. Ensure that your global admin account has the necessary permissions to create app registrations and configure authentication in both the original and the new tenant.
3. Manual Configuration. If the wizard continues to fail, consider manually configuring the necessary settings in the Azure portal:
   • Manually create an app registration in the Azure AD tenant.
   • Configure the authentication settings directly in the Azure App Service settings.
   • Ensure that all necessary redirect URIs and permissions are correctly set up.
4. Examine Network Logs. Use the browser's developer tools (usually accessible with F12) to examine the network logs and console for any additional error messages or failed network requests that might provide more context about the issue.

By following these steps, you should be able to identify the root cause of the issue or at least gather more information to help resolve it.