Components

Consoles

Two prebuilt admin surfaces. The Operator Console runs the whole platform; the Tenant Console is an org-scoped admin you hand to each customer. Embed either, theme both.

OrthID provides two ready-made consoles so you do not have to build admin UI from scratch. The Operator Console is for you, the platform operator: it spans every organisation, region and actor. The Tenant Consoleis scoped to a single organisation and is meant to be handed to that customer’s admins. Both are the same components that power the hosted admin product, exposed for you to embed or link.

Operator Console vs Tenant Console

The two consoles differ in scope and audience:

Operator Console - platform-wide. Manage every organisation, provision regions, view the global audit log, rotate keys and act on any actor. Restricted to operator-role staff.
Tenant Console- one organisation only. Manage that org’s members, roles, SSO, MFA policy, agents and its own audit trail. Scoped by the active organisation in the session and gated by delegated admin permissions.

Operator Console

Scope: all organisations and regions
Audience: platform operators
Access: operator role
Component: <OperatorConsole/>

Tenant Console

Scope: one organisation
Audience: customer admins
Access: org admin (delegated)
Component: <TenantConsole/>

Mount a console

Both consoles are React components from @orthid/react. Mount one 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"]}
    />
  );
}

The Operator Console mounts the same way. Give it its own route so it stays separate from tenant-facing admin.

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

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

export default function OperatorPage() {
  return <OperatorConsole basePath="/operator" />;
}

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, region-scoped link and redirect the actor 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

Consoles never grant access on their own. Each surface checks the session actor against required permissions and renders only what that actor is allowed to see and do:

The Operator Console requires the platform operator role.
The Tenant Console requires a delegated admin role on the active organisation, and it is scoped to that organisation only.

Both honour 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 a 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

Both consoles accept 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 console section.

Theming

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

Common props

Props shared by both consoles:

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).

Tenant Console only

Prop	Type	Default	Description
`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 hosted consoles in detail.
RBAC & permissions - the roles consoles enforce.