Feature Request
Good to have an example demonstrating the recommended approach for handling authentication across Host and Remote applications using Module Federation within the Modern.js framework.
Problem Statement
In a micro-frontend architecture built with Modern.js and Module Federation, the host application needs to handle OAuth authentication (e.g., using Auth.js or similar with a provider like Okta or GitHub or anyother) and then conditionally load a remote micro-frontend upon successful login, passing the authenticated state/token to it.
Currently, there is no official sample that covers this specific combination of technologies and patterns, making implementation challenging.
Proposed Solution / Example Components
Example should demonstrate two main projects:
- Host App (Modern.js + Module Federation Consumer):
Integrates Auth.js (or a similar standard authentication library) configured with either GitHub or Okta (or both).
Checks the authentication status (session or token).
Upon successful authentication, dynamically loads a remote application component using loadRemote (or equivalent).
Crucially: Shows how to pass the authentication data (e.g., a JWT, access token, or user object) from the host to the remote component as a prop or through a shared context.
- Remote App (Modern.js + Module Federation Producer):
Exposes a component.
Receives and consumes the authentication data passed from the Host (e.g., to render user-specific data or make authenticated API calls).
Please suggest, if any point missing.
Feature Request
Good to have an example demonstrating the recommended approach for handling authentication across Host and Remote applications using Module Federation within the Modern.js framework.
Problem Statement
In a micro-frontend architecture built with Modern.js and Module Federation, the host application needs to handle OAuth authentication (e.g., using Auth.js or similar with a provider like Okta or GitHub or anyother) and then conditionally load a remote micro-frontend upon successful login, passing the authenticated state/token to it.
Currently, there is no official sample that covers this specific combination of technologies and patterns, making implementation challenging.
Proposed Solution / Example Components
Example should demonstrate two main projects:
Integrates Auth.js (or a similar standard authentication library) configured with either GitHub or Okta (or both).
Checks the authentication status (session or token).
Upon successful authentication, dynamically loads a remote application component using loadRemote (or equivalent).
Crucially: Shows how to pass the authentication data (e.g., a JWT, access token, or user object) from the host to the remote component as a prop or through a shared context.
Exposes a component.
Receives and consumes the authentication data passed from the Host (e.g., to render user-specific data or make authenticated API calls).
Please suggest, if any point missing.