Hackforge Academy

Explanation

Authentication in a Micro Frontend architecture verifies the user's identity and determines whether the user can access the application. The Host commonly handles the main login flow while Micro Frontends consume the authenticated user information.

Code:

User
  ↓
Host Application
  ↓
Login / Identity Provider
  ↓
Authenticated User
  ↓
Product / Cart / Payment Micro Frontends

Explanation

A centralized authentication service allows multiple Micro Frontends to use the same login session. This provides a consistent authentication experience across the application.

Code:

                Auth Service
                     │
             ┌───────┼───────┐
             ↓       ↓       ↓
           Host   Product   Cart
                    │       │
                    └── User Session ──┘

Explanation

After authentication, the Host can provide information such as the current user or authentication status to Micro Frontends. The shared state should contain only the information that the applications actually need.

Code:

const user = {
  id: 101,
  name: 'John',
  role: 'customer'
};

<ProductApp user={user} />
<CartApp user={user} />

Explanation

Routes can be protected so that unauthenticated users cannot access restricted Micro Frontends or pages.

Code:

function ProtectedRoute({ user, children }) {
  if (!user) {
    return <Navigate to="/login" />;
  }

  return children;
}

Explanation

A secure Micro Frontend architecture separates authentication from individual business features. The Host manages the overall authentication flow while each Remote verifies the authentication information it receives before accessing protected resources.

Code:

                    User
                      ↓
               Host Application
                      ↓
              Authentication
                      ↓
               User Session
                      ↓
        ┌─────────────┼─────────────┐
        ↓             ↓             ↓
    Product App    Cart App     Payment App
        ↓             ↓             ↓
             Protected APIs