I'm trying to set up a modern authentication flow with Entra External ID (the newer CIAM replacement for Azure AD B2C) for my React web app (using the MSAL library) and an ASP.NET Core Web API. Both apps are registered in my Entra External ID tenant with supported account types set to:

• Accounts in any anizational directory (Any Microsoft Entra ID tenant - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)

I also want to enable social identities (e.g., Google, Facebook) via the External ID configuration.

My current configuration in backend appsettings.Development.json is:

{
  "Frontend": {
    "AadClientId": "206b2071-c4ea-421a-81fc-000000"
  },
  "Authentication": {
    "AzureAd": {
      "TenantId": "992b716b-8f0e-48df-af83-000000",
      "Instance": "/",
      "Scopes": "access_as_user",
      "ClientId": "87480de7-9960-49b9-8cf7-000000",
      "Audience": "87480de7-9960-49b9-8cf7-000000"
    },
    "Type": "AzureAd"
  }
}

My react frontend will receive this json instance from /authConfig anonimous endpoint from my backend (and this will be :

{
    "authType": "AzureAd",
    "aadAuthority": ";,
    "aadClientId": "206b2071-c4ea-421a-81fc-000000",
    "aadApiScope": "api://87480de7-9960-49b9-8cf7-000000/access_as_user"
}

My react will configure Msal like this:

const getMsalConfig = (authConfig: AuthConfig): Configuration => ({
    auth: {
        clientId: authConfig.aadClientId,
        authority: authConfig.aadAuthority,
        redirectUri: window.origin,
    },

getMsalConfig will be used like this (see link to webapp/src/index.tsx below)

msalInstance = new PublicClientApplication(AuthHelper.getMsalConfig(authConfig));
await msalInstance.initialize();

I am trying to make this app using all possible accounts I mentioned above.

.tsx

My questions are:

1. What modifications or settings do I need to ensure that the authentication flow supports anizational accounts, personal Microsoft accounts, and social identities in this Entra External ID scenario?
2. Are there any specific endpoints, policies, or configuration changes needed in both the frontend (React/MSAL) and the ASP.NET Core API to achieve this unified authentication flow?

Any guidance or reference articles on how to configure Entra External ID for this scenario would be greatly appreciated!

I'm trying to set up a modern authentication flow with Entra External ID (the newer CIAM replacement for Azure AD B2C) for my React web app (using the MSAL library) and an ASP.NET Core Web API. Both apps are registered in my Entra External ID tenant with supported account types set to:

• Accounts in any anizational directory (Any Microsoft Entra ID tenant - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)

I also want to enable social identities (e.g., Google, Facebook) via the External ID configuration.

My current configuration in backend appsettings.Development.json is:

{
  "Frontend": {
    "AadClientId": "206b2071-c4ea-421a-81fc-000000"
  },
  "Authentication": {
    "AzureAd": {
      "TenantId": "992b716b-8f0e-48df-af83-000000",
      "Instance": "https://myexternalid.ciamlogin/",
      "Scopes": "access_as_user",
      "ClientId": "87480de7-9960-49b9-8cf7-000000",
      "Audience": "87480de7-9960-49b9-8cf7-000000"
    },
    "Type": "AzureAd"
  }
}

My react frontend will receive this json instance from /authConfig anonimous endpoint from my backend (and this will be :

{
    "authType": "AzureAd",
    "aadAuthority": "https://myexternalid.ciamlogin/992b716b-8f0e-48df-af83-000000",
    "aadClientId": "206b2071-c4ea-421a-81fc-000000",
    "aadApiScope": "api://87480de7-9960-49b9-8cf7-000000/access_as_user"
}

My react will configure Msal like this:

const getMsalConfig = (authConfig: AuthConfig): Configuration => ({
    auth: {
        clientId: authConfig.aadClientId,
        authority: authConfig.aadAuthority,
        redirectUri: window.origin,
    },

getMsalConfig will be used like this (see link to webapp/src/index.tsx below)

msalInstance = new PublicClientApplication(AuthHelper.getMsalConfig(authConfig));
await msalInstance.initialize();

I am trying to make this app using all possible accounts I mentioned above.

https://github/microsoft/chat-copilot

https://github/microsoft/chat-copilot/blob/main/webapp/src/index.tsx

My questions are:

1. What modifications or settings do I need to ensure that the authentication flow supports anizational accounts, personal Microsoft accounts, and social identities in this Entra External ID scenario?
2. Are there any specific endpoints, policies, or configuration changes needed in both the frontend (React/MSAL) and the ASP.NET Core API to achieve this unified authentication flow?

Any guidance or reference articles on how to configure Entra External ID for this scenario would be greatly appreciated!

• asp-core
• msal-react
• microsoft-entra-external-id

1 Answer 1

The only changes you need are in the tenant.

Refer to this.

The other identity providers are on the menu on the left-hand side.