Merge pull request #2900 from juliemturner/version-4

Merge PR #2832
pnp · Jan 12, 2024 · f1b6dc9 · f1b6dc9
2 parents d066b6c + 3b879fc
commit f1b6dc9
Show file tree

Hide file tree

Showing 8 changed files with 175 additions and 111 deletions.
diff --git a/debug/serve/main.ts b/debug/serve/main.ts
@@ -1,4 +1,4 @@
-import { MSAL } from "@pnp/msaljsclient/index.js";
+import { MSAL, MSALOptions } from "@pnp/msaljsclient/index.js";
 import { spfi, SPBrowser } from "@pnp/sp";
 import "@pnp/sp/webs";
 import { settings } from "../../settings.js";
@@ -31,8 +31,8 @@ document.onreadystatechange = async () => {
             // Make sure to add `https://localhost:8080/spa.html` as a Redirect URI in your testing's AAD App Registration
             const sp = spfi().using(
                 SPBrowser({ baseUrl: settings.testing.sp.url}), 
-                MSAL(settings.testing.sp.msal.init, {scopes: settings.testing.sp.msal.scopes})
-            );
+                MSAL({configuration:settings.testing.sp.msal.init, authParams: {scopes: settings.testing.sp.msal.scopes}})
+            );          
 
             const r = await sp.web();
 

diff --git a/docs/concepts/auth-browser.md b/docs/concepts/auth-browser.md
@@ -1,42 +1,6 @@
 # Authentication in a custom browser based application
 
 We support MSAL for both browser and nodejs by providing a thin wrapper around the official libraries. We won't document the fully possible MSAL configuration, but any parameters supplied are passed through to the underlying implementation. To use the browser MSAL package you'll need to install the @pnp/msaljsclient package which is deployed as a standalone due to the large MSAL dependency.
+This library provides a thin wrapper around the [@azure/msal-browser](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-browser/docs) library to make it easy to integrate MSAL authentication in the browser.
 
-`npm install @pnp/msaljsclient --save`
-
-At this time we're using version 1.x of the `msal` library which uses Implicit Flow. For more informaiton on the msal library please see the [AzureAD/microsoft-authentication-library-for-js](https://github.com/AzureAD/microsoft-authentication-library-for-js#readme).
-
-Each of the following samples reference a MSAL configuration that utilizes an Azure AD App Registration, these are samples that show the typings for those objects:
-
-```TypeScript
-import { Configuration, AuthenticationParameters } from "msal";
-
-const configuration: Configuration = {
-  auth: {
-    authority: "https://login.microsoftonline.com/{tenant Id}/",
-    clientId: "{AAD Application Id/Client Id}"
-  }
-};
-
-const authParams: AuthenticationParameters = {
-  scopes: ["https://graph.microsoft.com/.default"] 
-};
-```
-
-## MSAL + Browser
-
-```TypeScript
-import { spfi, SPBrowser } from "@pnp/sp";
-import { graphfi, GraphBrowser } from "@pnp/graph";
-import { MSAL } from "@pnp/msaljsclient";
-import "@pnp/sp/webs";
-import "@pnp/graph/users";
-
-const sp = spfi("https://tenant.sharepoint.com/sites/dev").using(SPBrowser(), MSAL(configuration, authParams));
-
-// within a webpart, application customizer, or adaptive card extension where the context object is available
-const graph = graphfi().using(GraphBrowser(), MSAL(configuration, authParams));
-
-const webData = await sp.web();
-const meData = await graph.me();
-```
+Please see more scenarios in the [authentication article](../msaljsclient/index.md).
diff --git a/docs/concepts/auth-spfx.md b/docs/concepts/auth-spfx.md
@@ -51,25 +51,26 @@ Each of the following samples reference a MSAL configuration that utilizes an Az
 ```TypeScript
 import { SPFx as graphSPFx, graphfi } from "@pnp/graph";
 import { SPFx as spSPFx, spfi } from "@pnp/sp";
-import { MSAL } from "@pnp/msaljsclient";
-import { Configuration, AuthenticationParameters } from "msal";
+import { MSAL, MSALOptions } from "@pnp/msaljsclient";
+
 import "@pnp/graph/users";
 import "@pnp/sp/webs";
 
-const configuration: Configuration = {
-  auth: {
-    authority: "https://login.microsoftonline.com/{tenant Id}/",
-    clientId: "{AAD Application Id/Client Id}"
+ const configuration: MSALOptions = {
+  configuration:{
+      auth: {
+          authority: "https://login.microsoftonline.com/{tenant Id}/",
+          clientId: "{AAD Application Id/Client Id}"
+        },
+  },         
+  authParams: {
+    scopes: ["https://graph.microsoft.com/.default"] 
   }
 };
 
-const authParams: AuthenticationParameters = {
-  scopes: ["https://graph.microsoft.com/.default"] 
-};
-
 // within a webpart, application customizer, or adaptive card extension where the context object is available
-const graph = graphfi().using(graphSPFx(this.context), MSAL(configuration, authParams));
-const sp = spfi().using(spSPFx(this.context), MSAL(configuration, authParams));
+const graph = graphfi().using(graphSPFx(this.context), MSAL(configuration));
+const sp = spfi().using(spSPFx(this.context), MSAL(configuration));
 
 const meData = await graph.me();
 const webData = await sp.web();

diff --git a/docs/msaljsclient/index.md b/docs/msaljsclient/index.md
@@ -1,33 +1,48 @@
 # @pnp/msaljsclient
 
-This library provides a thin wrapper around the [msal](https://github.com/AzureAD/microsoft-authentication-library-for-js) library to make it easy to integrate MSAL authentication in the browser.
+This library provides a thin wrapper around the [@azure/msal-browser](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-browser/docs) library to make it easy to integrate MSAL authentication in the browser.
 
 You will first need to install the package:
 
 `npm install @pnp/msaljsclient --save`
 
-The configuration and authParams
+You may also need to install the MSAL library in typescript for future development with full type support:
+
+`npm install @azure/msal-browser --save-dev`
+
+The configuration
 
 ```TypeScript
+import type { MSALOptions } from "@pnp/msaljsclient";
 import { spfi, SPBrowser } from "@pnp/sp";
-import { MSAL } from "@pnp/msaljsclient";
+import { MSAL, getMSAL } from "@pnp/msaljsclient";
 import "@pnp/sp/webs";
-
-const configuation = {
-    auth: {
-        authority: "https://login.microsoftonline.com/common",
-        clientId: "{client id}",
+import "@pnp/sp/site-users/web";
+
+const options: MSALOptions = {
+    configuration: {
+        auth: {
+            authority: "https://login.microsoftonline.com/{tanent_id}/",
+            clientId: "{client id}",
+        },
+        cache: {
+            cacheLocation: "localStorage" // in order to avoid re-login after page refresh
+        }
+    },
+    authParams: {
+        forceRefresh: false,
+        scopes: ["https://{tenant}.sharepoint.com/.default"],
     }
 };
 
-const authParams = {
-    scopes: ["https://{tenant}.sharepoint.com/.default"],
-};
+const sp = spfi("https://tenant.sharepoint.com/sites/dev").using(SPBrowser(), MSAL(options));
 
-const sp = spfi("https://tenant.sharepoint.com/sites/dev").using(SPBrowser(), MSAL(configuration, authParams));
+const user = await sp.web.currentUser();
 
-const webData = await sp.web();
+// For logout later on
+const msalInstance = getMSAL();
+const currentAccount = msalInstance.getActiveAccount();
+msalInstance.logoutPopup({ account: currentAccount });
 ```
 
 Please see more scenarios in the [authentication article](../concepts/authentication.md).
-
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
     "description": "A JavaScript library for SharePoint & Graph development.",
     "devDependencies": {
         "@azure/identity": "3.3.0",
+        "@azure/msal-browser": "3.5.0",
         "@azure/msal-node": "1.18.3",
         "@microsoft/microsoft-graph-types": "2.40.0",
         "@pnp/buildsystem": "^4.0.0-beta10",
@@ -27,7 +28,6 @@
         "findup-sync": "5.0.0",
         "globby": "^14.0.0",
         "mocha": "10.2.0",
-        "msal": "1.4.18",
         "node-fetch": "3.3.2",
         "prettyjson": "1.2.5",
         "string-replace-loader": "3.1.0",