Microfrontend Architecture with Multiple Client IDs

[marcos-roberto-dev]

Core Library

MSAL.js (@azure/msal-browser)

Wrapper Library

Not Applicable

Public or Confidential Client?

Public

Description

Problem Description

We are facing a challenge with microfrontend applications where we have several distinct apps, each with their own client ID. Each app is designed to survive independently from its suite, which creates a complexity when they need to work together.

Current Scenario

• Multiple microfrontend applications (MFEs)
• Each MFE has its own client ID for authentication/authorization
• Each app can function independently
• We have a root application (shell) that contains multiple MFEs simultaneously

Question/Challenge

How can we properly handle authentication and client ID management in a microfrontend architecture where:

1. Each microfrontend has its own client ID
2. All microfrontends are loaded within a single shell/root application
3. Each microfrontend should maintain its independence

Specific Concerns

1. Authentication Flow: How should authentication be handled when multiple client IDs are present?
2. Token Management: Should tokens be shared across microfrontends or managed independently?
3. Security Boundaries: How to maintain proper security isolation between different client contexts?
4. User Experience: How to provide seamless authentication experience across all microfrontends?

Possible Solutions to Discuss

1. Centralized Authentication:

   • Use the shell application to handle authentication
   • Pass authentication context to child microfrontends

2. Federated Identity:

   • Each microfrontend handles its own authentication
   • Implement cross-app communication for auth state

3. Hybrid Approach:

   • Combination of centralized and distributed authentication

Environment

• Framework: Vue.js (based on current project structure)
• Architecture: Microfrontend
• Authentication: Multiple client IDs

Expected Outcome

We need guidance on:

• Best practices for handling multiple client IDs in a microfrontend architecture
• Recommended authentication patterns
• Implementation strategies that maintain both security and user experience
• How to handle token refresh and session management across microfrontends

Additional Context

This is particularly important as our microfrontends need to maintain their autonomy while providing a cohesive user experience when used together in the shell application.

Note

Please excuse me if this issue was created in the wrong place — I'm really in need of help. I have researched this topic extensively and couldn't find relevant information. Could someone please help me with this challenge? Thank you.

[github-actions]

Invalid Issue Template:
Please update the original issue and make sure to fill out the entire issue template so we can better assist you.