Multi-tenant authentication infrastructure for B2B SaaS applications
- Why We're Building This
- What We're Building
- AI-Powered Customization
- How It Works
- Package API Reference
- Pricing
- Competitive Advantage
Every SaaS application needs authentication, authorization, and user management. Yet teams repeatedly face the same challenges:
-
Months of Development: Building secure authentication from scratch takes 3-6 months. Password hashing, token management, OAuth flows, session security—each requires deep expertise.
-
Ongoing Maintenance Burden: Security vulnerabilities emerge constantly. Teams must monitor CVEs, update dependencies, and patch systems—forever.
-
Multi-Tenancy Complexity: B2B SaaS products need complete data isolation between customers. Each tenant requires separate users, roles, permissions, and configurations. Building this correctly is extremely difficult.
-
Organization Management: Enterprise customers expect to manage their own teams, invite members, assign roles, and control access within their organization—all while isolated from other tenants.
-
Compliance Complexity: SOC 2, GDPR, HIPAA—each regulation demands specific controls. Multi-tenant architectures make compliance even harder.
-
Infrastructure Overhead: Running authentication infrastructure requires servers, databases, monitoring, backups, and disaster recovery. Multiply this by the complexity of tenant isolation.
-
Scaling Challenges: As user bases grow across multiple tenants, authentication systems must handle increased load while maintaining strict isolation.
| Option | Problem |
|---|---|
| Build from scratch | 6-12 months for multi-tenant, ongoing maintenance, security risk |
| Auth0/Okta | Expensive at scale, complex multi-tenancy, vendor lock-in |
| Self-hosted Keycloak | Complex setup, multi-realm management overhead, requires DevOps |
| Firebase Auth | No native multi-tenancy, limited features, Google lock-in |
AuthStack provides multi-tenant authentication infrastructure as a service with a unique approach:
- NPM Package: Pre-built React components you install and customize
- AI-Powered Customization: Modify your auth system using natural language prompts via our AI chatbot
- Multi-Tenant Native: Built from the ground up for B2B SaaS with organization isolation
- Dedicated Infrastructure: Your own isolated VM instance, not shared with other AuthStack customers
- API Key Authentication: Simple integration—no OAuth complexity to manage
- Automatic Provisioning: Infrastructure created automatically when you subscribe
- Multi-Region Deployment: Choose where your data lives (US, EU, Asia)
- Auto-Deploy: AI changes are automatically deployed to your dedicated infrastructure
You focus on your product. We handle authentication, multi-tenancy, and continuous customization.
┌─────────────────────────────────────────────────────────────────┐
│ YOUR B2B SAAS APPLICATION │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ @authstack/react (npm package) │ │
│ │ │ │
│ │ • <LoginForm /> • <OrganizationSwitcher /> │ │
│ │ • <SignupForm /> • <OrganizationList /> │ │
│ │ • <PasswordReset /> • <InviteMemberModal /> │ │
│ │ • <UserProfile /> • <MemberRoleManager /> │ │
│ │ • useAuth() hook • useTenant() hook │ │
│ │ • useOrganizations() • usePermissions() hook │ │
│ │ │ │
│ └─────────────────────────┬───────────────────────────────┘ │
│ │ API Key in headers │
└────────────────────────────┼───────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ AUTHSTACK CLOUD │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Your Dedicated Multi-Tenant Infrastructure │ │
│ │ (Provisioned via IaC) │ │
│ │ │ │
│ │ Region: [US-East | EU-West | Asia-Pacific] │ │
│ │ │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ TENANT ISOLATION LAYER │ │ │
│ │ │ │ │ │
│ │ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │ │
│ │ │ │ Tenant A│ │ Tenant B│ │ Tenant C│ ... │ │ │
│ │ │ │ (Org) │ │ (Org) │ │ (Org) │ │ │ │
│ │ │ │ │ │ │ │ │ │ │ │
│ │ │ │ • Users │ │ • Users │ │ • Users │ │ │ │
│ │ │ │ • Roles │ │ • Roles │ │ • Roles │ │ │ │
│ │ │ │ • Perms │ │ • Perms │ │ • Perms │ │ │ │
│ │ │ │ • Data │ │ • Data │ │ • Data │ │ │ │
│ │ │ └─────────┘ └─────────┘ └─────────┘ │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │
│ │ │ Keycloak │ │ Express │ │ PostgreSQL │ │ │
│ │ │ (Realms) │ │ API │ │ Database │ │ │
│ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
AuthStack provides native multi-tenancy for B2B SaaS applications. This means your customers (tenants/organizations) get complete isolation while you manage everything through a single integration.
┌─────────────────────────────────────────────────────────────────┐
│ YOUR APPLICATION │
│ (e.g., Project Management SaaS) │
└─────────────────────────────────────────────────────────────────┘
│
│ Uses AuthStack
▼
┌─────────────────────────────────────────────────────────────────┐
│ AUTHSTACK │
│ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ YOUR TENANTS │ │
│ │ │ │
│ │ ┌─────────────────┐ ┌─────────────────┐ │ │
│ │ │ Acme Corp │ │ Globex Inc │ │ │
│ │ │ (Tenant A) │ │ (Tenant B) │ ... │ │
│ │ │ │ │ │ │ │
│ │ │ Users: │ │ Users: │ │ │
│ │ │ • john@acme.com │ │ • jane@globex.io│ │ │
│ │ │ • sara@acme.com │ │ • bob@globex.io │ │ │
│ │ │ │ │ │ │ │
│ │ │ Roles: │ │ Roles: │ │ │
│ │ │ • Admin │ │ • Admin │ │ │
│ │ │ • Manager │ │ • Developer │ │ │
│ │ │ • Viewer │ │ • Viewer │ │ │
│ │ │ │ │ │ │ │
│ │ │ Permissions: │ │ Permissions: │ │ │
│ │ │ (Customized) │ │ (Customized) │ │ │
│ │ │ │ │ │ │ │
│ │ │ Subscription: │ │ Subscription: │ │ │
│ │ │ Enterprise │ │ Pro │ │ │
│ │ └─────────────────┘ └─────────────────┘ │ │
│ │ │ │
│ │ Complete isolation: Acme users CANNOT see Globex data │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
| Aspect | Isolation Level |
|---|---|
| Users | Users belong to specific tenant(s); cannot access other tenants |
| Data | All queries scoped to tenant; cross-tenant access impossible |
| Roles | Each tenant defines their own roles independently |
| Permissions | Permissions scoped to tenant; fully customizable per tenant |
| Settings | Tenant-specific configuration (branding, features, limits) |
| Billing | Per-tenant subscription management |
| Audit Logs | Isolated audit trails per tenant |
Users can belong to multiple organizations with different roles in each:
┌─────────────────────────────────────────────────────────────────┐
│ USER: john@example.com │
└─────────────────────────────────────────────────────────────────┘
│
┌─────────────────┼─────────────────┐
│ │ │
▼ ▼ ▼
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ Acme Corp │ │ Side Proj │ │ Freelance │
│ │ │ │ │ Client │
│ Role: ADMIN │ │ Role: OWNER │ │ Role: MEMBER│
│ │ │ │ │ │
│ Permissions:│ │ Permissions:│ │ Permissions:│
│ • All │ │ • All │ │ • View only │
└─────────────┘ └─────────────┘ └─────────────┘
Key Behaviors:
- User sees organization switcher to change context
- Permissions evaluated based on current organization
- Actions scoped to selected organization
- Session maintains organization context
A React component library that developers install in their application:
npm install @authstack/reactAuthentication Components:
| Component | Description |
|---|---|
<AuthStackProvider> |
Root provider, configures API key and endpoint |
<LoginForm> |
Email/password login with customizable styling |
<SignupForm> |
User registration with configurable fields |
<PasswordResetRequest> |
"Forgot password" email request form |
<PasswordResetForm> |
New password entry with token validation |
<UserProfile> |
Current user info display and editing |
Multi-Tenant Organization Components:
| Component | Description |
|---|---|
<OrganizationSwitcher> |
Dropdown to switch between user's organizations |
<OrganizationList> |
List all organizations user belongs to |
<OrganizationDetail> |
Single organization view with settings |
<CreateOrganization> |
Organization creation form |
<OrganizationSettings> |
Manage organization name, branding, settings |
<InviteMemberModal> |
Invite users to organization via email |
<MemberList> |
View and manage organization members |
<MemberRoleManager> |
Assign/change member roles within organization |
<PendingInvitations> |
List pending invitations for organization |
Authorization Components:
| Component | Description |
|---|---|
<PermissionGate> |
Conditional rendering based on permissions |
<RoleGate> |
Conditional rendering based on roles |
<RoleManager> |
Create and configure roles for organization |
<PermissionEditor> |
Assign permissions to roles |
Subscription Components:
| Component | Description |
|---|---|
<SubscriptionStatus> |
Current plan display for organization |
<PricingTable> |
Subscription plan selection |
<BillingPortal> |
Manage payment methods, invoices |
Hooks:
| Hook | Description |
|---|---|
useAuth() |
Authentication state and methods |
useUser() |
Current user data |
useTenant() |
Current tenant/organization context |
useOrganizations() |
List and manage user's organizations |
useOrganizationMembers() |
Members of current organization |
usePermissions() |
Permission checking within current org |
useRoles() |
Roles available in current organization |
useSubscription() |
Organization's subscription status |
Each customer receives a unique API key upon subscription:
// Customer's application
import { AuthStackProvider } from '@authstack/react';
function App() {
return (
<AuthStackProvider
apiKey="ask_live_abc123xyz789"
region="us-east"
>
<YourApplication />
</AuthStackProvider>
);
}How API Keys Work:
1. Customer subscribes to AuthStack
│
▼
2. System generates unique API key
ask_live_{random_32_chars}
│
▼
3. Customer adds API key to their app
│
▼
4. Every request from components includes API key
Headers: { "X-AuthStack-Key": "ask_live_abc123..." }
│
▼
5. AuthStack validates key and routes to customer's infrastructure
│
▼
6. Request processed on customer's dedicated backend
with full multi-tenant isolation
API Key Types:
| Type | Format | Purpose |
|---|---|---|
| Live | ask_live_* |
Production use |
| Test | ask_test_* |
Development/staging |
Each paying customer gets their own isolated infrastructure that supports unlimited tenants:
What's Provisioned:
| Resource | Purpose |
|---|---|
| Keycloak Instance | Identity provider with multi-realm support for tenants |
| Express API Server | Business logic, tenant routing, authorization |
| PostgreSQL Database | Tenant-scoped data storage |
| Redis Cache | Session storage, rate limiting per tenant |
| Load Balancer | Traffic distribution, SSL termination |
Why Dedicated (Not Shared):
- Complete Isolation: Your tenants' data isolated from other AuthStack customers
- Compliance: Easier SOC 2, HIPAA, GDPR compliance
- Performance: No noisy neighbor problems
- Customization: Per-customer configuration possible
- Security: Blast radius limited to single customer
When a customer subscribes, infrastructure is created automatically:
1. Customer selects plan and region
│
▼
2. Payment processed via Stripe
│
▼
3. Webhook triggers provisioning pipeline
│
▼
4. Terraform/Pulumi creates infrastructure
- VPC/Network
- Kubernetes namespace (or dedicated VMs)
- Database instance with tenant partitioning
- Keycloak deployment (multi-realm ready)
- API deployment
- DNS records
- SSL certificates
│
▼
5. Configuration stored in control plane
│
▼
6. API key activated and routed to new infrastructure
│
▼
7. Customer notified: "Your AuthStack is ready!"
(Typically 2-5 minutes)
Customers choose their deployment region:
| Region | Location | Use Case |
|---|---|---|
us-east |
Virginia, USA | North American users, general purpose |
us-west |
Oregon, USA | West coast optimization |
eu-west |
Ireland | GDPR compliance, European users |
eu-central |
Frankfurt | German data residency requirements |
asia-pacific |
Singapore | Asian market, low latency |
australia |
Sydney | Australian data sovereignty |
AuthStack includes a revolutionary AI chatbot that allows you to customize your authentication system using natural language. No code required—just describe what you want, and the AI modifies your codebase and deploys it automatically.
┌─────────────────────────────────────────────────────────────────┐
│ AUTHSTACK.IO DASHBOARD │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ AI CHATBOT │ │
│ │ │ │
│ │ You: "Add Google SSO to the login page" │ │
│ │ │ │
│ │ AI: "I'll add Google SSO authentication. This will: │ │
│ │ • Add Google OAuth provider to Keycloak │ │
│ │ • Update LoginForm with 'Sign in with Google' │ │
│ │ • Configure callback URLs │ │
│ │ │ │
│ │ Deploying to your instance (eu-west)..." │ │
│ │ │ │
│ │ ✓ Changes deployed successfully! │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
│
│ AI modifies code
│ Auto-deploys
▼
┌─────────────────────────────────────────────────────────────────┐
│ YOUR DEDICATED VM INSTANCE (eu-west) │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ UPDATED CODEBASE │ │
│ │ │ │
│ │ React Frontend Express API Keycloak Config │ │
│ │ ───────────── ─────────── ──────────────── │ │
│ │ + Google SSO + OAuth routes + Google provider │ │
│ │ button + Token handling + Client secrets │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ PostgreSQL │ Redis │ Load Balancer │ SSL │
│ │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ AI CUSTOMIZATION PIPELINE │
└─────────────────────────────────────────────────────────────────┘
1. PROMPT
─────────
Customer enters request in AI chatbot:
"Add passwordless login with magic links"
│
▼
2. ANALYSIS
───────────
AI analyzes:
• Current codebase state
• Customer's configuration
• Required changes (frontend + backend + Keycloak)
• Security implications
│
▼
3. PREVIEW
──────────
AI presents change summary:
┌─────────────────────────────────────────┐
│ Changes to be made: │
│ │
│ Frontend: │
│ • Add MagicLinkForm component │
│ • Update LoginPage with email-only flow│
│ • Add "Check your email" screen │
│ │
│ Backend: │
│ • Add /auth/magic-link endpoint │
│ • Add /auth/verify-magic-link endpoint │
│ • Configure email templates │
│ │
│ Keycloak: │
│ • Enable magic link authenticator │
│ │
│ [Approve] [Modify] [Cancel] │
└─────────────────────────────────────────┘
│
▼
4. IMPLEMENTATION
─────────────────
Upon approval, AI:
• Modifies React components
• Updates Express API routes
• Configures Keycloak settings
• Updates database schemas if needed
│
▼
5. DEPLOYMENT
─────────────
Automatic deployment to customer's VM:
• Code pushed to instance
• Services restarted gracefully
• Zero-downtime deployment
• Rollback available if issues
│
▼
6. VERIFICATION
───────────────
AI confirms:
"✓ Magic link authentication is now live!
Test it at: https://your-app.authstack.io/login"
Here are examples of what you can ask the AI to customize:
| Prompt | What AI Does |
|---|---|
| "Add Google and GitHub SSO" | Configures OAuth providers, adds social login buttons |
| "Enable two-factor authentication" | Adds TOTP/SMS 2FA flow, QR code setup |
| "Add passwordless magic link login" | Creates email-based passwordless flow |
| "Require email verification before login" | Adds email verification step to signup |
| "Add CAPTCHA to prevent bots" | Integrates reCAPTCHA/hCaptcha |
| Prompt | What AI Does |
|---|---|
| "Change primary color to #6366f1" | Updates theme across all components |
| "Add our company logo to the login page" | Integrates custom branding |
| "Make the signup form require phone number" | Adds required phone field with validation |
| "Add dark mode support" | Implements theme toggle, dark styles |
| "Translate to Spanish and French" | Adds i18n with specified languages |
| Prompt | What AI Does |
|---|---|
| "Add rate limiting to login (5 attempts)" | Configures login attempt throttling |
| "Enable session timeout after 30 minutes" | Sets session expiration policies |
| "Add IP whitelist for admin users" | Implements IP-based access control |
| "Log all authentication events to webhook" | Sets up audit event forwarding |
| Prompt | What AI Does |
|---|---|
| "Add custom roles beyond the defaults" | Extends role system with custom roles |
| "Allow organization admins to set password policies" | Adds per-org password rules |
| "Add team hierarchy (departments)" | Implements nested team structure |
| "Enable SSO/SAML for enterprise tenants" | Configures SAML for specific orgs |
Use the hosted AuthStack with AI customization:
┌─────────────────────────────────────────────────────────────────┐
│ │
│ Your App ──────► AuthStack Cloud ──────► Your VM │
│ (React) (AI Chatbot) (Dedicated) │
│ │
│ • Install npm package │
│ • Connect via API key │
│ • Customize via AI chatbot │
│ • Auto-deployed to your region │
│ │
└─────────────────────────────────────────────────────────────────┘
Install the npm package directly for full control:
npm install @authstack/reactimport { AuthStackProvider, LoginForm } from '@authstack/react';
// Manual integration without AI customization
// Full source code access for custom modifications┌─────────────────────────────────────────────────────────────────┐
│ AUTHSTACK PLATFORM │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ CONTROL PLANE │ │
│ │ │ │
│ │ ┌───────────────┐ ┌───────────────┐ ┌─────────────┐ │ │
│ │ │ AI Engine │ │ Code Engine │ │ Deploy │ │ │
│ │ │ │ │ │ │ Engine │ │ │
│ │ │ • NLP │ │ • Code gen │ │ │ │ │
│ │ │ • Intent │ │ • Validation │ │ • IaC │ │ │
│ │ │ detection │ │ • Testing │ │ • CI/CD │ │ │
│ │ │ • Context │ │ • Git ops │ │ • Rollback │ │ │
│ │ └───────┬───────┘ └───────┬───────┘ └──────┬──────┘ │ │
│ │ │ │ │ │ │
│ │ └──────────────────┼──────────────────┘ │ │
│ │ │ │ │
│ └─────────────────────────────┼───────────────────────────┘ │
│ │ │
│ ┌─────────────────────────────┼───────────────────────────┐ │
│ │ CUSTOMER INSTANCES │ │
│ │ │ │ │
│ │ ┌────────────────────────┼────────────────────────┐ │ │
│ │ │ ▼ │ │ │
│ │ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │ │
│ │ │ │Customer │ │Customer │ │Customer │ ... │ │ │
│ │ │ │ A │ │ B │ │ C │ │ │ │
│ │ │ │(us-east)│ │(eu-west)│ │(ap-sin) │ │ │ │
│ │ │ │ │ │ │ │ │ │ │ │
│ │ │ │ VM with │ │ VM with │ │ VM with │ │ │ │
│ │ │ │ custom │ │ custom │ │ custom │ │ │ │
│ │ │ │ code │ │ code │ │ code │ │ │ │
│ │ │ └─────────┘ └─────────┘ └─────────┘ │ │ │
│ │ │ │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
Every AI-generated change is versioned:
┌─────────────────────────────────────────────────────────────────┐
│ DEPLOYMENT HISTORY │
└─────────────────────────────────────────────────────────────────┘
│ Version │ Change │ Status │ Actions │
│─────────│───────────────────────────────│─────────│────────────│
│ v2.4 │ Added Google SSO │ LIVE │ [Rollback] │
│ v2.3 │ Updated primary color │ │ [Restore] │
│ v2.2 │ Added magic link auth │ │ [Restore] │
│ v2.1 │ Enabled 2FA │ │ [Restore] │
│ v2.0 │ Initial deployment │ │ [Restore] │
│─────────│───────────────────────────────│─────────│────────────│
• One-click rollback to any previous version
• Full audit trail of all changes
• Compare versions side-by-side
• Export configuration as code
┌─────────────────────────────────────────────────────────────────┐
│ CUSTOMER ONBOARDING │
└─────────────────────────────────────────────────────────────────┘
Step 1: Sign Up
─────────────────
Customer visits authstack.io
Creates account (email/password)
Verifies email
│
▼
Step 2: Choose Plan
─────────────────
┌─────────────┬─────────────┬─────────────┐
│ Starter │ Pro │ Enterprise │
│ $49/mo │ $199/mo │ $799/mo │
│ │ │ │
│ • 1K MAU │ • 25K MAU │ • Unlimited │
│ • 5 tenants │ • 100 │ • Unlimited │
│ • Basic │ tenants │ tenants │
│ roles │ • Custom │ • Custom │
│ • Email │ roles │ everything│
│ support │ • Priority │ • Dedicated │
│ │ support │ support │
└─────────────┴─────────────┴─────────────┘
│
▼
Step 3: Select Region
─────────────────
Customer selects deployment region
Data residency requirements considered
│
▼
Step 4: Payment
─────────────────
Stripe Checkout processes payment
Subscription activated
│
▼
Step 5: Infrastructure Provisioning
─────────────────
IaC pipeline triggered
Multi-tenant infrastructure created
Typically completes in 2-5 minutes
│
▼
Step 6: API Key Issued
─────────────────
Live and test API keys generated
Displayed in dashboard
Keys tied to provisioned infrastructure
│
▼
Step 7: Integration
─────────────────
Customer installs npm package
Adds API key to their app
AuthStack components now functional
│
▼
Step 8: Create Tenants
─────────────────
Customer's end-users sign up
Users create organizations (tenants)
Each tenant fully isolated
│
▼
Step 9: AI Customization (Ongoing)
─────────────────
Use AI chatbot to customize:
"Add Google SSO" → Deployed automatically
"Enable 2FA" → Deployed automatically
"Change theme colors" → Deployed automatically
│
▼
Step 10: Go Live
─────────────────
Customer's multi-tenant app is ready
Users can authenticate and manage orgs
Continue customizing via AI as needed
// 1. Install the package
// npm install @authstack/react
// 2. Wrap your app with providers
import {
AuthStackProvider,
TenantProvider,
OrganizationSwitcher
} from '@authstack/react';
function App() {
return (
<AuthStackProvider
apiKey={process.env.AUTHSTACK_API_KEY}
region="us-east"
>
<TenantProvider>
<Router>
<Routes>
{/* Public routes */}
<Route path="/login" element={<LoginPage />} />
<Route path="/signup" element={<SignupPage />} />
{/* Protected multi-tenant routes */}
<Route element={<ProtectedRoute />}>
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/settings" element={<OrgSettings />} />
<Route path="/team" element={<TeamManagement />} />
</Route>
</Routes>
</Router>
</TenantProvider>
</AuthStackProvider>
);
}
// 3. Add organization switcher for multi-tenant navigation
import { OrganizationSwitcher, useTenant } from '@authstack/react';
function AppHeader() {
const { currentOrganization } = useTenant();
return (
<header>
<Logo />
<OrganizationSwitcher
onSwitch={(org) => {
// Reload data for new organization context
window.location.href = '/dashboard';
}}
/>
<UserMenu />
</header>
);
}
// 4. All data operations automatically scoped to current tenant
import { useTenant, useOrganizationMembers } from '@authstack/react';
function TeamManagement() {
const { currentOrganization } = useTenant();
const { members, inviteMember, removeMember } = useOrganizationMembers();
// members are automatically filtered to current organization
// inviteMember sends invite scoped to current organization
return (
<div>
<h1>{currentOrganization.name} Team</h1>
<MemberList members={members} onRemove={removeMember} />
<InviteMemberModal onInvite={inviteMember} />
</div>
);
}
// 5. Permission checks are organization-scoped
import { PermissionGate, usePermissions } from '@authstack/react';
function AdminPanel() {
const { hasPermission } = usePermissions();
// Permission check considers:
// - Current user
// - Current organization
// - User's role in that organization
// - Permissions assigned to that role
return (
<PermissionGate
permission="organization:settings:edit"
fallback={<p>Only admins can access settings.</p>}
>
<OrganizationSettings />
</PermissionGate>
);
}
// 6. Create new organizations (tenants)
import { useOrganizations } from '@authstack/react';
function CreateWorkspace() {
const { createOrganization } = useOrganizations();
const handleCreate = async (name: string) => {
const newOrg = await createOrganization({
name,
// Creator automatically becomes owner
});
// Redirect to new organization
navigate(`/org/${newOrg.id}/dashboard`);
};
return <CreateOrganizationForm onSubmit={handleCreate} />;
}┌─────────────────────────────────────────────────────────────────┐
│ MULTI-TENANT REQUEST FLOW │
└─────────────────────────────────────────────────────────────────┘
User Action: "View team members"
(User is john@example.com, currently in "Acme Corp" organization)
│
▼
Frontend Component
<MemberList /> calls useOrganizationMembers()
│
▼
Request sent to AuthStack
GET /api/v1/organizations/{orgId}/members
Headers: {
"X-AuthStack-Key": "ask_live_abc123...",
"Authorization": "Bearer {user_jwt}",
"X-Tenant-ID": "acme-corp-uuid"
}
│
│
└──────────────────────────────────────► API Gateway
│
▼
1. Validate API Key
(Routes to customer's infra)
│
▼
2. Validate JWT
(Confirms user identity)
│
▼
3. Validate Tenant Access
┌─────────────────────┐
│ Is john@example.com │
│ a member of │
│ "Acme Corp"? │
└──────────┬──────────┘
│
┌─────┴─────┐
│ │
▼ ▼
Yes No
│ │
│ ▼
│ Return 403
│ "Access denied"
│
▼
4. Check Permission
(Does john have
"members:view" in Acme?)
│
▼
5. Execute Query
SELECT * FROM members
WHERE org_id = 'acme-corp-uuid'
(Tenant-scoped query)
│
▼
6. Return Response
(Only Acme Corp members)
│
◄─────────────────────────────────────────────┘
│
▼
Frontend receives members
(Only sees Acme Corp team,
cannot see Globex Inc data)
┌─────────────────────────────────────────────────────────────────┐
│ ORGANIZATION LIFECYCLE │
└─────────────────────────────────────────────────────────────────┘
1. CREATION
───────────
User clicks "Create Organization"
│
▼
<CreateOrganization /> form submitted
{ name: "Acme Corp", plan: "pro" }
│
▼
Backend creates:
• Organization record
• Default roles (Owner, Admin, Member, Viewer)
• Default permissions
• Keycloak realm (for tenant isolation)
│
▼
Creator assigned as "Owner"
│
▼
Organization ready to use
2. MEMBER INVITATION
────────────────────
Owner/Admin clicks "Invite Member"
│
▼
<InviteMemberModal />
{ email: "sara@example.com", role: "Member" }
│
▼
Backend:
• Creates invitation record
• Generates secure token
• Sends email to sara@example.com
│
▼
Sara clicks email link
│
▼
If Sara has account:
• Added to organization with assigned role
If Sara is new:
• Prompted to create account
• Then added to organization
3. ROLE MANAGEMENT
──────────────────
Admin opens Role Manager
│
▼
<RoleManager /> displays:
• Owner (built-in, full access)
• Admin (built-in, manage members)
• Member (built-in, standard access)
• Viewer (built-in, read-only)
│
▼
Admin creates custom role:
{ name: "Project Manager", permissions: [...] }
│
▼
Custom role available for assignment
(Only within this organization)
4. PERMISSION ASSIGNMENT
────────────────────────
Admin assigns permissions to role
│
▼
<PermissionEditor role="Project Manager" />
Available permissions:
☑ projects:create
☑ projects:edit
☑ projects:delete
☐ billing:view
☐ members:invite
│
▼
Permissions saved for role
(Scoped to this organization only)
5. CONTEXT SWITCHING
────────────────────
User belongs to multiple organizations
│
▼
<OrganizationSwitcher /> shows:
• Acme Corp (current) ✓
• Side Project
• Freelance Client
│
▼
User selects "Side Project"
│
▼
• Tenant context updated
• New JWT issued with org claims
• UI refreshes with Side Project data
• Permissions re-evaluated for Side Project
┌─────────────────────────────────────────────────────────────────┐
│ SECURITY LAYERS │
└─────────────────────────────────────────────────────────────────┘
Layer 1: API Key Validation
───────────────────────────
• Every request must include valid API key
• Keys are cryptographically generated (256-bit entropy)
• Keys route to customer's dedicated infrastructure
• Keys can be rotated without downtime
• Separate live/test keys prevent accidents
• Rate limiting per key prevents abuse
Layer 2: Transport Security
───────────────────────────
• All traffic over HTTPS (TLS 1.3)
• Certificate pinning available for mobile
• HSTS headers enforced
Layer 3: Customer Infrastructure Isolation
───────────────────────────
• Each AuthStack customer has dedicated infrastructure
• Network isolation via VPC/security groups
• No shared databases between AuthStack customers
• Separate Kubernetes namespaces (or dedicated VMs)
Layer 4: Tenant Isolation (Within Customer)
───────────────────────────
• Each tenant (organization) has isolated data
• Keycloak realms provide identity isolation
• All database queries scoped to tenant_id
• Row-level security enforced
• Cross-tenant access impossible by design
Layer 5: Authentication (Per Tenant)
───────────────────────────
• Industry-standard OAuth 2.0 / OpenID Connect
• Passwords hashed with bcrypt (cost factor 12)
• JWT tokens include tenant claims
• Short expiration (5 min access, 30 day refresh)
• Token signature verification on every request
Layer 6: Authorization (Tenant-Scoped)
───────────────────────────
• Role-based access control (RBAC) per organization
• Permissions evaluated in tenant context
• User's role checked against current organization
• Principle of least privilege enforced
Layer 7: Data Protection
───────────────────────────
• Encryption at rest (AES-256)
• Encryption in transit (TLS)
• Regular automated backups per customer
• Point-in-time recovery available
• Tenant data logically separated
Layer 8: Audit & Monitoring
───────────────────────────
• All authentication events logged per tenant
• Failed login attempt tracking
• Cross-tenant access attempts logged and alerted
• Anomaly detection alerts
• SOC 2 compliant audit trails
interface AuthStackProviderProps {
// Required
apiKey: string; // Your AuthStack API key
// Optional
region?: string; // Deployment region (default: auto-detect)
theme?: ThemeConfig; // Custom styling
onError?: (error: Error) => void; // Global error handler
storage?: 'localStorage' | 'sessionStorage' | 'memory';
children: React.ReactNode;
}
<AuthStackProvider
apiKey="ask_live_abc123xyz789"
region="us-east"
theme={{
primaryColor: '#6366f1',
errorColor: '#ef4444',
fontFamily: 'Inter, sans-serif',
borderRadius: '8px',
}}
onError={(error) => Sentry.captureException(error)}
>
<TenantProvider>
{children}
</TenantProvider>
</AuthStackProvider>// useTenant - Current tenant/organization context
const {
currentOrganization, // Currently selected organization
organizations, // All organizations user belongs to
switchOrganization, // (orgId) => Promise<void>
isLoading,
} = useTenant();
// useOrganizations - Organization management
const {
organizations, // Array of user's organizations
create, // (data) => Promise<Organization>
update, // (id, data) => Promise<Organization>
delete, // (id) => Promise<void>
leave, // (id) => Promise<void>
} = useOrganizations();
// useOrganizationMembers - Member management for current org
const {
members, // Array of members in current org
pendingInvitations, // Array of pending invitations
inviteMember, // (email, role) => Promise<void>
removeMember, // (userId) => Promise<void>
updateMemberRole, // (userId, role) => Promise<void>
cancelInvitation, // (invitationId) => Promise<void>
resendInvitation, // (invitationId) => Promise<void>
} = useOrganizationMembers();
// useRoles - Role management for current org
const {
roles, // Array of roles in current org
createRole, // (data) => Promise<Role>
updateRole, // (id, data) => Promise<Role>
deleteRole, // (id) => Promise<void>
assignPermissions, // (roleId, permissions) => Promise<void>
} = useRoles();
// usePermissions - Permission checking in current org context
const {
permissions, // Array of current user's permissions in org
roles, // Array of current user's roles in org
hasPermission, // (permission: string) => boolean
hasRole, // (role: string) => boolean
hasAnyPermission, // (permissions: string[]) => boolean
hasAllPermissions, // (permissions: string[]) => boolean
isOwner, // Boolean - is user the org owner
isAdmin, // Boolean - does user have admin role
} = usePermissions();
// useAuth - Core authentication hook
const {
user, // Current user object or null
isAuthenticated, // Boolean authentication status
isLoading, // True during initial load / operations
error, // Last error or null
login, // (email, password) => Promise<void>
logout, // () => Promise<void>
signup, // (data) => Promise<void>
refreshToken, // () => Promise<void>
updateProfile, // (data) => Promise<void>
} = useAuth();
// useSubscription - Organization's subscription status
const {
subscription, // Current org's subscription object
plan, // Plan details
isActive, // Is subscription active
isTrial, // Is in trial period
hasFeature, // (feature: string) => boolean
usage, // Current usage metrics
limits, // Plan limits
upgrade, // (planId: string) => Promise<void>
cancel, // () => Promise<void>
getBillingPortal, // () => Promise<string> (URL)
} = useSubscription();// OrganizationSwitcher
interface OrganizationSwitcherProps {
onSwitch?: (org: Organization) => void;
showCreateButton?: boolean;
className?: string;
}
// MemberList
interface MemberListProps {
showRoles?: boolean;
showActions?: boolean; // Edit/remove buttons
onMemberClick?: (member: Member) => void;
emptyState?: React.ReactNode;
className?: string;
}
// InviteMemberModal
interface InviteMemberModalProps {
isOpen: boolean;
onClose: () => void;
onInvite?: (email: string, role: string) => void;
availableRoles?: Role[]; // Defaults to org's roles
defaultRole?: string;
}
// PermissionGate
interface PermissionGateProps {
permission: string | string[];
requireAll?: boolean; // If multiple, require all vs any
orgId?: string; // Check against specific org (default: current)
fallback?: React.ReactNode;
children: React.ReactNode;
}
// RoleManager
interface RoleManagerProps {
onRoleCreate?: (role: Role) => void;
onRoleUpdate?: (role: Role) => void;
onRoleDelete?: (roleId: string) => void;
readOnly?: boolean;
className?: string;
}| Feature | Starter | Pro | Enterprise |
|---|---|---|---|
| Monthly Active Users | 1,000 | 25,000 | Unlimited |
| Tenants (Organizations) | 5 | 100 | Unlimited |
| Members per Tenant | 10 | 100 | Unlimited |
| Custom Roles per Tenant | 3 | 10 | Unlimited |
| Infrastructure | Dedicated VM | Dedicated VM | Dedicated VM + SLA |
| Regions | US only | All regions | All + custom |
| AI Customization | 10 prompts/mo | 100 prompts/mo | Unlimited |
| AI Features | Basic (UI, theme) | Full (auth, security) | Full + custom models |
| Version History | 7 days | 90 days | Unlimited |
| Support | Email (72h) | Priority (24h) | Dedicated (4h SLA) |
| Audit Logs | 7 days | 90 days | 2 years |
| SSO/SAML per Tenant | ❌ | ✅ | ✅ |
| Custom Domain | ❌ | ✅ | ✅ |
| Price | $49/mo | $199/mo | $799/mo |
| vs. Auth0/Okta | vs. Firebase Auth | vs. Self-Hosted |
|---|---|---|
| ✅ Native multi-tenancy | ✅ Full multi-tenant support | ✅ No maintenance burden |
| ✅ Dedicated infra (not shared) | ✅ No vendor lock-in | ✅ No DevOps required |
| ✅ Predictable pricing | ✅ Organization management | ✅ Automatic updates |
| ✅ React-native components | ✅ Fine-grained permissions | ✅ Built-in compliance |
| ✅ Per-tenant customization | ✅ Per-tenant billing | ✅ Instant provisioning |
| ✅ AI-powered customization | ✅ AI-powered customization | ✅ AI-powered customization |
| ✅ No code changes needed | ✅ Natural language config | ✅ Auto-deploy to your VM |
AuthStack transforms multi-tenant authentication from a 6-12 month engineering project into a simple npm install—with AI-powered customization that deploys changes automatically to your dedicated infrastructure.
- Subscribe → Choose your plan and region
- Provision → Dedicated VM created automatically in your chosen region
- Install →
npm install @authstack/react - Configure → Add your API key
- Build → Use pre-built multi-tenant components
- Customize → Use AI chatbot: "Add Google SSO" → Auto-deployed
- Launch → Your tenants can authenticate, manage teams, and collaborate
For Developers:
- Drop-in React components with built-in multi-tenancy
- AI chatbot to customize without writing code
- Changes auto-deployed to your VM
For B2B SaaS:
- Native organization management
- Role-based access and tenant isolation
- Per-tenant subscriptions and billing
For Enterprises:
- Dedicated VM infrastructure per customer
- Multi-region deployment with data residency
- Compliance-ready with SOC 2 audit trails
- Version control with instant rollback
Multi-tenant authentication infrastructure with AI-powered customization, handled.
MIT © AuthStack