Cannot authenticate with SSO between multiple web apps with Azure B2C and MSAL.js Angular

We are building multiple web applications that use Azure B2C user flows for authentication. They are hosted on our servers within the same domain, but different subdomains to differentiate them. The tech stack varies a bit between the apps, but for now, let's focus on two that are both based on Angular. We have configured the apps and their respective APIs to be authenticated via a single Azure B2C sign-in policy using the MSAL.js node package, and taken individually, they authenticate and work just fine (well, mostly, but that's another issue all together). Our issue is that, based on how we understand Azure B2C to handle SSO, a user should be able to sign-in to one app, and move seamlessly to the other app without having to sign-in again, but that is not the case. Switching to the other app shows that the user is not signed in and is prompted with the login page if they attempt any tasks that require authorization, and that is not the behavior we want.

To better understand MSAL.js and to remove any implementation discrepancies that might cause an issue, I followed this tutorial from Microsoft Learn to setup a sample Angular app that authenticates with B2C: https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-authentication-sample-angular-spa-app

Since the sample app listed in the tutorial is archived, I used this one instead, but I otherwise followed the tutorial to a T: https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v3-samples/angular-b2c-sample-app

I duplicated the code (both the web app and the web API) so that we had two identical yet separate web apps, changing only the config values.

Within our Azure B2C settings in the Azure Portal, I registered both the web app and API for each of the app instances (a total of four app registrations), modifying settings like Redirect URI to match the separate instances, but otherwise sticking to the tutorial instructions (later I tried to see if I pointed both app instances to the same app registration, i.e. same client ID, would help, but no such luck).

I run both of the web apps and APIs locally and navigate to the first instance in my browser (via http://localhost:4200). I sign in and am able to see my user claims on the page. Great. In the same tab (or different, it doesn't seem to matter), I navigate to the localhost port of the second instance, and I am not logged in. I can sign in just as well, but the two sessions seem entirely disconnected from each other. And for the record, if I open up the same app in different tabs, and sign-in/out of one, the other automatically refreshes to match, which is how I imagine the SSO between the separate app instances is supposed to work, but it just doesn't.

And just to be extra sure, I ran the same test using the sample B2C instance specified in the sample app instead of our own B2C instance, and it worked. I did have to press the login button again when I navigated to the second app instance, but it authenticated me without prompting me to login, which tells me that there's something about the way our B2C is configured as opposed to anything to do with the client-side code.

I've also been referring to this Microsoft Learn page concerning SSO with MSAL.js: https://learn.microsoft.com/en-us/entra/identity-platform/msal-js-sso

I've tried seeing if I just call the ssoSilent method before loginPrompt does something, but I just get this error message in the browser console.

Image of SSO error in browser console

Error: Uncaught (in promise): InteractionRequiredAuthError: interaction_required: AAB2C90077: User does not have an existing session and request prompt parameter has a value of 'None.

As I understand, the prompt parameter doesn't need a value because it is a SSO silent request, but the important thing is that it does not recognize my existing session.

With that said, I do have some specific questions:

1. If we want to maintain SSO in this way, do all of our apps need to be registered individually in Azure B2C, or should they be registered together under the same client ID? We started with separate registrations, but sharing a single registration between multiple sites did not seem to help.
2. Do the apps having different subdomains but the same domain (i.e. app1.mywebsite.com and app2.mywebsite.com) make a difference? I would think not, but the documentation I've read seems unclear. Anyway, my recent tests on localhost seem to rule this out as a factor, but the apps do have separate port numbers, so maybe that makes a difference? I don't know.

I know I haven't said much about how our B2C user flows and app registrations are set up, but most everything of concern uses the out-of-the-box settings. I can share more details as requested (censoring personal details, of course).

Please let me know if you have any suggestions or questions. We're still trying to get acclimatized to Azure B2C. Thanks.

I finally got it to work, but in my sample apps and the web apps. The answer was not straightforward, so I'll try to explain it as best as I can for anyone who finds this later.

Basically, our B2C user flow used an API Connection to add an additional value to the user claims before the token is issued after signup/sign in. Our API method was configured to always expect the email claim as a field in the request body, but there are some cases, namely, switching from one subdomain to another, where the email claim is not returned. You can read this post for more information about why that happens.

Because the expected field was missing, the API method errored out. The errors did not get logged properly, so it was hard to tell why the error was happening. The solution was to manually check if the email claim was in the request body and handle it appropriately. I hope that helps anyone who experiences something similar.