将 msal-react 与多个实例/提供程序（Azure AD 和 Azure B2C）结合使用

Question

我有一个使用 Azure B2C 进行用户注册/登录的 React 应用程序（使用 msal-react）。现在，我还需要使用 Azure AD 添加内部用户的登录名，但我没有看到任何方法可以在同一应用程序中添加多个 msal 实例。我有正常的设置：

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

但我不知道如何为 AzureAD 添加另一个提供程序。将 AzureAD 联合到 B2C 中并不是一种选择，因为外部登录和内部登录之间需要有更大的分离。

有谁知道这是否可以通过 msal-react 来实现，或者我必须直接使用 msal.js 来实现？

Answer 1

我遇到了完全相同的情况，我相信通过使用两个单独的实例和两个单独的提供程序（每个提供程序都包装受保护的组件），我已经比您描述的更进一步了：

使用 React Router 6 创建路由：

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

但是，msal-react 库似乎混合了这两个实例的上下文，可能是因为它将数据存储在会话缓存中。我还没弄清楚如何保持登录分开。您能为最初的问题找到一个好的解决方案吗？