[Proposal] Components should not automatically request graph permission and ask the user first

[nmetulev]

Description

Components should check whether the user has consented to the right scopes before making a graph call and tell the user that they need to consent before using the component.

Rationale

If a developer has not provided all the scopes ahead of time, the components force the user to consent when they are first loaded. If there are a lot of component on the page, the user will get prompted for consent for each permission by redirect or popup. This can happen multiple times per permission and the user can get stuck consenting to permissions without any way to cancel.

For example, adding an agenda component on the page, the agenda component will ask the user to consent for the calendar data. Once the user has consented, the agenda will use a person to show the attendees information. The person component will try to use the people api and force the user to consent to the people permissions. Once the user consents again, the person component might try to access to contacts api to find the user, forcing the user to consent to another permission. To make things more annoying, since there could be dozens of person components in the agenda, the user might get asked to consent for the same permissions multiple times in certain situations.

This can get annoying really quickly. The recommendation currently (and the correct way to handle this in production) is to ask for the scopes ahead of time in the provider - and this works well. However, this is not friendly towards new developers who are just trying out the toolkit and get stuck in these redirect/popup consents.

The proposal is to introduce a new breaking change that will prevent components from automatically redirecting to get the permission. Instead, the components should either have a view that inform the user that they need to consent to a number of scopes before they can view or interact with the data, or let the developer handle asking the user for permissions. If the user has not consented, component should handle this gracefully.

Preferred Solution

There are few things that could be done:

At the minimum components should not ask for permissions one at a time, and instead batch the permission requests. For example, the agenda component should ask the user for all the permissions it might need, including the ones used by sub components. However, this should be initiated by the user and should not be automatic.

To that effect, components could provide two methods of getting permissions:

1. Provide a read only property with all the scopes needed for the component to work based on the attributes/properties. The developer can pass these scopes to the provider to ask for permissions. This gives the developer flexibility on how to prompt the user for scopes.
2. Rich components such as agenda and tasks should have the option to render UI for the user to consent to the permissions. For example, the agenda component could render a button telling the user they need to consent to permissions and ask the user whether they'd like to do so.

Should we build a consent component?

Another possible solution could be to create a new consent component that is aware of the scopes required by the components on the page and render a button for the user to consent to all scopes.

<mgt-consent show-scopes></mgt-consent>

Similar to how the provider works as a singleton, the components on the page can report to the singleton consent service used by the consent component and render the right UI and ask the user to consent to all the scopes at once by asking them to click on the consent button.

[ghost]

Hello nmetulev, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌