question

Andrew-1027 avatar image
0 Votes"
Andrew-1027 asked OlehSharyk-2778 commented

Is It Necessary to Have So Much Code to Get an Access Token Throughout Your React App?

Hi. Reading through "https://docs.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.

azure-ad-msal
· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @Andrew-1027 , thanks for the question. Let me reach out to a few people and I'll let you know what I find out.

Best,
James

0 Votes 0 ·

Hi @Andrew-1027 , thank you for the feedback on our code docs. I reached out the doc author and am working with him to improve the document with your suggestions. For the moment we don't have any fixes for you, but if we do I'll post back here.

Please let me know if you have any questions.

If this answer helped you please mark it as "Verified" so other users can reference it.

Thank you,
James

0 Votes 0 ·

Hi @JamesHamil-MSFT, No, this doesn't address the problem at all. Essentially without a solution, B2C is not something that I can use with React and I will need to find an alternate provider.

0 Votes 0 ·

1 Answer

JamesHamil-MSFT avatar image
0 Votes"
JamesHamil-MSFT answered OlehSharyk-2778 commented

Hi @Andrew-1027 , I was given a document showing how to require an access token outside of a react component.

189894-react.png

Please let me know if this helps or if you have any questions.

If this answer helped you please mark it as "Verified" so other users can reference it.

Thank you,
James



react.png (199.9 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

HI @JamesHamil-MSFT , I have a similar problem described in code above. I need to receive accessToken and put it in axios interceptor.
Code from example doesn't have condition when msalInstance.acquireTokenSilent catch error
What is correct way to use acquireTokenPopup when we catch error InteractionRequiredAuthError?

I'm tried example from https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/token-lifetimes.md

 const tokenResponse = await msalInstance.acquireTokenSilent(silentRequest).catch(error => {
     if (error instanceof InteractionRequiredAuthError) {
         // fallback to interaction when silent call fails
         return msalInstance.acquireTokenPopup(request)
     }
 });

But after call function acquireTokenSilent I catch error:
interaction_required: AADB2C90077: User does not have an existing session and request prompt parameter has a value of 'None'.

and then after call function acquireTokenPopup I catch error:
BrowserAuthError: interaction_in_progress: Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API.

It's will be great to add to you example with using acquireTokenSilent , acquireTokenPopup and axios interceptor.






0 Votes 0 ·