serve & use correct version of msal-browser

Author: algo-1

2-Authorization/0-call-api-vanillajs/SPA/public/authPopup.js

@@ -2,6 +2,19 @@
 // configuration parameters are located at authConfig.js
 const myMSALObj = new msal.PublicClientApplication(msalConfig);
 
+myMSALObj.initialize().then(() => {
+    /**
+     * A promise handler needs to be registered for handling the
+     * response returned from redirect flow. For more information, visit:
+     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/initialization.md#redirect-apis
+     */
+    myMSALObj.handleRedirectPromise()
+        .then(handleResponse)
+        .catch((error) => {
+            console.error(error);
+        });
+    });
+
 let username = '';
 
 function selectAccount() {

2-Authorization/0-call-api-vanillajs/SPA/public/authRedirect.js

@@ -2,6 +2,19 @@
 // configuration parameters are located at authConfig.js
 const myMSALObj = new msal.PublicClientApplication(msalConfig);
 
+myMSALObj.initialize().then(() => {
+    /**
+     * A promise handler needs to be registered for handling the
+     * response returned from redirect flow. For more information, visit:
+     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/initialization.md#redirect-apis
+     */
+    myMSALObj.handleRedirectPromise()
+        .then(handleResponse)
+        .catch((error) => {
+            console.error(error);
+        });
+    });
+
 let username = '';
 
 /**

2-Authorization/0-call-api-vanillajs/SPA/public/index.html

@@ -7,10 +7,8 @@
     <title>Microsoft identity platform</title>
     <link rel="SHORTCUT ICON" href="./favicon.svg" type="image/x-icon">
     <link rel="stylesheet" href="./styles.css">
-    <!-- msal.min.js can be used in the place of msal.js; included msal.js to make debug easy -->
-    <script id="load-msal" src="https://alcdn.msauth.net/browser/2.31.0/js/msal-browser.js"
-        integrity="sha384-BO4qQ2RTxj2akCJc7t6IdU9aRg6do4LGIkVVa01Hm33jxM+v2G+4q+vZjmOCywYq"
-        crossorigin="anonymous"></script>
+    <!-- msal.min.js can be used in the place of msal-browser.js -->
+    <script src="/msal-browser.min.js"></script>
     <!-- adding Bootstrap 5 for UI components  -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

2-Authorization/0-call-api-vanillajs/SPA/server.js

@@ -13,6 +13,9 @@ app.use(morgan('dev'));
 // Setup app folders.
 app.use(express.static('public'));
 
+// serve msal-browser module
+app.use(express.static(path.join(__dirname, "node_modules/@azure/msal-browser/lib")));
+
 // set up a route for redirect.html
 app.get('/redirect', (req, res) => {
     res.sendFile(path.join(__dirname + '/public/redirect.html'));