Setting up Microsoft Entra External ID authentication for React MSAL app and .NET Core API with multiple account types

[Harry47]

I need help configuring authentication with Microsoft Entra External ID for my React frontend (using MSAL) and .NET Core Web API backend. I want to support multiple account types including organizational accounts, personal Microsoft accounts, and social logins like Google and Facebook.

Current backend configuration in appsettings.json:

{
  "ClientApp": {
    "AadApplicationId": "abc123de-45fg-67hi-89jk-lmnopqrst"
  },
  "Auth": {
    "EntraId": {
      "TenantId": "def456gh-78ij-90kl-12mn-opqrstuvw",
      "Authority": "https://mycompany.ciamlogin.com/",
      "ApiScope": "user_access",
      "ApplicationId": "ghi789jk-01lm-23no-45pq-rstuvwxyz",
      "ValidAudience": "ghi789jk-01lm-23no-45pq-rstuvwxyz"
    },
    "Provider": "EntraExternal"
  }
}

Frontend receives this config from /api/auth-settings endpoint:

{
    "provider": "EntraExternal",
    "authority": "https://mycompany.ciamlogin.com/def456gh-78ij-90kl-12mn-opqrstuvw",
    "clientId": "abc123de-45fg-67hi-89jk-lmnopqrst",
    "scope": "api://ghi789jk-01lm-23no-45pq-rstuvwxyz/user_access"
}

React MSAL configuration:

const createMsalConfiguration = (config: AuthSettings): Configuration => ({
    auth: {
        clientId: config.clientId,
        authority: config.authority,
        redirectUri: window.location.origin,
    },
})

// Usage
const msalApp = new PublicClientApplication(createMsalConfiguration(authSettings));
await msalApp.initialize();

Both applications are registered with account types set to support multitenant organizational directories and personal Microsoft accounts. I also enabled social identity providers in the External ID configuration.

My main questions:

1. What specific settings or changes do I need to make this work with all account types (organizational, personal, social) in Entra External ID?
2. Do I need special endpoints or policies configured in both the React app and API to handle this mixed authentication scenario?

Any help with the proper configuration would be awesome!

[FlyingEagle]

You’re mixing standard Entra ID patterns with External ID requirements - that won’t work for social logins. External ID needs user flows to handle multiple identity providers, and your MSAL config should point to these flows instead of the tenant authority directly. Create a sign-up/sign-in user flow in your External ID tenant that includes all your social providers (Google, Facebook) plus Microsoft accounts. Then update your authority to https://mycompany.ciamlogin.com/mycompany.onmicrosoft.com/B2C_1_your_flow_name. Also check your API permissions - External ID uses different scopes than regular Entra ID. The scope format needs to match what you’ve defined in your user flow, not just the application ID. Without proper user flows configured, social auth will fail even if you’ve enabled the providers at tenant level.

[Bob_Clever]

hey! your setup looks solid, but you might be missing the user flows config. you need to create specific sign-up/sign-in flows in Entra External ID that include your social providers. also, check your app registrations - make sure both frontend and api apps have the right redirect URIs. i’ve hit this exact issue before and that’s usually what causes problems.

[John_Fast]

Your authority URL looks wrong for External ID with social providers. You need user flow endpoints, not the generic tenant authority. For External ID with multiple account types, try something like https://mycompany.ciamlogin.com/mycompany.onmicrosoft.com/B2C_1_signupsignin where B2C_1_signupsignin is your user flow name. Double-check your API app registration’s audience config too - it needs to match exactly what your frontend requests in the scope. Social providers must be configured within the user flow policies, not just enabled at tenant level. I had the same auth failures until I switched to user flow specific endpoints.