複数のインスタンス/プロバイダー (Azure AD および Azure B2C) で msal-react を使用する

Question

ユーザー登録/ログインに Azure B2C を使用する React アプリケーション (msal-react を使用) があります。ここで、Azure AD を使用して内部ユーザーのログインも追加する必要がありますが、同じアプリケーションに複数の msal インスタンスを追加する方法が見つかりません。通常のセットアップを行っています:

const msalInstance = 新しい PublicClientApplication(msalConfig);
<MsalProvider インスタンス={msalInstance}>
アプリの残りの部分
</MsalProvider>

しかし、AzureAD に別のプロバイダーを追加する方法がわかりません。外部ログインと内部ログインをより明確に分離する必要があるため、AzureAD を B2C にフェデレーションすることはオプションではありません。

これを msal-react 経由で実現できるか、それとも msal.js を使用して直接実行する必要があるか知っている人はいますか?

Answer 1

私もまったく同じ状況に遭遇しました。2 つの別個のインスタンスと 2 つの別個のプロバイダー (それぞれが保護されたコンポーネントをラップしている) を使用することで、あなたが説明した内容よりもさらに一歩進んだと思います。

React Router 6 を使用してルートを作成する:

{
    パス: '/ポータル'、
    要素：
        
            } />
        、
    子供たち： ...
}、
{
    パス: '/portalAdmin'、
    要素：
        
            } />
        、
    子供たち： ...
}

ただし、msal-react ライブラリは 2 つのインスタンスのコンテキストを混合しているように見えます。これは、おそらくデータをセッション キャッシュに保存するためです。ログインを別々に保つ方法がわかりません。元の問題に対する良い解決策を見つけることができますか?