Use msal-react with multiple instances/providers (Azure AD and Azure B2C)

Question

I have a React application (using msal-react) that uses Azure B2C for user registration/login. Now, I also need to add logins for internal users using Azure AD, but I don't see any way to add multiple msal instances in the same application. I have normal setup:

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

But I don't know how to add another provider for AzureAD. Federating AzureAD into B2C is not an option as there needs to be greater separation between external and internal logins.

Does anyone know if this can be achieved via msal-react or do I have to do it directly using msal.js?

Answer 1

I ran into the exact same situation, and I believe I've gotten a step further than what you describe by using two separate instances and two separate providers (each wrapping a protected component):

Create routes using React Router 6:

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

However, the msal-react library seems to mix the context of the two instances, probably because it stores the data in the session cache. I haven't figured out how to keep the logins separate. Can you find a good solution to the original problem?