Unable to get data from SharePoint with msal browser

[shreyakantesariya]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

3.20.0

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

4.4.0

Public or Confidential Client?

Public

Description

I need to get data from the SharePoint list with simple react application.
I am unable to get data from SharePoint with msal browser.

Error Message

I face below error

MSAL Logs

N/A

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

const msalConfig = {
    auth: {
        clientId: "<client-id>",
        authority: "https://login.microsoftonline.com/<tenant-id>/oauth2/token",
        redirectUri: "http://localhost:3000/",
    },
    cache: {
        cacheLocation: "localStorage", // Configure as per your requirement
        storeAuthStateInCookie: true,
    },
};

Relevant Code Snippets

const msalInstance = new PublicClientApplication(msalConfig);

const initializeMsal = async () => {
    if (!msalInstance.getAllAccounts().length) {
        await msalInstance.initialize();  // Make sure to initialize the instance
    }
};

const getAccessToken = async () => {
    await initializeMsal(); // Ensure MSAL is initialized
    const accounts = msalInstance.getAllAccounts();
    console.log("accounts", accounts);

    if (accounts.length > 0) {
        const request = {
            scopes: ["https://graph.microsoft.com/"],
            account: accounts[0],
        };

        try {
            const response = await msalInstance.acquireTokenSilent(request);
            return response.accessToken;
        } catch (error) {
            if (error instanceof InteractionRequiredAuthError) {
                return msalInstance.acquireTokenPopup(request).then((response) => {
                    return response.accessToken;
                });
            } else {
                console.error("Error acquiring token silently:", error);
            }
        }
    } else {
        const loginRequest = {
            scopes: ["https://graph.microsoft.com/"],
        };
        const loginResponse = await msalInstance.loginPopup(loginRequest);
        console.log("loginResponse", loginResponse);

        return loginResponse.accessToken;
    }
};

Reproduction Steps

Run react application
Open browser automatically and try to log in
Showing error while try to log in

Expected Behavior

Run react application
Open browser automatically and try to log in
Need to log in successfully

Identity Provider

Other

Browsers Affected (Select all that apply)

Chrome, Edge

Regression

"@azure/msal-browser": "^3.20.0"

Source

External (Customer)

[tnorling]

The error message describes both the problem and the solution. You are providing an incomplete scope value; https://graph.microsoft.com/ is only the resource, you need to include a specific scope as well, for example: https://graph.microsoft.com/User.Read