Utilisez msal-react avec plusieurs instances/fournisseurs (Azure AD et Azure B2C)

Question

J'ai une application React (utilisant msal-react) qui utilise Azure B2C pour l'enregistrement/la connexion des utilisateurs. Maintenant, je dois également ajouter des connexions pour les utilisateurs internes utilisant Azure AD, mais je ne vois aucun moyen d'ajouter plusieurs instances msal dans la même application. J'ai une configuration normale :

const msalInstance = new PublicClientApplication(msalConfig);
<MsalProvider instance={msalInstance}>
Rest of app
</MsalProvider>

Mais je ne sais pas comment ajouter un autre fournisseur pour AzureAD. La fédération d'AzureAD en B2C n'est pas une option car il doit y avoir une plus grande séparation entre les connexions externes et internes.

Est-ce que quelqu'un sait si cela peut être réalisé via msal-react ou dois-je le faire directement en utilisant msal.js ?

Answer 1

J'ai rencontré exactement la même situation et je pense être allé plus loin que ce que vous décrivez en utilisant deux instances distinctes et deux fournisseurs distincts (chacun enveloppant un composant protégé) :

Créez des itinéraires à l'aide de React Router 6 :

{
    path: '/portal',
    element: 
        
            } />
        ,
    children: ...
},
{
    path: '/portalAdmin',
    element:
        
            } />
        ,
    children: ...
}

Cependant, la bibliothèque msal-react semble mélanger le contexte de ces deux instances, probablement parce qu'elle stocke les données dans le cache de session. Je n'ai pas compris comment séparer les connexions. Pouvez-vous trouver une bonne solution au problème initial ?