Broken Authentication Due to MSAL Library Upgrade

[ckabalan]

Looks like aa06a96 (Fix Dependabot MSAL package upgrade by updating compatible versions (#2632)) introduced an issue with authentication. When I update a deployed environment with this updated library or run the development server I get:

Unexpected Application Error!
uninitialized_public_client_application: You must call and await the initialize function before attempting to call any other MSAL API. For more visit: aka.ms/msaljs/browser-errors

According to the msal docs, and the link above this was an update they made to the library which requires an initialize phase. The relevant docs are here: AzureAD/microsoft-authentication-library-for-js - Errors - uninitialized_public_client_application

I've taken the 2025-08-07 code and rolled back the library versions to the original versions (3.26.1 and 2.2.0) and the issue resolved immediately, rolled it back forward (4.16.0 and 3.0.16) and it broke again.

I'm not an authentication or security expert, but cline recommended:

A minimal fix is to keep your single PublicClientApplication in layoutWrapper.tsx but defer all MSAL API calls until after you’ve called and awaited initialize(). Here’s the outline:

1. Inside layoutWrapper.tsx, after creating msalInstance, add a new state flag: • const [initialized, setInitialized] = useState(false);

2. Replace your top-level API calls with a single useEffect that does:

   useEffect(() => {
     const init = async () => {
       await msalInstance.initialize();                 // ← required
       // Account fallback
       if (!msalInstance.getActiveAccount() &&
           msalInstance.getAllAccounts().length > 0) {
         msalInstance.setActiveAccount(
           msalInstance.getAllAccounts()[0]
         );
       }
       // Event callback
       msalInstance.addEventCallback(…);
       // Check and set loggedIn
       setLoggedIn(await checkLoggedIn(msalInstance));
       setInitialized(true);
     };
     init();
   }, []);

3. In your render, show nothing or a spinner while !initialized, then once true wrap in <MsalProvider instance={msalInstance}>….

This change keeps everything in one file, simply defers MSAL calls until after initialize(), and prevents the “uninitialized_public_client_application” error.

I implemented the recommended changes and updated the libraries (package-lock.json lists msal-browser @ 4.20.0 and msal-react @ 3.0.18). Everything appears to work properly. I've attached my updated layoutWrapper.tsx.txt. I specifically didn't submit a PR because authentication is super critical and I'm not confident the code changes do not impose a security hole.

[pamelafox]

@ckabalan Thanks for letting me know, we dont have automated tests of the MSAL JS SDK due to the difficulty of mocking it out. I will tackle this.

[pamelafox]

I've made a fix in #2685 and verified locally and deployed. I've also asked some folks with MSAL/React experience to take a look.