Make an example with React Router using loaders and actions (without React context)

[bsides]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

3.5.0

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

2.0.7

Public or Confidential Client?

Public

Description

I would like to have an example with React Router's new API with loaders and actions (createBrowserRouter). I'm asking this because loaders and actions don't have React's context and are almost framework agnostic - I can have my service in pure Javascript and not worry about what is consuming it. The services' API should be able to grab the user's token to make requests without any React's context, probably in a middleware interceptor for all api calls (axios, window fetch or any other).

I did it before with MSAL v2, but it doesn't seem to be possible anymore, as everything is dependable of the MSAL Provider (react's context). The example given have some really weird logic for navigation which is far from ideal and also doesn't use the new React Router's provider. Another thing, the example uses Create React App, something not being used for some time now by the whole community - not only that, it's not recommended by anyone anymore.

Also, is it ok to save MSAL instance inside a global store (zustand / redux / signal)?

Thank you in advance!

MSAL Configuration

No response

Relevant Code Snippets

No response

Identity Provider

None

Source

External (Customer)

[tnorling]

I did it before with MSAL v2, but it doesn't seem to be possible anymore, as everything is dependable of the MSAL Provider (react's context).

This hasn't changed between MSAL v2 and v3. Can you tell me a little more about what broke with the upgrade?

Ultimately msal-react is an optional wrapper providing convenient hooks and components to address common use cases. It's not feasible to offer these things without context but if you don't need these things you can use msal-browser directly and skip msal-react.

[bsides]

It's convenient to use msal-react for sure but it's also very common to leave services out of react context and still need the token. I understand the way it's done can't be used the way I'm proposing though, so I'll just leave it as a suggestion. It'd be better if it used a signal system internally so the object could be extracted and be used globally, that's all.

Having said that, is it possible to use msal-browser and msal-react together? I imagine it's the same problem, but just asking.

The way I use today is wrong, I initiate the classe twice and by the time it starts the second, they are synced with the same data (don't know how or why)... so I don't get any errors and everything works. I don't use the first initialization and can't export it anyway so must be because of that. It's also very hacky and will probably break at some point. I could try that "technique" as well, since I only use the second form - the first one is there only for the initialization.

[tnorling]

Having said that, is it possible to use msal-browser and msal-react together? I imagine it's the same problem, but just asking.

Yes, not only is it possible but it is mandatory. msal-react is a wrapper around msal-browser. msal-browser is required in order to use msal-react but msal-react is not required to use msal-browser.

I initiate the classe twice and by the time it starts the second

Instantiating PublicClientApplication more than once is not recommended. PublicClientApplication should always be instantiated outside the react component tree, then passed in to the MsalProvider, if using msal-react. This way you have access to PublicClientApplication both inside and outside Context. Please do note, however, if you are using msal-react all interactive requests (acquireTokenPopup/acquireTokenRedirect) should be done from inside Context as doing so outside may prevent state from updating and result in incorrect/buggy behaviors.

[microsoft-github-policy-service[bot]]

@bsides This issue has been automatically marked as stale because it is marked as requiring author feedback but has not had any activity for 5 days. If your issue has been resolved please let us know by closing the issue. If your issue has not been resolved please leave a comment to keep this open. It will be closed automatically in 7 days if it remains stale.

[UniMichael]

@tnorling sorry for necroing an older issue, but does this mean that msal-react has no official support for react-router-dom's Loader/Action API? Those only operate outside the React context. If so, is there any guidance on how to use MSAL (either msal-browser or msal-react) with the Loader/Action API?