Issues with Azure Static Web App Custom Authentication and MSAL React

Question

Using Azure Static Web App with custom AAD authentication requires users to log in before accessing the website. The application is a single-page React application, utilizing MSAL React for automatic sign-in and token acquisition for multiple third-party backends.

Some users experience issues logging in, encountering an infinite loop of the select account prompt. MSAL logs indicate that the active account is never set after logging in via AAD; the user is redirected back to the application without setting an active account.

This issue appears intermittently, particularly affecting users who are logged into their own accounts in the web browser or may be using a work account on their computers. Since most users can log in successfully, the callback URLs seem properly configured in the app registration, and affected users can log in through incognito/inPrivate tabs.

The route setup in the static web app config is as follows:

  "routes": [
    {
      "route": "/*",
      "allowedRoles": [
        "authenticated"
      ]
    }
  ],

The responseOverrides property for redirecting unauthorized users to login is configured like this:

  "responseOverrides": {
    "401": {
      "statusCode": 302,
      "redirect": "/.auth/login/aad"
    }
  }

Any help or guidance is appreciated!