Show

The <Show> component conditionally renders children based on authentication state, role, or permission. It is a more flexible alternative to <Protect> with a declarative when prop.

Installation

pnpm add @wocha/ui @wocha/react

Or scaffold with the CLI

npx @wocha/cli init --framework nextjs

import { Show } from "@wocha/ui";

Basic usage

// Signed-in users only
<Show when="signed-in">
  <Dashboard />
</Show>
 
// Signed-out users only (e.g. marketing CTA)
<Show when="signed-out">
  <SignInButton />
</Show>

Props

Prop	Type	Default	Description
`when`	`ShowWhen`	—	Condition that must be true to render children
`fallback`	`ReactNode`	—	Rendered when the condition is false or loading
`children`	`ReactNode`	—	Content to render when visible

`ShowWhen` values

Value	Description
`"signed-in"`	User is authenticated
`"signed-out"`	User is not authenticated
`{ role: string }`	User has matching role claim
`{ permission: string }`	User has permission in active organisation
`(has) => boolean`	Custom predicate with role/permission helpers

Role and permission examples

<Show when={{ role: "admin" }} fallback={<p>Admins only.</p>}>
  <AdminPanel />
</Show>
 
<Show when={{ permission: "billing:manage" }}>
  <BillingSettings />
</Show>

Permission checks require apiUrl and an active orgId on the session.

Custom predicate

<Show
  when={(has) => has({ role: "admin" }) || has({ permission: "reports:view" })}
  fallback={<p>Insufficient access.</p>}
>
  <Reports />
</Show>

Framework notes

Works identically in React and Next.js client components. Pair with WochaProvider or WochaSessionProvider.

Protect — lower-level auth gate with explicit permission object
Lifecycle — loading state components

Show

On this page