Single-SPA + MSAL

Question

I am trying to understand how can i implement microfrontend arch (single-spa js) with msal .

When we are registering Application in the single-spa , should we put the MSALBrowser inside each sub route or send as a prop ? but wont that make multiple MSALbrowser instance and cause trouble ?

Answer 1

Make MSAL a shared dependency. Either put it in the imports map before your micro frontends

  <script type="systemjs-importmap">
    {
      "imports": {
        "msal": "PATH_TO_A_CDN_HOSTING_THE_COMPILED_BUNDLE_OF_MSAL", 
        "mfe1": "PATH_TO_A_CDN_HOSTING_MFE1_BUNDLE",
        ...
      }
    }
  </script>

or make a shared dependencies (documentation).