Gunakan msal-react dengan berbilang kejadian/penyedia (Azure AD dan Azure B2C)

Question

Saya mempunyai aplikasi React (menggunakan msal-react) yang menggunakan Azure B2C untuk pendaftaran/log masuk pengguna. Sekarang, saya juga perlu menambah log masuk untuk pengguna dalaman menggunakan Azure AD, tetapi saya tidak nampak apa-apa cara untuk menambah berbilang contoh msal dalam aplikasi yang sama. Saya mempunyai persediaan biasa:

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

Tetapi saya tidak tahu bagaimana untuk menambah pembekal lain untuk AzureAD. Menyatukan AzureAD ke dalam B2C bukanlah satu pilihan kerana perlu ada pemisahan yang lebih besar antara log masuk luaran dan dalaman.

Adakah sesiapa tahu sama ada ini boleh dicapai melalui msal-react atau adakah saya perlu melakukannya terus menggunakan msal.js?

Answer 1

Saya menghadapi situasi yang sama dan saya percaya saya mendapat satu langkah lebih jauh daripada apa yang anda huraikan dengan menggunakan dua kejadian berasingan dan dua pembekal berasingan (masing-masing membalut komponen yang dilindungi):

Buat laluan menggunakan React Router 6:

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

Walau bagaimanapun, perpustakaan msal-react nampaknya mencampurkan konteks kedua-dua kejadian ini, mungkin kerana ia menyimpan data dalam cache sesi. Saya tidak tahu bagaimana untuk memastikan log masuk berasingan. Bolehkah anda mencari penyelesaian yang baik untuk masalah asal?