JavaScript sample update (#155)

* react-spa-code-update

* remove-files

* update-vanillajs-app

* update-changes

* update-README

* update-README

* update-README

* update-config

* update-auth-config

* udate-sample-to-fix-plus-upgrade

---------

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Author: OwenRichards1

vanillajs-spa/App/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "ms-identity-javascript-c1s1",
   "version": "1.0.0",
-  "description": "Vanilla JavaScript single-page application (SPA) using MSAL.js to authenticate users using Microsoft Entra ID",
+  "description": "JavaScript single-page application (SPA) using MSAL.js to authenticate users using Microsoft Entra ID",
   "main": "server.js",
   "scripts": {
     "start": "node server.js",
@@ -28,12 +28,14 @@
   },
   "homepage": "https://github.com/Azure-Samples/ms-identity-javascript-tutorial#readme",
   "dependencies": {
-    "@azure/msal-browser": "^2.37.0",
-    "express": "^4.18.2",
+    "express": "^4.20.0",
     "morgan": "^1.10.0"
   },
   "devDependencies": {
-    "jest": "^27.0.6",
+    "@azure/msal-browser": "^4.0.0",
+    "@types/jest": "^29.5.0",
+    "@types/express": "^4.17.3",
+    "@types/morgan": "^1.9.0",
     "nodemon": "^2.0.20",
     "supertest": "^6.1.4"
   },

vanillajs-spa/App/package.json

@@ -0,0 +1,96 @@
+// Browser check variables
+// 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
+const ua = window.navigator.userAgent;
+const msie = ua.indexOf("MSIE ");
+const msie11 = ua.indexOf("Trident/");
+const msedge = ua.indexOf("Edge/");
+const isIE = msie > 0 || msie11 > 0;
+const isEdge = msedge > 0;
+
+let signInType;
+let accountId = "";
+
+// Create the main myMSALObj instance
+// configuration parameters are located at authConfig.js
+const myMSALObj = new msal.PublicClientApplication(msalConfig);
+
+myMSALObj.initialize().then(() => {
+    // Redirect: once login is successful and redirects with tokens, call Graph API
+    myMSALObj.handleRedirectPromise().then(handleResponse).catch(err => {
+        console.error(err);
+    });
+})
+
+function selectAccount() {
+
+    /**
+     * See here for more info on account retrieval: 
+     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-common/docs/Accounts.md
+     */
+
+    const currentAccounts = myMSALObj.getAllAccounts();
+
+    if (!currentAccounts) {
+        return;
+    } else if (currentAccounts.length > 1) {
+        // Add your account choosing logic here
+        console.warn("Multiple accounts detected.");
+    } else if (currentAccounts.length === 1) {
+        username = currentAccounts[0].username
+        showWelcomeMessage(currentAccounts[0].username);
+        updateTable(currentAccounts[0]);
+    }
+}
+
+function handleResponse(resp) {
+    if (resp !== null) {
+        accountId = resp.account.homeAccountId;
+        myMSALObj.setActiveAccount(resp.account);
+        showWelcomeMessage(resp.account);
+    } else {
+            selectAccount();
+        } 
+    }
+
+async function signIn(method) {
+    signInType = isIE ? "redirect" : method;
+    if (signInType === "popup") {
+        return myMSALObj.loginPopup({
+            ...loginRequest,
+            redirectUri: "/redirect"
+        }).then(handleResponse).catch(function (error) {
+            console.log(error);
+        });
+    } else if (signInType === "redirect") {
+        return myMSALObj.loginRedirect(loginRequest)
+    }
+}
+
+function signOut(interactionType) {
+    const logoutRequest = {
+        account: myMSALObj.getAccountByHomeId(accountId)
+    };
+
+    if (interactionType === "popup") {
+        myMSALObj.logoutPopup(logoutRequest).then(() => {
+            window.location.reload();
+        });
+    } else {
+        myMSALObj.logoutRedirect(logoutRequest);
+    }
+}
+
+// This function can be removed if you do not need to support IE
+async function getTokenRedirect(request, account) {
+    return await myMSALObj.acquireTokenSilent(request).catch(async (error) => {
+        console.log("silent token acquisition fails.");
+        if (error instanceof msal.InteractionRequiredAuthError) {
+            // fallback to interaction when silent call fails
+            console.log("acquiring token using redirect");
+            myMSALObj.acquireTokenRedirect(request);
+        } else {
+            console.error(error);
+        }
+    });
+}

vanillajs-spa/App/public/auth.js

@@ -6,11 +6,10 @@
 const msalConfig = {
     auth: {
 
-        clientId: "Enter_the_Application_Id_Here", // This is the ONLY mandatory field that you need to supply
-        // WORKFORCE TENANT
-        authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here", //  Replace the placeholder with your tenant info
-        // EXTERNAL TENANT
-        // authority: "https://Enter_the_Tenant_Subdomain_Here.ciamlogin.com/", // Replace the placeholder with your tenant subdomain
+         // WORKFORCE TENANT
+         authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here", //  Replace the placeholder with your tenant info
+         // EXTERNAL TENANT
+         // authority: "https://Enter_the_Tenant_Subdomain_Here.ciamlogin.com/", // Replace the placeholder with your tenant subdomain
         redirectUri: '/', // You must register this URI on App Registration. Defaults to window.location.href e.g. http://localhost:3000/
         navigateToLoginRequestUrl: true, // If "true", will navigate back to the original request location before processing the auth code response.
     },
@@ -48,9 +47,10 @@ const msalConfig = {
  * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
  * For more information about OIDC scopes, visit: 
  * https://learn.microsoft.com/en-us/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
+ * https://learn.microsoft.com/en-us/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
  */
 const loginRequest = {
-    scopes: [],
+    scopes: ["User.Read"],
 };
 
 /**
@@ -69,4 +69,9 @@ if (typeof exports !== 'undefined') {
         msalConfig: msalConfig,
         loginRequest: loginRequest,
     };
+    module.exports = {
+        msalConfig: msalConfig,
+        loginRequest: loginRequest,
+    };
 }
+