Skip to main content

All cases

Multi-tenant B2B User Management & Access Control

Senior Frontend Engineer · 2025 · 2 min read

Rebuilt B2B identity for multi-tenant roles: one login across companies, finer access control, and support for role-based plans.

Rejected path: Copy login and session helpers into each microfrontend

Overview

I owned the Astro/React identity microfrontend and shared auth package for a B2B identity change, working with backend and security: from isolated nick accounts (one nick, one company, everyone admin) to email-based multi-tenant access where one identity holds roles across companies.

Problem

Users logged in with a nick, and one nick meant one company. Everyone was admin because there were no restricted roles. As the platform grew, businesses needed finer access control and one person managing more than one company.

Constraints

  • The change touched every microfrontend that showed login or a user name.
  • Backend owned Keycloak enforcement; frontend needed a shared library to read the new session states.
  • No big-bang release. Gradual rollout without breaking active legacy sessions.

Architecture

With backend and security, we built registration, login, and role assignment as a central Astro/React microfrontend, plus an internal JS library for auth validation and Keycloak. That library exported shared User Profile and Login components injected across other microfrontends.

Key Decisions

Auth in an internal package

Reasoning

One place for validation, Keycloak calls, and auth UI beats copying login logic across microfrontends.

Alternatives considered
  • Copy login and session helpers into each microfrontend (rejected: code drifts apart and raises security risk)
  • Single SPA shell owning all auth UI (rejected: too coupled to platform migration)

Atoms for local React state, Astro elsewhere

Reasoning

Multi-step registration needed shared state inside one React app. Atoms fit that without inventing cross-island persistence.

Alternatives considered
  • Redux/global store across microfrontends (rejected: overkill and boundary leak)

Phased rollout

Reasoning

Identity pieces went to production in stages so legacy sessions kept working.

Alternatives considered
  • Big-bang cutover (rejected: too much session risk)

Tech stack

  • Astro
  • React
  • TypeScript
  • Internal Atom-based State Management
  • Keycloak (Auth integration)
  • Tailwind CSS

Impact

Identity model 1 email → many companies + roles
Previous model 1 nick → 1 company (all admins)
Auth distribution Shared package across microfrontends
Plan enablement Role/company-based subscription tiers

Identity went from 1 nick = 1 company to 1 email = multiple companies with roles. That model enabled plans that depend on roles and companies managed.

Learnings

  • Microfrontends work when boundaries are clear. Auth crosses them, so a shared library was the right fix.
  • Phased identity rollout lowers the risk of migrating legacy auth.
  • Keycloak owns the truth; how the frontend reads claims still decides whether login and profile UI stay consistent across microfrontends.

All cases