Como construir microfrontends com Angular, Module Federation e autenticação JWT

Microfrontends com Angular e Module Federation funcionam quando cada remoto tem dono, contrato de rota e autenticação compartilhada sem duplicar sessão. Sem isso, você só fragmenta o bundle.

Arquitetura host + remotes

┌──────── Shell (host) ────────┐
│ Auth · Layout · Router       │
│  ┌──────┐ ┌──────┐ ┌──────┐  │
│  │ MFE1 │ │ MFE2 │ │ MFE3 │  │
│  └──────┘ └──────┘ └──────┘  │
└──────────────────────────────┘

Module Federation

O host declara remotes; cada remote expõe um ou mais módulos. Shared dependencies (Angular, RxJS) precisam de versão alinhada para evitar duplicação e quebra de injectors.

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: "accounts",
      filename: "remoteEntry.js",
      exposes: {
        "./Routes": "./src/app/remote.routes.ts",
      },
      shared: {
        "@angular/core": { singleton: true, strictVersion: true },
        "@angular/router": { singleton: true, strictVersion: true },
        "rxjs": { singleton: true, strictVersion: true },
      },
    }),
  ],
};

Autenticação JWT entre host e remotes

1. O host realiza login e armazena tokens em storage seguro alinhado à política do produto
2. Um AuthService singleton compartilhado (ou token broker) expõe access token aos remotes
3. Interceptors HTTP nos remotes leem o mesmo contrato — não reimplementam login
4. Refresh token fica no host; remotes apenas sinalizam 401 para reauth

export interface AuthSession {
  accessToken: string;
  expiresAt: number;
  scopes: string[];
}

export abstract class AuthFacade {
  abstract session$: Observable<AuthSession | null>;
  abstract getAccessToken(): Promise<string | null>;
  abstract logout(): void;
}

Segurança

• Remotes só carregam de origens confiáveis (SRI/CSP quando aplicável)
• Escopos JWT por jornada; UI esconde, API autoriza
• Evite localStorage para refresh tokens em contextos de alto risco sem mitigação
• Versionamento de contratos de eventos entre shell e remotes

Armadilhas

• Duplicar Angular no bundle por shared mal configurado
• Acoplar remotes via imports profundos em vez de contratos públicos
• CSS global conflitante sem design tokens
• Deploy independente sem compatibilidade de contrato