@pnp/msaljsclient

This library provides a thin wrapper around the @azure/msal-browser 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

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

import type { MSALOptions } from "@pnp/msaljsclient";
import { spfi, SPBrowser } from "@pnp/sp";
import { MSAL, getMSAL } from "@pnp/msaljsclient";
import "@pnp/sp/webs";
import "@pnp/sp/site-users/web";

const options: MSALOptions = {
    configuration: {
        auth: {
            authority: "https://login.microsoftonline.com/{tanent_id}/",
            clientId: "{client id}",
        },
        cache: {
            claimsBasedCachingEnabled: true // in order to avoid network call to refresh a token every time claims are requested
        }
    },
    authParams: {
        forceRefresh: false,
        scopes: ["https://{tenant}.sharepoint.com/.default"],
    }
};

const sp = spfi("https://tenant.sharepoint.com/sites/dev").using(SPBrowser(), MSAL(options));

const user = await sp.web.currentUser();

// For logout later on
const msalInstance = getMSAL();
const currentAccount = msalInstance.getActiveAccount();
msalInstance.logoutPopup({ account: currentAccount });

Please see more scenarios in the authentication article.