This content originally appeared on DEV Community and was authored by Andrew Elans
Ref. also to this post of mine: Load scripts in sequence with import(), async and IIFE
When loading Microsoft Authentication Library (MSAL) for JavaScript, you have to make sure that the msal config is loaded, the msal object is intitiated and resolved, 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:
<script type="module" src="/msal-config.js"></script>
<script type="module" src="/main.js"></script>
That's what we have as a result (refreshed 3 times):
We see that main.js is called before msal-config.js is finished which typically gives unexpected results in your logic.
Required way
Let's change to the following method:
<script>
(async () => {
await import('/msal-config.js');
import('/main.js')
})();
</script>
Result (refreshed 3 times):
This content originally appeared on DEV Community and was authored by Andrew Elans
Andrew Elans | Sciencx (2025-03-07T10:39:46+00:00) MSAL: await config load and do the rest. Retrieved from https://www.scien.cx/2025/03/07/msal-await-config-load-and-do-the-rest/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.