Components

Tenant Console

A prebuilt, org-scoped admin surface you hand to each customer. Embed it in your app or link to the hosted version - it is scoped to one organisation and never sees past it.

Preview

Drop-in components and the SDKs are in development and available to design partners. Samples are illustrative of the planned API.

The Tenant Consoleis a ready-made admin UI scoped to a single organisation, meant to be handed to that customer’s admins. It manages that org’s members, roles, SSO, MFA policy, agents and its own audit trail, and nothing else. It is the same component that powers the hosted admin product, exposed for you to embed or link.

It is scoped by the active organisation in the session and gated by delegated admin permissions, so a tenant admin can never reach another organisation’s data.

Mount the console

The Tenant Console is a React component from @orthid/react. Mount it on a catch-all route so its internal pages (members, roles, audit) can own real URLs, then pass a basePath so links resolve under your app.

app/admin/[[...rest]]/page.tsx

import { TenantConsole } from "@orthid/react";

export default function AdminPage() {
  return (
    <TenantConsole
      basePath="/admin"
      sections={["members", "roles", "sso", "agents", "audit"]}
    />
  );
}

Embed or link

You have two integration styles:

Embed the component directly, as above, when you want the console to live inside your app shell, nav and theme.
Link out to the OrthID-hosted console when you would rather not host admin yourself. Generate a one-time, org-scoped link and redirect the admin to it.

Hosted console link (server)

import { orthid } from "@orthid/sdk";

// short-lived link into the hosted Tenant Console for one org
const { url } = await orthid.consoles.createLink({
  console: "tenant",
  organizationId: org.id,
  ttl: "10m",
});

redirect(url);

Access control

The console never grants access on its own. It checks the session actor against required permissions and renders only what that actor is allowed to see and do. It requires a delegated admin role on the active organisation, and it is scoped to that organisation only.

It honours your RBAC & permissionsmodel, so a tenant admin can never reach another organisation’s data and every action is written to the audit log.

Gate the route too

Embedding the console does not replace route protection. Guard the page with orthidMiddleware (or a server check) so unauthorised actors never reach it, even before the component mounts.

Theming

The console accepts the same appearance prop as the rest of the kit: design tokens for color, radius and type, plus per-element overrides. Theme once and it applies across every section.

Theming

<TenantConsole
  basePath="/admin"
  appearance={{
    tokens: { colorPrimary: "#004a99", borderRadius: "12px" },
    elements: { sidebar: "bg-slate-50 border-r border-slate-200" },
  }}
/>

Props

Prop	Type	Default	Description
`basePath`	`string`	"/"	Route prefix the console is mounted at. Internal links and pages resolve under this path.
`appearance`	`AppearanceConfig`	-	Theme the console with design tokens and per-element class overrides.
`sections`	`ConsoleSection[]`	all available	Which sections to show and in what order (members, roles, sso, agents, audit, and more).
`organizationId`	`string`	active org	Pin the console to a specific organisation instead of the session's active one.
`readOnly`	`boolean`	false	Render every section in view-only mode, hiding mutating actions.

Next steps

Admin product - the org-scoped console and audit in detail.
RBAC & permissions - the roles the console enforces.