'How to share up-to-date global context between Container app and micro-frontend app?

I am using webpack module federation plugin, and there are Container and Micro frontend apps (both are written on React). Based on the new requirement I should implement an authentication logic using a third-party service Auth0 and @auth0/auth0-react package.

This package uses context and provider to share the data (user information, token etc.) across components tree, so I wrapped my Container app with auth provider:

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

to access auth data anywhere in the components tree we can use useAuth0 hook:

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

Now, I am stuck, how can I access the up-to-date auth data/context in my micro frontends? Note: the auth context of the Container app will be updated asynchronously (after the '/token' request will be completed)

From what I've tried is to share AuthProvider as a service with my micro-frontend:

Container app webpack config:

name: 'container',
exposes: {
  './App': './src/App',
  './AuthenticationProvider': './src/AuthenticationProvider',
},

Micro front end app webpack config:

remotes: {
  container: 'container@http://localhost:8080/remoteEntry.js',
},

and then import { AuthenticationProvider } from 'container/AuthenticationProvider'; in my micro-frontend app.

Of course, it doesn't work as expected and the up-to-data will be in the Container application only.

The question is: How can I access the up-to-date context from the Container app in the micro-frontend app? Should I use some pub/sub system to notify my Micro frontend app about auth changes in the Container app? I would appreciate any ideas. thanks!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source