Added comments

Author: aashiman

JavaScriptSPA/index.html

@@ -17,24 +17,10 @@
         </div>
     </div>
 <script>
-
-    // Browser check variables
-    var ua = window.navigator.userAgent;
-    var msie = ua.indexOf('MSIE ');
-    var msie11 = ua.indexOf('Trident/');
-    var msedge = ua.indexOf('Edge/');
-    var isIE = msie > 0 || msie11 > 0;
-    var isEdge = msedge > 0;
-    //If you support IE, our recommendation is that you sign-in using Redirect APIs
-    //If you as a developer are testing using Edge InPrivate mode, please add "isEdge" to the if check
-
-    // can change this to default an experience outside browser use
-    var loginType = isIE ? "REDIRECT" : "POPUP";
-
     var msalConfig = {
         auth: {
             clientId: 'Enter_the_Application_Id_here', //This is your client ID
-            authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",  //Default 
+            authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here" //This is your tenant info
         },
         cache: {
             cacheLocation: "localStorage",
@@ -46,23 +32,25 @@
         graphMeEndpoint: "https://graph.microsoft.com/v1.0/me"
     };
 
-    // this can be used for login or token request, however in more complex situations
-    // this can have diverging options
-    var request = {
+    // create a request object for login or token request calls
+    // In scenarios with incremental consent, the request object can be further customized
+    var requestObj = {
         scopes: ["user.read"]
     };
 
     var myMSALObj = new Msal.UserAgentApplication(msalConfig);
+
     // Register Callbacks for redirect flow
     myMSALObj.handleRedirectCallbacks(acquireTokenRedirectCallBack, acquireTokenErrorRedirectCallBack);
 
     function signIn() {
-
-        myMSALObj.loginPopup(request).then(function (loginResponse) {
-            //Login Success
+        myMSALObj.loginPopup(requestObj).then(function (loginResponse) {
+            //Successful login
             showWelcomeMessage();
+            //Call MS Graph using the token in the response
             acquireTokenPopupAndCallMSGraph();
         }).catch(function (error) {
+            //Please check the console for errors
             console.log(error);
         });
     }
@@ -72,15 +60,15 @@
     }
 
     function acquireTokenPopupAndCallMSGraph() {
-        //Call acquireTokenSilent (iframe) to obtain a token for Microsoft Graph
-
-        myMSALObj.acquireTokenSilent(request).then(function (tokenResponse) {
+        //Always start with acquireTokenSilent to obtain a token in the signed in user from cache
+        myMSALObj.acquireTokenSilent(requestObj).then(function (tokenResponse) {
             callMSGraph(graphConfig.graphMeEndpoint, tokenResponse.accessToken, graphAPICallback);
         }).catch(function (error) {
-            console.log(error.errorCode);
-            // Call acquireTokenPopup (popup window) in case of acquireTokenSilent failure due to consent or interaction required ONLY
+            console.log(error);
+            // Upon acquireTokenSilent failure (due to consent or interaction or login required ONLY)
+            // Call acquireTokenPopup(popup window) 
             if (requiresInteraction(error.errorCode)) {
-                myMSALObj.acquireTokenPopup(request).then(function (tokenResponse) {
+                myMSALObj.acquireTokenPopup(requestObj).then(function (tokenResponse) {
                     callMSGraph(graphConfig.graphMeEndpoint, tokenResponse.accessToken, graphAPICallback);
                 }).catch(function (error) {
                     console.log(error);
@@ -100,7 +88,6 @@
         xmlHttp.send();
     }
 
-
     function graphAPICallback(data) {
         document.getElementById("json").innerHTML = JSON.stringify(data, null, 2);
     }
@@ -113,16 +100,17 @@
         loginbutton.setAttribute('onclick', 'signOut();');
     }
 
-   // This function can be removed if you do not need to support IE
+   //This function can be removed if you do not need to support IE
    function acquireTokenRedirectAndCallMSGraph() {
-        //Call acquireTokenSilent (iframe) to obtain a token for Microsoft Graph
-        myMSALObj.acquireTokenSilent(request).then(function (tokenResponse) {
+        //Always start with acquireTokenSilent to obtain a token in the signed in user from cache
+        myMSALObj.acquireTokenSilent(requestObj).then(function (tokenResponse) {
             callMSGraph(graphConfig.graphMeEndpoint, tokenResponse.accessToken, graphAPICallback);
         }).catch(function (error) {
             console.log(error);
-            //Call acquireTokenRedirect in case of acquireToken Failure
+            // Upon acquireTokenSilent failure (due to consent or interaction or login required ONLY)
+            // Call acquireTokenRedirect
             if (requiresInteraction(error.errorCode)) {
-                myMSALObj.acquireTokenRedirect(request);
+                myMSALObj.acquireTokenRedirect(requestObj);
             }
         });
     }
@@ -148,6 +136,20 @@
             errorCode === "login_required";
     }
 
+    // Browser check variables
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf('MSIE ');
+    var msie11 = ua.indexOf('Trident/');
+    var msedge = ua.indexOf('Edge/');
+    var isIE = msie > 0 || msie11 > 0;
+    var isEdge = msedge > 0;
+
+    //If you support IE, our recommendation is that you sign-in using Redirect APIs
+    //If you as a developer are testing using Edge InPrivate mode, please add "isEdge" to the if check
+
+    // can change this to default an experience outside browser use
+    var loginType = isIE ? "REDIRECT" : "POPUP";
+
     // runs on page load, change config to try different login types to see what is best for your application
     if (loginType === 'POPUP') {
         if (myMSALObj.getAccount()) {// avoid duplicate code execution on page load in case of iframe and popup window.
@@ -157,7 +159,7 @@
     }
     else if (loginType === 'REDIRECT') {
         document.getElementById("SignIn").onclick = function () {
-            myMSALObj.loginRedirect(request);
+            myMSALObj.loginRedirect(requestObj);
         };
 
         if (myMSALObj.getAccount() && !myMSALObj.isCallback(window.location.hash)) {// avoid duplicate code execution on page load in case of iframe and popup window.