use createPublicClientApplication() pattern

Author: algo-1

1-Authentication/0-sign-in-vanillajs/App/public/authPopup.js

@@ -1,18 +1,13 @@
 // Create the main myMSALObj instance
 // 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 myMSALObj;
+
+msal.PublicClientApplication.createPublicClientApplication(msalConfig)
+    .then((obj) => {
+        myMSALObj = obj;
+    })
+    .catch((error) => {
+        console.error("Error creating MSAL PublicClientApplication:", error);
     });
 
 let username = "";

1-Authentication/0-sign-in-vanillajs/App/public/authRedirect.js

@@ -1,19 +1,22 @@
 // Create the main myMSALObj instance
 // 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)
+msal.PublicClientApplication.createPublicClientApplication(msalConfig)
+    .then((obj) => {
+        myMSALObj = obj;
+        /**
+         * 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);
+        });
+    })
     .catch((error) => {
-        console.error(error);
+        console.error("Error creating MSAL PublicClientApplication:", error);
     });
-});
 
 let username = "";
 

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

@@ -1,18 +1,13 @@
 // Create the main myMSALObj instance
 // configuration parameters are located at authConfig.js
-const myMSALObj = new msal.PublicClientApplication(msalConfig);
+let myMSALObj;
 
-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);
-        });
+msal.PublicClientApplication.createPublicClientApplication(msalConfig)
+    .then((obj) => {
+        myMSALObj = obj;
+    })
+    .catch((error) => {
+        console.error("Error creating MSAL PublicClientApplication:", error);
     });
 
 let username = '';

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

@@ -1,18 +1,21 @@
 // Create the main myMSALObj instance
 // 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()
+msal.PublicClientApplication.createPublicClientApplication(msalConfig)
+    .then((obj) => {
+        myMSALObj = obj;
+        /**
+         * 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);
         });
+    })
+    .catch((error) => {
+        console.error("Error creating MSAL PublicClientApplication:", error);
     });
 
 let username = '';