Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Re: Use @azure/msal-browser instead of MSAL #2832

Closed
wants to merge 3 commits into from
Closed

Re: Use @azure/msal-browser instead of MSAL #2832

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6587ba4
Use @msal/browser instead of MSAL
datyin Nov 18, 2023
0ff5994
Updating PR
bcameron1231 Dec 19, 2023
9f581f4
Fix ESlint
bcameron1231 Dec 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions debug/serve/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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();

Expand Down
40 changes: 2 additions & 38 deletions docs/concepts/auth-browser.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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).
25 changes: 13 additions & 12 deletions docs/concepts/auth-spfx.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
43 changes: 29 additions & 14 deletions docs/msaljsclient/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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).

67 changes: 41 additions & 26 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.38.0",
"@pnp/buildsystem": "3.1.0",
Expand All @@ -26,7 +27,6 @@
"eslint": "8.49.0",
"findup-sync": "5.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",
Expand Down
Loading
Loading