Ref. also to this post of mine:Load scripts in sequence with import(), async and IIFE

When loadingMicrosoft Authentication Library (MSAL) for JavaScript, you have to make sure that the msal config is loaded, the msal object is intitiated andresolved, so that you can use it further in your code:

You must call and await the initialize function before attempting to call any other MSAL API

Setup

msal-config.js

console.log('<<<<<<<<<<<< msal-config.js start');// ...msal configuration data and init here...console.log('<<<<<<<<<<<< msal-config.js end')

main.js

console.log('<<<<<<<<<<<< main.js start');// ...msal queries here...console.log('<<<<<<<<<<<< main.js end')

Stardard way

Usually you would set it like this in your html:

<scripttype="module"src="/msal-config.js"></script><scripttype="module"src="/main.js"></script>

That's what we have as a result (refreshed 3 times):

We see thatmain.js is called beforemsal-config.js is finished which typicallygives unexpected results in your logic.

Required way

Let's change to the following method:

<script>(async()=>{awaitimport('/msal-config.js');import('/main.js')})();</script>

Alternatively with Promise chaining:

<script>import('/msal-config.js').then(()=>import('/main.js'))</script>

Result (refreshed 3 times):