1 of 113

🚂

Micro-Frontends: Authentication Magic at Dutch Railways

2 of 113

TABLE OF CONTENTS

Micro frontends

Module federation

MSAL authentication

Kubernetes config

Live application

04

05

01

02

03

3 of 113

Peter Eijgermans

CodeSmith / Architect

Full-Stack

4 of 113

Meet Petra - Train Controller

6:00 AM: Needs real-time train positions

6:15 AM: Emergency response required

6:30 AM: System takes 45 seconds to load each screen

6:31 AM: Frustration level: MAXIMUM

5 of 113

🤯 8:47 AM - Amsterdam Station Chaos

3,000 railway workers locked out

Authentication system: CRASHED

Rush hour:

IN PROGRESS

6 of 113

Punchline:

This is why we’re here—

to prevent such disasters

7 of 113

Show of Hands Time

🙋‍♀️ "Who's afraid to deploy on Friday afternoon?"

🙋‍♂️ "Who's maintaining multiple authentication systems?"

🙋 "Who's dealing with a monolith that takes forever to build?"

8 of 113

The Railway Monolith: A Beautiful Disaster

Slow development/deployment

Not Maintainable

Hard to Scale

SPOF

9 of 113

"This HUGE app is like one giant box of LEGO that nobody can organize.

If one part of the app breaks? The whole thing crashes.� If you want to add something new? You have to rebuild the whole box."

10 of 113

Monolith

Database

Massive Application

11 of 113

What If We Could..

Architecture: How to get from Monolith to Modular speed ?!

🚀 Deploy features independently — anytime, without fear�
🏃‍♂️ Let teams move fast — without stepping on each other’s toes�
🔗 Connect multiple apps seamleslly�
🛠️ Use Module Federation to share code and scale easily�

Authentication & Security:

🔑 Login once — access everything, seamlessly�
⚙️ Share authentication state across all apps�
🛡️Proper SSO setup�
🔄 Auto-refresh tokens & secure WebSockets for real-time data

12 of 113

These are the dreams of every team:

First, we want to build and improve fast—� with smaller parts, easy to connect, no more crashes.

Then, we want users to log in just once,�

Today, I’ll walk through these points—

and we’ll check them off

Let’s go!

13 of 113

Architecture:

From Monolith to

Modular Speed !

14 of 113

Step 1 - Split frontend and backend

Database

Backend

Microservices

Frontend

15 of 113

Step 2 - Split backend as micro services

DB

Backend

Microservices

Frontend

16 of 113

Step 3 - Split frontend -> Verticals

Frontend

Backend

Team A

C

B

DB

B

C

WS REST

pairing

17 of 113

Short definition

“An architectural style where independently deliverable frontend and backend applications are composed into a greater whole”

18 of 113

Micro Frontends to the Rescue

19 of 113

Micro frontend architecture Dutch Railways

Host / Shell

Train

Tracking

Train /Track Tracking

Route Planning

Track Occupancy

Route Planning

Track Occupancy

FE

Track

Section

Track

Section

Track

Section

Train /Track Tracking

Route Planning

Track

Section

Micro Services

Track Occupancy

responsibilities:�1. routing�2. composition�3. authentication

4. state mgmt

5. easy scaling

6. …..

WS

rest

Here's our complete architecture!

Here we map BC to MF !

We have a HOST / SHELL application that brings together 4 micro frontends.

The HOST / SHELL is responsible for:

- Composition & Rendering – Composing micro frontends into a greater whole → to form a cohesive application.

- routing - determines which micro frontend to load

- lazy loading

- authentication / authorisation

- state mgmt : facilitate cross-micro frontend communication

Each micro frontend has a link with its backend via WEBSOCKETS or REST

Benefits of Micro Frontends

🚀 Scalability – Each team scales its UI part independently.�⚡ Faster Development – Focused teams iterate quickly.�🎯 Independent Deployments – No need to redeploy the entire frontend.�🔗 Tech Flexibility – Different micro frontends can use different technologies.�🛠 Easier Maintenance – Smaller, modular codebases reduce complexity.�🔥 Fault Isolation – One broken component doesn’t take down the whole application.�🤝 Improved Collaboration – Teams work without conflicts.

- **Key Consideration**:

Why can you not always map BC to MF?

Validate against:

- User journey flows.

- UI sharing needs.

- Performance requirements.

- Team structure.

20 of 113

HOST / SHELL

MF train tracking

MF route planning

MF track

section

21 of 113

But…

How to build the

Frontend efficiently?

22 of 113

Module Federation

23 of 113

2022 Webcomponents

Host / Shell

Train

Tracking

Train / Infra

Tracking

Route Mgmt

Track Occupancy

Route Mgmt

Track Occupancy

Track

Section

Track

Section

Track

Section

Angular

shared libs

24 of 113

🐢 50s load time

→ Petra misses emergencies

25 of 113

2025 Module Federation for speed !!!

Host / Shell

Train

Tracking

Train / Infra

Tracking

Route Mgmt

Track Occupancy

Route Mgmt

Track Occupancy

Track

Section

Track

Section

Track

Section

Angular

Shared Lib

Independent Deployment/ CI CD

Technology Agnostic

Improved Scalability

Advantages of Module Federation

Module Federation is a powerful feature in modern web development, particularly in micro-frontend architectures. Here are some of its key advantages:

Independent Deployment:

Teams can develop, test, and deploy their modules independently without affecting other parts of the application.
This reduces coordination overhead and speeds up the development cycle.

Code Sharing and Reusability:

Modules can be shared across different applications, reducing duplication of code and effort.
Common libraries or components can be federated and reused, ensuring consistency and reducing bundle size.

Lazy Loading:

Modules can be loaded on demand, improving the initial load time of the application.
This is particularly useful for large applications where not all features are needed immediately.

Technology Agnostic:

Module Federation allows different parts of an application to be built using different frameworks or libraries (e.g., React, Angular, Vue).
This flexibility enables teams to choose the best tools for their specific needs.

Improved Scalability:

By breaking down the application into smaller, manageable pieces, it becomes easier to scale development teams and the application itself.
Each team can focus on a specific module, leading to better specialization and efficiency.

Fault Isolation:

Issues in one module are less likely to affect the entire application, improving overall stability and reliability.
This isolation makes debugging and maintenance easier.

Dynamic Updates:

Modules can be updated dynamically without requiring a full redeployment of the application.
This allows for quicker iterations and continuous delivery.

Improved Performance:

By splitting the application into smaller chunks, the overall performance can be improved as only the necessary code is loaded and executed.
This also reduces the memory footprint of the application.

Scaling Module Fe

26 of 113

27 of 113

🚄 0.5s load time → Petra saves the day

Performance

Module Federation is fast

28 of 113

29 of 113

Config Remote

30 of 113

Config Host

31 of 113

Config specific versions to share !

32 of 113

How does the Host

load

the Remotes?

33 of 113

34 of 113

35 of 113

Mid-talk Checkpoint

Architecture & Speed (Micro Frontends & Module Federation):

🚀 Deploy features independently — anytime, without fear�
🏃‍♂️ Let teams move fast — without stepping on each other’s toes�
🔗 Connect multiple apps into one seamless experience�
🛠️ Use Module Federation to share code and scale easily�

✅

36 of 113

Demo

Module Federation !

37 of 113

"Breaking the system apart helped speed up development—

but we still had a major problem left."

38 of 113

Authentication

39 of 113

40 of 113

The Multi-App Authentication Nightmare

Slow or broken SSO

Multiple logins

Token Chaos

CORS issues

Redirect loops

41 of 113

🦸‍♂️ The 2 Heroes of Modern Authentication

OpenID Connect (OIDC): Identity Layer

"OIDC is like showing your ID at the entrance”

OAuth 2.1: The Delegation Protocol

"OAuth is like getting a festival wristband"

🎫

Key Players:

Authorization Server (EntraID - The Bouncer)
Resource Server (Your API - The Bartender checks wristband)
Client Application (Angular App - You, The Customer)

🎫

42 of 113

OIDC Flow

"Now let's see exactly how this OIDC flow works step by step.

Starting with what happens when a user clicks 'Login'..."

43 of 113

Flow 1: Initial Login & Authorization

🔐

44 of 113

⚙️ FIRST: needed auth-config MSAL

45 of 113

Authorization Server (EntraID - The Bouncer)

46 of 113

Part 1 → Part 2: "Great!

We have an authorization code.

Now let's see how we exchange it for tokens..."

47 of 113

Flow 2: Token Exchange & Caching

48 of 113

Authorization Server (EntraID - The Bouncer)

49 of 113

Token Types	Purpose	Where Used	Format	Lifetime	Example Scope Needed
🎫Access Token	Access to protected APIs	Sent in Authorisation headers as Bearer	JWT	~1 hour	api://xyz/.default
🆔Token	User identity info for authentication	Used by frontend	JWT	~1 hour
🔄Refresh Token	Get new tokens without login.eEnables SSO! 🎯	Used internally	hidden	Long-lived

The Scope is a URL for specific permissions for an API

50 of 113

Part 2 → Part 3: "Perfect! We have our tokens cached in the browser! → local or sessionscope�

Now let's see how our application uses them..."

51 of 113

Flow 3: API Calls & Token Management

🚀

52 of 113

The Magic:

Automatic token injection via HTTP interceptors!

Resource Server (Your API - The Bartender)

🔄

53 of 113

Token injection

GET /user/getDrink

Authorization: Bearer eyJ0eXAiOiJK...

Component

HTTP Interceptor

JWT Secured Resource Server

GET /user/getDrink

54 of 113

OIDC Flow - Key Takeaways!

🔐 Login

User → EntraID → Authorization Code

🎫 Exchange

Authorization Code → 3 Tokens:

Access: API calls
ID: User info
Refresh: New tokens + SSO

🚀 Use

Access token → API calls (auto-refresh)

55 of 113

56 of 113

MSAL for OIDC

Key Benefit: MSAL abstracts away the complexity of token management, token renewal and token injection.

57 of 113

Now Let's See How MSAL Angular Handles This

MSAL AuthenticationResult Interface:

interface AuthenticationResult {

accessToken: string; // "eyJ0eXAiOiJKV1QiLCJhbGci..."

idToken: string; // Identity proof

refreshToken: string; // Renewal ticket

expiresOn: Date; // Expiration time

scopes: string[]; // Permissions granted

account: AccountInfo; // User profile information

}

58 of 113

MSAL Architecture

59 of 113

🏗️ Angular MSAL Architecture Overview

MsalService

60 of 113

Transition : "Now that we understand MSAL architecture, let's see how this looks in a real Angular component..."

61 of 113

Real-World

Login Component

62 of 113

🏗️ Building Your First MSAL Login Component

63 of 113

🏗️ Building Your First MSAL Login Component

64 of 113

But…

How do we share authentication across micro-frontends?

That's our next challenge..."

65 of 113

Challenge

⚠️ Key Risks:

�

Different Login Status in Each App

Multiple Tokens, Out of Sync

Problems Across Different Domains

Goal: SSO

Security Gaps

66 of 113

67 of 113

The Solution:

Share MSAL Packages

68 of 113

Module Federation Solution

🔗 Sharing MSAL Packages in config HOST��

Key Concept:

Shared MSAL packages

ensure single instance !

69 of 113

Module Federation Solution

🔗 Sharing MSAL Packages in REMOTE config��

70 of 113

2025 Module Federation for speed !!!

Host / Shell

Train

Tracking

Train / Infra

Tracking

Route Mgmt

Track Occupancy

Route Mgmt

Track Occupancy

Track

Section

Track

Section

Track

Section

Angular

MSAL

Advantages of Module Federation

Module Federation is a powerful feature in modern web development, particularly in micro-frontend architectures. Here are some of its key advantages:

Independent Deployment:

Teams can develop, test, and deploy their modules independently without affecting other parts of the application.
This reduces coordination overhead and speeds up the development cycle.

Code Sharing and Reusability:

Modules can be shared across different applications, reducing duplication of code and effort.
Common libraries or components can be federated and reused, ensuring consistency and reducing bundle size.

Lazy Loading:

Modules can be loaded on demand, improving the initial load time of the application.
This is particularly useful for large applications where not all features are needed immediately.

Technology Agnostic:

Module Federation allows different parts of an application to be built using different frameworks or libraries (e.g., React, Angular, Vue).
This flexibility enables teams to choose the best tools for their specific needs.

Improved Scalability:

By breaking down the application into smaller, manageable pieces, it becomes easier to scale development teams and the application itself.
Each team can focus on a specific module, leading to better specialization and efficiency.

Fault Isolation:

Issues in one module are less likely to affect the entire application, improving overall stability and reliability.
This isolation makes debugging and maintenance easier.

Dynamic Updates:

Modules can be updated dynamically without requiring a full redeployment of the application.
This allows for quicker iterations and continuous delivery.

Improved Performance:

By splitting the application into smaller chunks, the overall performance can be improved as only the necessary code is loaded and executed.
This also reduces the memory footprint of the application.

Scaling Module Fe

71 of 113

72 of 113

How to config SSO?

73 of 113

⚙️ Same auth-config for all Micro frontends !

74 of 113

🏗️ Same OIDC Module - The Foundation for OIDC

75 of 113

🏭 Same MSAL Instance config!

76 of 113

HTTP Interceptor Configuration

Magic: Automatically adds Authorization: Bearer <token> header

🔄 Automatic Token Injection:

77 of 113

SSO Checklist !

✅ Same Identity Provider (EntraID)

✅ Shares MSAL Package and storage

✅ Same auth config

✅ Single Token Refresh Strategy

✅ What’s True:

MSAL (Microsoft Authentication Library) packages can help enable Single Sign-On (SSO) if apps are under the same session context (e.g., same domain or configured correctly).�
Sharing the same MSAL instance (or a shared MSAL wrapper library) can centralize authentication logic in micro frontends, reducing duplication.�

⚠️ But Be Careful:

SSO is NOT guaranteed just by sharing an MSAL package.�

MSAL still depends on browser session, cookies, and token caches.�
Apps need correct settings for redirect URIs, token caching, and session management.�

Different domains/subdomains?� Sharing MSAL won’t be enough alone—you need:�

Proper cookie settings (SameSite=None, secure cookies).�
Configured Azure AD / Identity Provider for cross-domain SSO.�

Race conditions & sync issues may still occur if multiple apps try to refresh tokens at once.�

78 of 113

Demo SSO !

79 of 113

Websockets for real time data

80 of 113

What are Websockets ?

Network protocol

Two-way communication

Data is pushed to client

Always Open

81 of 113

🔌 WebSocket Authentication Challenge #3

The Problem: Websockets do not support HTTP headers for tokens authentication tokens!

82 of 113

🔌 WebSocket Authentication Challenge

The Solution → Custom authentication handling !

msalService

83 of 113

Final Checkoff

Authentication & Security (MSAL & Auth Solutions):

🔑 Login once — access everything, seamlessly�
⚙️ Share authentication state across all apps�
🛡️ proper SSO setup�
🔄 Auto-refresh tokens & secure WebSockets for real-time data

✅

Mission Completed !

🔑 Login Once, Access All� "One master LEGO key unlocks every building in the city."� → Petra only needs to use her key once to enter any building—no more juggling keys!�

⚙️ Share Auth State Across Apps� "Once she’s inside the city, her key works everywhere automatically."� → No need to show her key again at every door—she’s trusted everywhere inside.�

🛡️ Secure Everything Consistently� "All buildings follow the same safety rules."� → No shortcuts or loopholes—every house has the same locks and protections.�

🔄 Streamline Token Refresh & WebSocket Security� "Even when the city updates or grows, Petra’s key stays valid and keeps working."� → No need to reset keys or change locks every time the city changes or grows—everything just keeps working smoothly.

84 of 113

Final Challenge:

Kubernetes Config

— One App, Many Environments?

85 of 113

⚙️ MSAL auth-config example

86 of 113

⚙️ Kubernetes ConfigMap

87 of 113

Runtime Config Flow (High-level)

1. K8s ConfigMap

provides

app-config.json per Env

2.Load Config

fetch(app-config.json)

new AppConfig()

setup.ts

3. InjectionToken

APP_CONFIG

DI System

bootstrap.ts

4. MSAL Setup

Factory Functions:

• MSALInstance

• Guard & Interceptor

88 of 113

Kubernetes advantages !

✅ Settings stored in Kubernetes, not in the app

✅ Change config without rebuilding

✅ One app on different Environments

One app, many environments—no rebuilds

89 of 113

REAL WORLD APP

Trackviewer is micro frontend-based app for the Dutch Railway.

With Trackviewer you can see at a glance where exactly trains are, what the delay is and from which track they will disappear.

90 of 113

Remember Petra ?

91 of 113

“Call to Action” :

Claim one whole day,

Try Module Federation

and implement MSAL for seamless OIDC flows

92 of 113

“Call to Action” :

Claim one whole day,

Try Module Federation

and implement MSAL for seamless OIDC flows

Gràcies !

93 of 113

Peter Eijgermans

CodeSmith / Architect

Full-Stack

94 of 113

Peter Eijgermans

95 of 113

🚀 Bootstrapping the Shell Application

Key Point:

MsalRedirectComponent handles OAuth callback

96 of 113

🎯 Silent First, Interactive Fallback

Strategy:

Always try silent first, fallback to interactive

97 of 113

🔒 Security Best Practices

✅ What We're Doing Right:

Secure Token Storage: LocalStorage with proper cache management
Scope Validation: Backend validates audience claims
Token Expiration Handling: Automatic refresh with fallback
HTTPS Everywhere: Non-negotiable for production

🚨 Watch Out For:

Token Leakage: Never log tokens or put them in URLs params
Scope Creep: Request minimal necessary permissions
Cross-Origin Issues: Proper CORS configuration
Token Sharing: Don't share tokens between domains
Refresh Token Rotation: Handle refresh token expiration

98 of 113

Common Problems & Solutions:

1. "MSAL instance not initialized"

// Ensure initialization in BearerTokenService

await this.authService.instance.initialize();

2. Module Federation version conflicts

// Use singleton and strict versions

shared: {

'@azure/msal-angular': { singleton: true, strictVersion: true }

}

99 of 113

Common Problems & Solutions:

3. WebSocket authentication failures

typescript

// Check token expiration before sending

if (tokenResult.expiresOn < new Date()) {

tokenResult = await this.bearerTokenService.acquireToken();

}

4. Redirect loops

typescript

// Ensure proper redirect URI configuration

redirectUri: `${location.origin}${location.pathname}`

100 of 113

Key takeaways

🔒 Security: MSAL simplifies the complexity of implementing OAuth/OIDC

🧩 Scalability: Module Federation enables distributed auth

⚡ Performance: Shared packages, single MSAL instance

🔌 Flexibility: Custom services for WebSocket auth

🛠️ Maintainability: Environment-specific configurations in K8s

101 of 113

🎫 Custom Token Service for WebSockets

102 of 113

OIDC Flow: 🎫 Getting the golden ticket

We have 3 Types of Tokens:

🎫 Access Token: "Grants access to protected APIs" - Short-lived, contains permissions/scopes (JWT format)
🆔 ID Token: Contains user identity claims / info
🔄 Refresh Token: "I can get new tickets" - Long-lived, used to get new Access and ID tokens

Grants access to protected APIs

103 of 113

The Magic of Injection Tokens

The APP_CONFIG injection token acts as a bridge between your external configuration (from K8s) and Angular's DI system

104 of 113

The Magic of Injection Tokens

Step-by-step flow:

📋 Kubernetes ConfigMap → Provides app-config.json

Contains environment-specific config (clientId, authority, scopes)

📦 Docker Container Setup

ConfigMap mounted as volume into nginx container
Path: /usr/share/nginx/html/assets/app-config.json

🌐 Browser Runtime

Angular app loads in browser
Fetches ./assets/app-config.json via HTTP

⚡ Angular Injection

Config loaded into APP_CONFIG injection token
MSAL receive config via dependency injection

105 of 113

🛡️Protecting Routes with MSAL Guard

106 of 113

MSAL coding - Key Takeaways!

✅ OIDC Module configures MSAL for Angular/React

✅ MSALInterceptorConfigProvider contains list protected resources

✅ Custom Token Service for WebSockets

✅ Share MSAL packages with Module Federation

107 of 113

Challenge 4: How to Solve the Multi-Environment Authentication ?

108 of 113

Problem:

Hard-coded authentication configuration

Different environments need different MSAL settings

109 of 113

Solution:

Single build artifact

Dynamic configuration Kubernetes Configsmaps

Type-safe injection

Traditional Approach:

Build per Environment

Hard-coded config

Deployment complexily

110 of 113

Micro frontends - Key Takeaways!

✅ Understand the Micro frontend Architecture

✅ Host vs. Remote applications

✅ Configure and Share resources with Module Federation