Loading...
Loading...
B2B multi-tenant: entitlements, white-label, audit logs, and client data isolation.
Module 21 · Enterprise Multi-Tenant Frontend
B2B multi-tenant architecture: tenant context, entitlements, white-label theming, audit logs, client data isolation, and SSO at scale.
B2B multi-tenant frontend: tenant context resolution, entitlements, white-label theming, audit logs, client data isolation, SSO, and tenant switching.
Enterprise B2B frontends serve thousands of organizations from one codebase — staff engineers design tenant isolation, per-tenant branding, feature entitlements, and audit trails that satisfy SOC 2 and GDPR.
This module covers tenant resolution (subdomain, JWT), entitlements vs RBAC, runtime white-label theming, immutable audit logs, cache/storage namespacing, and SSO with multi-workspace switching.
Staff interviews ask how you prevent cross-tenant data leaks and ship plan-tier features without forking the codebase.
Staff track module — builds on Frontend Security (Module 11) and Staff Frontend System Design (Module 16).
Enterprise buyers evaluate tenant isolation, audit trails, and SSO — staff interviews test whether you can design B2B SaaS frontends that prevent cross-tenant leaks and support plan-tier features without code forks.
B2B SaaS at scale — tenant isolation, entitlements, and white-label.
Enterprise B2B frontends serve many organizations from one codebase. Staff engineers design for tenant isolation, per-tenant branding, feature entitlements, and audit trails that satisfy SOC 2 and GDPR requirements.
How tenant identity propagates through the client.
| Pattern | Resolution | Trade-off |
|---|---|---|
| Subdomain | acme.app.com → tenant slug | Clean URLs; DNS/SSL per tenant |
| Path prefix | /t/acme/dashboard | Single domain; uglier URLs |
| JWT claim | tenant_id in access token | Works with any URL; must validate server-side |
| Header | X-Tenant-ID on API calls | API-only; not for initial page load |
// TenantProvider — resolve once at shell bootstrap const tenant = resolveTenant({ subdomain: window.location.hostname.split(".")[0], token: session.tenantId, }); <TenantProvider value={tenant}> <AppShell /> </TenantProvider>
Staff depth
Plan-tier features, add-ons, and usage limits on the client.
| Layer | Purpose | Example |
|---|---|---|
| RBAC | Who can act | Admin vs Viewer role |
| Entitlements | What plan allows | SSO, audit logs, API access |
| Usage limits | How much | 500 seats, 10k API calls/month |
Per-tenant branding without code forks.
// Runtime theme injection document.documentElement.style.setProperty( "--brand-primary", tenant.theme.primaryColor );
Performance
Immutable activity trails for enterprise buyers.
| Event | Logged fields | UI surface |
|---|---|---|
| User invite | actor, invitee_email, role | Settings → Audit log |
| Permission change | actor, target, old/new role | Admin audit tab |
| Data export | actor, record_count, format | Compliance dashboard |
Prevent cross-tenant leaks in cache, storage, and UI.
// Cache key pattern const queryKey = ["users", tenant.id, filters]; // Storage namespace localStorage.setItem(`tenant:${tenantId}:prefs`, JSON.stringify(prefs));
Interview red flag
Enterprise auth flows across IdPs and workspaces.
| Flow | Pattern | Frontend concern |
|---|---|---|
| SAML/OIDC SSO | IdP-initiated or SP-initiated | Redirect handling, error states |
| Multi-workspace | User belongs to N tenants | Workspace picker after login |
| JIT provisioning | First SSO login creates user | Onboarding wizard for new tenant |
| SCIM | IdP provisions users | UI reflects deactivated users on next token refresh |
Multi-tenant frontend design points staff interviewers score.
Enterprise multi-tenant frontend interview questions.
Test your understanding — 5 questions
A user reports briefly seeing another organization's records after switching workspaces. What is the correct architectural response?