Angular app using MSAL throws BrowserAuthError: no_account_error when accessing multi-region backend

Frontend
1

I’m working on an Angular 18 app that talks to a .NET 8 API backend. The backend is spread across three regions (AME, EMA, APA) to follow data rules. Each region has its own Azure SQL database.

Our setup is a bit complex:

  • Frontend is only in EMA
  • Backend is in all three regions
  • We use Azure AD with auth code flow and OpenID Connect

We recently switched from SessionStorage to MemoryStorage for security reasons. Now we’re seeing a weird error when the frontend tries to use AME or APA backends:

BrowserAuthError: no_account_error: No account object provided to acquireTokenSilent and no active account has been set.

This only happens with AME and APA backends. It works fine with the EMA backend.

Our MSAL config looks like this:

var globalConfig = {      
    tenant: 'demoapp.onmicrosoft.com',
    clientId: '<frontend client ID>',
    scope: ['EMA backend ID', 'AME backend ID', 'APA backend ID'],
    redirectUri: window.location.href,
    postLogoutRedirectUri: window.location.origin + '/',
    instance: 'https://login.microsoftonline.com/'
};

Anyone know how to fix this? Code examples would be super helpful!

2

This issue might be related to token caching and how MSAL handles accounts across different regions. When using MemoryStorage, tokens are not persisted between page reloads, which could explain why you’re encountering this error for non-EMA regions.

One potential solution is to implement a custom cache plugin that synchronizes the in-memory cache with a more persistent storage method, like localStorage, while still maintaining security. This way, you can preserve account information across page reloads.

Another approach is to explicitly handle account selection in your application. You can use the MSAL.js getAllAccounts() method to retrieve available accounts and setActiveAccount() to set the desired account before making token requests.

Lastly, ensure that your scopes are correctly configured for each backend region. You might need to adjust your token acquisition strategy to request region-specific scopes dynamically based on the target backend.

3

yo, Luke_Thunder! Have u checked if ur tokens are expiring? maybe the AME/APA ones are timing out faster. try refreshing em before each request. also, double-check ur CORS settings - sometimes that messes with cross-region calls. good luck mate!

4

hey, have u tried setting the active account right after signin? perhaps use acquireTokenSilent with region-specific scopes. maybe try explicitly passing the account to token request. what other approaches did u test?