More than one userManager

[martenssa]

We have found that we get several instances of the userManager.
It feels that this is not the correct behaviour.
We have made a simple test application with just a button to make a signin.
Simply by browsing to the page we get these messages in the console window:

UserManager.ctor: monitorSession is configured, setting up session monitor
WebStorageStateStore.get user:https://my-host/:{clientId}
UserManager.ctor: monitorSession is configured, setting up session monitor
WebStorageStateStore.get user:https://my-host/:{clientId}
UserManager._loadUser: no user storageString
UserManager._loadUser: no user storageString
UserManager.getUser: user not found in storage
UserManager.getUser: user not found in storage
WebStorageStateStore.get user:https://my-host/:{clientId}
UserManager._loadUser: no user storageString
UserManager.getUser: user not found in storage
UserManager.ctor: monitorSession is configured, setting up session monitor
WebStorageStateStore.get user:https://my-host/:{clientId}
UserManager.ctor: monitorSession is configured, setting up session monitor
WebStorageStateStore.get user:https://my-host/:{clientId}
UserManager._loadUser: no user storageString
UserManager._loadUser: no user storageString
UserManager.getUser: user not found in storage
UserManager.getUser: user not found in storage

Our interpretation of this that we get four instances of the userManager (four .ctor).
Why? Could we do anything wrong?

[martenssa]

Managed to solve this problem on our own. Two mayor things:

First we learned that if you use the component React.StrictMode you always get two intiates when you start your application.
StrictMode gives you hints in the log that you follow recommendation and not use deprecated functions.
The component is only active in development environment.

Secondly we have a context object that forces components to reload as the the context object changes.
When this happened new instances of the UserManager was created.

Our solution is to create the UserManager in our code in index.js and send it as a property to App.jsx where it is used as a property to the AuthProvider.