'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 |
---|