Hi. Reading through "https://learn.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-react#acquire-a-token" and you'll notice that in order to call an API, you need to get a token (make sense), however, think of this at scale. I was using a previous provider and was able to get a token inside of a (service) class in react, but now switching to MSAL, it seems that I have to use similar code as below in every single component, every single time I call an API...
instance.acquireTokenSilent(request).then((response) => {
callMsGraph(response.accessToken).then(response => setGraphData(response));
}).catch((e) => {
instance.acquireTokenPopup(request).then((response) => {
callMsGraph(response.accessToken).then(response => setGraphData(response));
});
});
I tried looking online, but I can't seem to find any solutions to avoid this. Is it not possible to do this OUTSIDE of every component? If the library ever changes, I wouldn't want to go into every component that calls an API and change all of this. Note, I am also oversimplifying the above code... it's much longer in a real life example.