Is msal 2.0 (msal-browser) auth code flow is supported with Azure AD B2C custom policies?

Question

I am trying to use e msal 2.0 (msal-browser) for my react app for authentication with Azure AD B2C Custom policy, I didn't any proper documentation or samples for the same

Answer 1

This sample should be useful to you, it uses Azure AD B2C + Custom Policies + MSAL.js 2.0 + Authorization Code flow.

<!-- The AAD Common Endpoint Claims Provider. Matches on the existence of AAD-Common in the claimsProvider collection -->
<ClaimsProvider>
  <DisplayName>Login with AAD OIDC</DisplayName>
  <TechnicalProfiles>
    <TechnicalProfile Id="AAD-OIDC">
      <DisplayName>Login with AAD (OIDC)</DisplayName>
      <Description>Login with AAD (OIDC)</Description>
      <Protocol Name="OpenIdConnect" />
      <OutputTokenFormat>JWT</OutputTokenFormat>
      <Metadata>
        <Item Key="METADATA">https://login.microsoftonline.com/common/v2.0/.well-known/openid-configuration</Item>
        <!-- TODO: Create multi-tenant App Registration and add client ID here -->
        <Item Key="client_id">xxxxx</Item>
        <Item Key="response_types">code</Item>
        <Item Key="scope">openid profile</Item>
        <Item Key="response_mode">form_post</Item>
        <Item Key="HttpBinding">POST</Item>
        <Item Key="UsePolicyInRedirectUri">false</Item>
        <Item Key="DiscoverMetadataByTokenIssuer">true</Item>
        <!-- TODO: Add the Tenant IDs of each Valid Token Issuer -->
        <!-- The key below allows you to specify each of the Azure AD tenants that can be used to sign in. Update the GUIDs below for each tenant. -->
        <Item Key="ValidTokenIssuerPrefixes">https://login.microsoftonline.com/xxxxx</Item>
        <Item Key="ClaimTypeOnWhichToEnable">claimsProvider</Item>
        <Item Key="ClaimValueOnWhichToEnable">AAD-Common</Item>
      </Metadata>
      <CryptographicKeys>
        <!-- TODO: Update the storage reference ID for the client secret of the Multi-Tenant App Registration Client -->
        <Key Id="client_secret" StorageReferenceId="B2C_1A_ADDMultiTenantAngularSPA" />
      </CryptographicKeys>
      <InputClaims>
        <!--pass the login_hint to Azure AD home realm discovery page to bypass email address entry again-->
        <InputClaim ClaimTypeReferenceId="signInName" PartnerClaimType="login_hint" />
        <!--Disable the prompt on the partner IdP to "Sign in with another account"-->
        <InputClaim ClaimTypeReferenceId="hsu" PartnerClaimType="hsu" DefaultValue="1" AlwaysUseDefaultValue="true" />
      </InputClaims>
      <OutputClaims>
        <OutputClaim ClaimTypeReferenceId="issuerUserId" PartnerClaimType="oid" />
        <OutputClaim ClaimTypeReferenceId="tenantId" PartnerClaimType="tid" />
        <OutputClaim ClaimTypeReferenceId="givenName" PartnerClaimType="given_name" />
        <OutputClaim ClaimTypeReferenceId="surName" PartnerClaimType="family_name" />
        <OutputClaim ClaimTypeReferenceId="displayName" PartnerClaimType="name" />
        <OutputClaim ClaimTypeReferenceId="authenticationSource" DefaultValue="socialIdpAuthentication" AlwaysUseDefaultValue="true" />
        <OutputClaim ClaimTypeReferenceId="identityProvider" PartnerClaimType="iss" />
        <OutputClaim ClaimTypeReferenceId="email" PartnerClaimType="email" />
      </OutputClaims>
      <OutputClaimsTransformations>
        <OutputClaimsTransformation ReferenceId="CreateRandomUPNUserName" />
        <OutputClaimsTransformation ReferenceId="CreateUserPrincipalName" />
        <OutputClaimsTransformation ReferenceId="CreateAlternativeSecurityId" />
        <OutputClaimsTransformation ReferenceId="CreateSubjectClaimFromAlternativeSecurityId" />
      </OutputClaimsTransformations>
      <UseTechnicalProfileForSessionManagement ReferenceId="SM-SocialLogin" />
      <EnabledForUserJourneys>OnItemExistenceInStringCollectionClaim</EnabledForUserJourneys>
    </TechnicalProfile>
  </TechnicalProfiles>
</ClaimsProvider>

Answer 2

(Moving from Comments to Answer)

MSAL.js 2.0 does not currently support Azure AD B2C for use with the PKCE authorization code flow. At this time, Azure AD B2C recommends using the implicit flow.

Please refer the Note in the document for more information and you can see in the GitHub lib it was stated as Not yet available for B2C.