將 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 函式庫似乎混合了這兩個實例的上下文，可能是因為它將資料儲存在會話快取中。我還沒弄清楚如何保持登入分開。您能為最初的問題找到一個好的解決方案嗎？