Authentication in micro frontend architecture using Azure B2C

Question

Hello,

I am trying to create a micro frontend architecture where there can be frontend apps that would connect to its own micro service backend. So, to try out the architecture, I created a React app (running on http://localhost:3000) and a ASP.NET MVC app (running on https://localhost:44312). The React app is acting as a container and calling the MVC app when the user clicks a button.

For authentication I am using Azure AD B2C which is working as a IdP and maintaining the user credentials and user flows. The primary authentication is happening on the React app (as it is acting as the container). Now, when I am calling the MVC app, its not automatically logging in. Here is the JS code that is loading the MVC app from the React app:

async loginToApp(app) {  
        var config = {  
            clientId: appConfig.auth.clientId,  
            authority: `https://${appConfig.auth.instance}/${appConfig.auth.domain}/${appConfig.auth.signUpSignInPolicyId}/`,  
            knownAuthorities: [appConfig.auth.instance],  
            redirectUri: app.appUri  
        }  
        const accounts = this.pca.getAllAccounts();  
        var account = null  
        if (accounts && accounts.length > 0) {  
            account = accounts[0];  
        }  
        if (account) {  
            config['loginHint'] = account.username;  
            config['nonce'] = account.idTokenClaims.nonce;  
        }  
        await this.pca.acquireTokenPopup(config);  
    }  

To maintain the flow through the apps, I created a local app registration in B2C with redirect URIs as following:

• MVC App - Web (https://localhost:44312/signin-oidc)
• React App - SPA (http://localhost:3000)

When I load the apps individually it is logging in properly and maintaining their own session. However, as explained in the scenario above, when I login to the React app and call the MVC app from within it, its asking me to login again, and post login its redirecting to the error page of the MVC app.

I read the article https://learn.microsoft.com/en-us/azure/active-directory-b2c/session-behavior?pivots=b2c-user-flow which says that B2C supports authentication in multiple apps but unfortunately I am not able to achieve it.

I have had some awesome guidance from the time I started working with Azure in this forum, please let me know if you have implemented a similar scenario and how I can overcome this hurdle.

Thank you in advance,
Sairath

Answer 1

Hello. Please ensure the cacheLocation setting is set to localStorage. The default is sessionStorage. EG:

   // authProvider.js  
   import { MsalAuthProvider, LoginType } from 'react-aad-msal';  
      
   // Msal Configurations  
   const config = {  
     auth: {  
       authority: 'https://login.microsoftonline.com/common',  
       clientId: '<YOUR APPLICATION ID>',  
       redirectUri: '<OPTIONAL REDIRECT URI>'  
     },  
     cache: {  
       cacheLocation: "localStorage",  
       storeAuthStateInCookie: true  
     }  
   };  

Please let me know if you need more help. If the answer was helpful to you, please accept it and, optionally, provide feedback so that other members in the community can benefit from it.