Versión en EspañolES

Micro-Frontends Seguros: Magia de Autenticación en Dutch Railways

¡Sumérgete en una sesión llena de acción donde abrimos el capó de la plataforma empresarial de micro-frontends de Dutch Railways! Nos adentramos profundamente en los entresijos de la autenticación segura a través de aplicaciones distribuidas usando MSAL y OpenID Connect.

Mira en vivo cómo construimos una configuración de autenticación sólida como una roca que funciona sin problemas en múltiples aplicaciones. Observa Module Federation en acción, manejando dependencias compartidas como un campeón mientras mantiene todo bien asegurado.

Desde los dolores de cabeza de la implementación de MSAL hasta los flujos de tokens de OIDC: abordaremos los desafíos reales de frente. Te irás sabiendo cómo:

✓ Asegurar micro-frontends con autenticación MSAL

✓ Compartir estado seguro a través de los límites de la aplicación

✓ Manejar flujos de actualización de tokens como un profesional

✓ Mantener seguros tus módulos federados

¡Trae tus preguntas más difíciles sobre autenticación: esta sesión sin rodeos ofrece soluciones reales desde las trincheras!

This talk has been presented at React Summit US 2025, check out the latest edition of this React Conference.

micro-frontends

Peter Eijgermans

35 min

21 Nov, 2025

Comments

Video Summary and Transcription

Pieter Eigenmans discute Microfrontends, autenticación en Dutch Railways, Model Federation, OIDC y configuración de Kubernetes. La aplicación SporeViewer permite el seguimiento de trenes en tiempo real en los Países Bajos con múltiples aplicaciones en una pantalla. La transición de una arquitectura monolítica a modular permite el despliegue independiente de características y la utilización del marco de multifederación. La configuración de microfrontend implica dividir aplicaciones en componentes de front y back end, organizándolos en verticales utilizando diseño impulsado por el dominio. La construcción eficiente de frontend con module federation, Web Components y model federation mejora la velocidad y escalabilidad. Los desafíos de autenticación se abordan utilizando OIDC, integración de MSAL para la gestión de tokens y llamadas API seguras a través de bibliotecas MSAL. La configuración de Kubernetes permite una configuración de entorno versátil utilizando config maps para cargar archivos de configuración.

Available in English: Secure Micro-Frontends: Authentication Magic at Dutch Railways

Video transcription and chapters available for users with access.

Available in other languages:

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Escalando con Remix y Micro Frontends

Remix Conf Europe 2022

23 min

Escalando con Remix y Micro Frontends

Top Content

Adrien Baron

Creator of Tiny Frontend

This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.

remix javascript micro-frontends architecture

De Monolito a Micro-Frontends

React Advanced 2022

22 min

De Monolito a Micro-Frontends

Top Content

Ruben Casas

Postman

Microfrontends are considered as a solution to the problems of exponential growth, code duplication, and unclear ownership in older applications. Transitioning from a monolith to microfrontends involves decoupling the system and exploring options like a modular monolith. Microfrontends enable independent deployments and runtime composition, but there is a discussion about the alternative of keeping an integrated application composed at runtime. Choosing a composition model and a router are crucial decisions in the technical plan. The Strangler pattern and the reverse Strangler pattern are used to gradually replace parts of the monolith with the new application.

developer challenges micro-frontends micro frontends react case study

Micro-Frontends con React y Federación de Módulos Vite

React Advanced 2023

20 min

Micro-Frontends con React y Federación de Módulos Vite

Top Content

Giorgio Boa

Claranet

Microfrontends is an architecture used by big companies to split monolithic frontend applications into manageable parts. Maintaining a consistent look and feel across different microfrontends is a challenge. Sharing styles can be done through Vanilla CSS, CSS modules, or CSS in JS. JavaScript variables can be used in styles, but readability and runtime overhead are considerations. Sharing state in microfrontends can be achieved through custom events, broadcast channels, shared state managers, or custom PubSub implementations. Module federation with Vite allows for client composition and sharing dependencies. Configuration is similar to Webpack, and future work includes working on the QUIC framework.

react microservices module federation react micro-frontends micro frontends react build tools vite react microfrontend vite react module federation micro frontends react native vite

“Microfrontends” para móviles en React Native

React Advanced 2023

24 min

“Microfrontends” para móviles en React Native

Top Content

Mo Khazali

Theodo UK

Micro frontends are an architectural style where independent deliverable frontend applications compose a greater application. They allow for independent development and deployment, breaking down teams into feature verticals. React Native's architecture enables updating the JavaScript layer without going through the app store. Code Push can be used to deploy separate JavaScript bundles for each micro frontend. However, there are challenges with managing native code and dependencies in a micro frontend ecosystem for mobile apps.

react microservices react server components react native micro-frontends micro frontends react micro frontends react native

Microfrontends Federados a Gran Escala

React Summit 2023

31 min

Microfrontends Federados a Gran Escala

Top Content

Daniel Bolivar

Cozycore Engineer

This Talk discusses the transition from a PHP monolith to a federated micro-frontend setup at Personio. They implemented orchestration and federation using Next.js as a module host and router. The use of federated modules and the integration library allowed for a single runtime while building and deploying independently. The Talk also highlights the importance of early adopters and the challenges of building an internal open source system.

micro-frontends monorepos architecture case study

Compartir es Cuidar: ¿Cómo Deberían los Micro Frontends Compartir Estado?

React Summit 2022

23 min

Compartir es Cuidar: ¿Cómo Deberían los Micro Frontends Compartir Estado?

Top Content

Eliran Natan

Mentorship available

SquadX

Micro-frontends allow development teams to work autonomously and with less friction and limitations. Organizing teams around business concerns, in alignment with subdomains, rather than technical concerns, can lead to software that is split nicely and user stories falling under the responsibility of a single team. Having a logical backup or reference point is important for implementing microfrontends without breaking their isolation. Microfrontends can communicate with each other using the window object and custom events. Microfrontends should be kept isolated while maintaining communication through various approaches.

micro-frontends architecture best practices

Workshops on related topic

Micro Frontends with Module Federation and React

JSNation Live 2021

113 min

Micro Frontends with Module Federation and React

Top Content

Workshop

Alex Lobera

¿Alguna vez trabajaste en una aplicación monolítica de Next.js? Yo sí, y escalar una gran aplicación de React para que muchos equipos puedan trabajar simultáneamente no es fácil. Con micro frontends, puedes dividir un monolito de frontend en piezas más pequeñas para que cada equipo pueda construir y desplegar de manera independiente. En este masterclass, aprenderás cómo construir grandes aplicaciones de React que escalen utilizando micro frontends.

react module federation react micro-frontends micro frontends react

Microfrontends con Module Federation y Angular

JSNation Live 2021

113 min

Microfrontends con Module Federation y Angular

Workshop

Manfred Steyer

Cada vez más empresas eligen Microfrontends. Sin embargo, no son fáciles de implementar. Afortunadamente, Module Federation introducido con webpack 5 ha iniciado un cambio crucial de dirección.
En este masterclass interactivo, aprenderás de Manfred Steyer, Angular GDE y Colaborador de Confianza en el equipo de Angular, cómo planificar e implementar arquitecturas de Microfrontend con Angular y el nuevo Module Federation de webpack. Hablaremos sobre compartir bibliotecas y conceptos avanzados como manejar desajustes de versión, Module Federation dinámico e integración en monorepos.
Después de los ejercicios individuales, tendrás un estudio de caso que podrás utilizar como plantilla para tus proyectos. Este masterclass te ayuda a evaluar las opciones individuales para tus proyectos.
Prerrequisitos:Debes tener algo de experiencia con Angular.

module federation react micro-frontends micro frontend react and angular angular

¿Es Module Federation adecuado para ti?

JSNation 2022

191 min

¿Es Module Federation adecuado para ti?

Workshop

Grgur Grisogono

Descubre los Micro Frontends con Module Federation. Aprende sobre los beneficios y desafíos para que puedas decidir si los Micro Frontends son adecuados para tu organización.

micro-frontends modules