clientAppDisplayName needs permission to access resources in your organization that only an admin can grant. Please ask an admin to grant permission to this app before you can use it

Issue

You created your own Single Page Applications (SPA) using ADAL.js to connect to SharePoint REST endpoints in order to retrieve and change data. Maybe you followed this article! However, while accessing your application, it fails with the below error:

 <clientAppDisplayName>
You can't access this application
<clientAppDisplayName> needs permission to access resources in your organization that only an admin can grant. Please ask an admin to grant permission to this app before you can use it.

Cause

The problem happens because your SPA is accessing your SharePoint site data, or maybe modifying the site content, whilst, the application does not have consent! Well, the full story about consent framework can be found here. In a nutshell, the flow goes as follows:

  • Your SPA needs permissions to access the SharePoint data, or change it. Hence, you, as a developer/admin, have to grant it the needed permissions. Some of these permissions Requires Admin as shown below:

  • You granted your application the needed permissions, the application is running, and a user is about to use it for the first time. If the application has not already acquired an access or refresh token, the application needs to go to Azure AD’s authorization endpoint to obtain an authorization code that can be used to acquire a new access and refresh token.
  • If the user is not already authenticated, they’ll be asked to sign in to Azure AD.
  • After the user has signed in, Azure AD will determine if the user needs to be shown a consent page. This determination is based on whether the user (or their organization’s administrator) has already granted the application consent. If consent has not already been granted, Azure AD will prompt the user for consent and will display the required permissions it needs to function. The set of permissions that is displayed in the consent dialog are the same as what was selected in the Delegated Permissions in the Azure portal.
  • After the user grants consent, an authorization code is returned to your application, which can be redeemed to acquire an access token and refresh token.
  • For delegated permission that requires admin, the consent have to be granted by the global tenant Administrator.

In a nutshell, adding a delegated permission to an application does not automatically grant consent to the users within the tenant, as it did in the Azure Classic Portal. The users must still manually consent for the added delegated permissions at runtime, unless the administrator clicks the Grant Permissions button from the Required Permissions section of the application page in the Azure portal.

Solution

For single page applications (SPA) using ADAL.js, granting explicit consent using the Grant Permissions button is currently required, as the access token is requested without a consent prompt, which will fail if consent is not already granted. Therefore, the below has to be done:

  • Access the URL https://aad.portal.azure.com/
  • From the left navigation click on More Services >> App registrations
  • Select your App, and then click on Required Permissions.
  • Click on Add button, and then Select an API.
  • Select Office 365 SharePoint Online (Microsoft.SharePoint), and click on Select button.

  • Tick the suitable permission(s) for your application under the category "Delegated Permissions", and save your changes.

N.B., if you select any permission that "Requires Admin", the below step has to be done by the tenant global admin. In addition, it has to be done by the administrator in all cases to be applied on all users.

  • Click Grant Permissions button .

  • Click Yes.

 

Reference: /en-us/azure/active-directory/develop/active-directory-integrating-applications