It is mandatory to use the login component in order to use the other components

Question

I'm developing an application in React, I'm using MSAL for the application login and once the user is authenticated I want to use the card component of a person but I can't make it work. I tell you what I have implemented in case I forgot some steps. I have added the following tag in the component itself:

<mgt-msal-provider client-id={process.env.REACT_APP_MSALCLIENTID}></mgt-msal-provider>

where that client I'm using on MSal to authenticate the user. I have also tried to define it in the builder itself:

Providers.globalProvider = new MsalProvider({clientId:process.env.REACT_APP_MSALCLIENTID});

Now if I put the login tag on the card component and click it, it works perfectly.

Is it possible to use the same msal of my application with the graph toolkit msal provider?

Answer 1

The toolkit components need to have a way to call the graph, and that's accomplished through a provider. If you are already authenticated with your own msal, you don't need to use the MsalProvider and you can create a SimpleProvider or create your own provider. The provider has two main purposes - to notify the component when the authenticate state changes (signed in/signed out), and to get accessToken for calling the graph with a provided scope. For example, at a minimum, you can do this:

Providers.globalProvider = new SimpleProvider((scopes) => { 
 //return accessToken for scopes using your msal instance
});

// when the user signs in, set the provider state to signedIn
// this will notify all components that the user is signed in 
// and they can call the graph
Providers.globalProvider.setState(ProviderState.SignedIn);