Share global context that will be updated asynchronously from host to child app

[SergiuszMinsk]

Hi everyone! I am using a third-party service Auth0 and @auth0/auth0-react npm package to set up authentication in my micro frontends application. This approach uses context and provider to share the data (user information, token, etc.) across the components tree.

So, I wrapped my Container/Host application with the authentication provider:

<Auth0Provider
  domain={domain}
  clientId={clientId}
  redirectUri={window.location.origin}
  onRedirectCallback={onRedirectCallback}
>
  {children}
</Auth0Provider>

To access authentication data anywhere in the components tree the package provides us useAuth0 hook:

import { useAuth0 } from '@auth0/auth0-react';
  const {
    isLoading,
    isAuthenticated,
    error,
    user,
    loginWithRedirect,
    logout,
  } = useAuth0();

When the app is a first-time loaded, Container application makes the request to the external service to get the auth data and updates its context. Now I have an up-to-date authentication context inside my Container application. But now I am stuck on how can I get an up-to-date auth context inside my Micro-frontend app? Should I use some pub/sub system to notify my Micro frontend app about auth changes in the Container app? I've researched all the examples from the module-federation examples repository, but I didn't find a situation like this. I would appreciate any ideas. thanks in advance.

[Amirko28]

I'm not 100% sure about this, but I think you can share the Context between the host and the child app by passing the Context instance that was created in the host:
const Auth0Context = React.createContext(defaultValue)

to the child app as a prop, and then re-declare the provider inside the child app like this:
<Auth0Context.Provider value={value}> ... </Auth0Context.Provider>

[nkalinov]

@ScriptedAlchemy Can you explain why the redeclaration is needed?
The same can be seen in redux-reducer-injection (https://github.com/module-federation/module-federation-examples/blob/master/redux-reducer-injection/app2/src/RemoteApp.js#L42) but when I remove this second Provider (so only the Host Provider stays) it also works and I am a bit confused.
Thanks in advance!

[ScriptedAlchemy]

Probably something else isn't being shared as a singleton within that package

[ScriptedAlchemy]

Typically I use recoil for state distribution