{Solved} authorization_requestdenied error when querying graph API from Sharepoint Framework SPFx component.

Welcome to my blog. Today’s blog topic is going to be a little different from my regular topics which are usually on Power apps and Dynamics 365.

My blog today is about an error I faced from my SharePoint framework extensions controls (SPFx). Quite new to SPFx development but I am learning something new and liking it too.

So here I was building this SPFx control to query user profile data from graph api. And below is the query sent to the graph API.

`/users?$search="displayName:${filterText}" OR "mail:${filterText}" OR "department:${filterText}" OR "officeLocation:${filterText}"`

filterText is the search query of the user.

Also provided the below permissions. I need to show teams presence as well and hence the permission – Presence.Read.All. To query user details, the permission I used is User.ReadBasic.All.

"webApiPermissionRequests": [
      {
        "resource": "Microsoft Graph",
        "scope": "Presence.Read.All"
      },
      {
        "resource": "Microsoft Graph",
        "scope": "User.ReadBasic.All"
      }
    ]

All set and done. Now I inserted the SPFx webpart in my SharePoint page and when it ran, it gave me the below error.

authorization_requestdenied. Error Code: 403.

Let’s see where the problem was. The first issue was the permission “User.ReadBasic.All“. This gives permission to only read the basic profile information which contain the below properties.

• displayName
• givenName
• mail
• photo
• surname
• userPrincipalName

But if you search on properties other than these, like mobilePhone or officeLocation etc. you need to use the permission User.Read.All. You can learn more about this here.

Next we need to understand how are we querying the Graph API. When a user is interacting with the SPFx webpart and try to retrieve details of another user, users are using their Work or School account to retrieve information of other users from the API.

For that, we need to provide one more permission to the API which is UserAuthenticationMethod.Read. More details here.

My final set of webapi permissions looks like this.

"webApiPermissionRequests": [
      {
        "resource": "Microsoft Graph",
        "scope": "Presence.Read.All"
      },
      {
        "resource": "Microsoft Graph",
        "scope": "User.Read.All"
      },
      {

        "resource": "Microsoft Graph",
        "scope": "UserAuthenticationMethod.Read.All"
      }
    ]

I build and redeploy and everything worked fine.

Hope this helps! You will also like the below posts.

Debajit Dutta
Business Solutions MVP