React SPA — B2B SaaS (multi-tenant) - Authaz

React SPA — B2B SaaS (multi-tenant) - Authaz - Docs

import { useRequireUser } from "@authaz/react";
 
export default function Dashboard() {
  const user = useRequireUser({ redirectTo: "/" });
  if (!user) return null;
 
  if (!user.tenantId) {
    return <p>No tenant selected — sign in again to pick one.</p>;
  }
 
  return (
    <main>
      <h1>Hello, {user.email}</h1>
      <p>Tenant: <code>{user.tenantId}</code></p>
      <p>Organization: <code>{user.organizationId}</code></p>
    </main>
  );
}

import { useUser } from "@authaz/react";
import { useEffect, useState } from "react";
 
export function Invoices() {
  const user = useUser();
  const [invoices, setInvoices] = useState<unknown[]>([]);
 
  useEffect(() => {
    if (!user?.tenantId) return;
    // No need to send tenantId — backend reads it from the JWT
    fetch("/api/invoices")
      .then((r) => r.json())
      .then(setInvoices);
  }, [user?.tenantId]);
 
  return <ul>{/* render invoices */}</ul>;
}

React SPA — B2B SaaS (multi-tenant)

1. What you'll build#

2. Application setup#

3. Install#

4. Configure

5. Wire it up#

6. Read the user and tenant#

7. Tenant-scoped API calls#

8. Common gotchas#

9. Next steps#