# `<Show>` component

The [`<Show />`](/content/docs/nextjs/reference/components/control/show/index.html) component protects content or even entire routes based on:

- authentication: whether the user is signed-in or not.
- authorization: whether the user has been granted a specific type of access control (Role, Permission, Feature, or Plan)

`<Show />` with `when='signed-in'` or `when='signed-out'` performs authentication checks. To perform authorization checks⁠, you can pass different values to the `when` prop, like `when={{ role: '...' }}`, `when={{ permission: '...' }}`, `when={{ feature: '...' }}`, or `when={{ plan: '...' }}`.

`<Show />` accepts a `fallback` prop that will be rendered if the user fails the authentication or authorization checks.

`<Show />` can be used both client-side and server-side (in Server Components).

**Warning**  
This component only **visually hides** its children. The contents of its children remain accessible via the browser's source code even if the user fails the authentication/authorization check. Do not use this component to hide sensitive information that should be completely inaccessible to unauthorized users. For truly sensitive data, perform authorization checks⁠ on the server before sending the data to the client.

## [Usage](/content/docs/nextjs/reference/components/control/show#usage/index.html)

### [Authentication checks](/content/docs/nextjs/reference/components/control/show#authentication-checks/index.html)

`<Show when='signed-in'>` performs authentication checks. It will render its children if the user is signed-in, and its `fallback` prop if the user is signed-out.

```javascript
import { Show } from '@clerk/nextjs'

export default function Page() {
  return (
    <Show fallback={<p>Users that are signed-out can see this.</p>} when="signed-in">
      <p>Users that are signed-in can see this.</p>
    </Show>
  )
}
```

### [Authorization checks](/content/docs/nextjs/reference/components/control/show#authorization-checks/index.html)

To limit who is able to see the content that `<Show>` renders, you can pass **one** of the access control values to the `when` prop: `when={{ permission: '...' }}`, `when={{ role: '...' }}`, `when={{ feature: '...' }}`, or `when={{ plan: '...' }}`. It's recommended to use **Permission-based** authorization over **Role-based** authorization, and **Feature-based** authorization over **Plan-based** authorization, as they are more flexible, easier to manage, and more secure.

If you use `when='signed-in'` without any access control values, `<Show>` will render its children if the user is signed in, regardless of their Role or its Permissions.

For more complex authorization logic, [pass conditional logic to the `when` prop](/content/docs/nextjs/reference/components/control/show#render-content-conditionally/index.html).

### [Render content by Permissions](/content/docs/nextjs/reference/components/control/show#render-content-by-permissions/index.html)

The following example demonstrates how to use the `<Show />` component to protect content by checking if the user has the `org:invoices:create` Permission.

```javascript
import { Show } from '@clerk/nextjs'

export default function Page() {
  return (
    <Show
      when={{ permission: 'org:invoices:create' }}
      fallback={<p>You do not have the Permissions to create an invoice.</p>}
    >
      <p>Users with Permission org:invoices:create can see this.</p>
    </Show>
  )
}
```

### [Render content by Role](/content/docs/nextjs/reference/components/control/show#render-content-by-role/index.html)

While authorization by `when={{ permission: '...' }}` is **recommended**, for convenience, `<Show>` allows a `when={{ role: '...' }}` prop to be passed.

The following example demonstrates how to use the `<Show />` component to protect content by checking if the user has the `org:billing` Role.

```javascript
import { Show } from '@clerk/nextjs'

export default function ProtectPage() {
  return (
    <Show
      when={{ role: 'org:billing' }}
      fallback={<p>Only a member of the Billing department can access this content.</p>}
    >
      <p>Users with Role org:billing can see this.</p>
    </Show>
  )
}
```

### [Render content by Plan](/content/docs/nextjs/reference/components/control/show#render-content-by-plan/index.html)

The following example demonstrates how to use `<Show />` to protect content by checking if the user has a Plan.

```javascript
import { Show } from '@clerk/nextjs'

export default function ProtectPage() {
  return (
    <Show
      when={{ plan: 'bronze' }}
      fallback={<p>Sorry, only subscribers to the Bronze plan can access this content.</p>}
    >
      <p>Welcome, Bronze subscriber!</p>
    </Show>
  )
}
```

### [Render content by Feature](/content/docs/nextjs/reference/components/control/show#render-content-by-feature/index.html)

The following example demonstrates how to use `<Show />` to protect content by checking if the user has a Feature.

```javascript
import { Show } from '@clerk/nextjs'

export default function Page() {
  return (
    <Show
      when={{ feature: 'premium_access' }}
      fallback={<p>Sorry, only subscribers with the Premium Access feature can access this content.</p>}
    >
      <p>Congratulations! You have access to the Premium Access feature.</p>
    </Show>
  )
}
```

### [Render content conditionally](/content/docs/nextjs/reference/components/control/show#render-content-conditionally/index.html)

The following example uses `<Show>`'s `when` prop with a callback function to conditionally render its children if the user has the correct Role.

```javascript
import type { PropsWithChildren } from 'react'
import { Show } from '@clerk/nextjs'

export default function Page() {
  return (
    <Show
      when={(has) => has({ role: 'org:admin' }) || has({ role: 'org:billing_manager' })}
      fallback={<p>Only an Admin or Billing Manager can access this content.</p>}
    >
      <p>The settings page.</p>
    </Show>
  )
}
```

## [Properties](/content/docs/nextjs/reference/components/control/show#properties/index.html)

- **fallback?** (Type: JSX)  
  An element to be rendered when a user doesn't have the correct type of access control to access the protected content.

- **treatPendingAsSignedOut?** (Type: boolean)  
  A boolean that indicates whether to treat [pending sessions](/content/docs/nextjs/reference/types/session-status#properties/index.html) as signed out. Defaults to `true`.

- **when** (Type: `'signed-in' | 'signed-out' | { feature: string } | { permission: string } | { plan: string } | { role: string } | (has) => boolean)  
  Determines when to render the children. Can be `'signed-in'` or `'signed-out'` for authentication checks, an object with a [Feature](/content/docs/guides/billing/overview/index.html), [Permission](/content/docs/guides/organizations/control-access/roles-and-permissions/index.html), [Plan](/content/docs/guides/billing/overview/index.html), or [Role](/content/docs/guides/organizations/control-access/roles-and-permissions/index.html) for authorization checks, or a callback function for custom conditional logic.

## [Upgrading from Core 2 to Core 3](/content/docs/nextjs/reference/components/control/show#upgrading-from-core-2-to-core-3/index.html)

`<Show>` replaces the removed `<Protect>`, `<SignedIn>`, and `<SignedOut>` components. Here's how to migrate each:

### [Update your imports](/content/docs/nextjs/reference/components/control/show#update-your-imports/index.html)

```javascript
- import { Protect, SignedIn, SignedOut } from '@clerk/nextjs'
+ import { Show } from '@clerk/nextjs'
```

### [Signed in / signed out](/content/docs/nextjs/reference/components/control/show#signed-in-signed-out/index.html)

```javascript
- <SignedIn>
+ <Show when="signed-in">
      <Dashboard />
- </SignedIn>
+ </Show>

- <SignedOut>
+ <Show when="signed-out">
      <SignInPage />
- </SignedOut>
+ </Show>
```

### [Authorization checks (roles/permissions/features/plans)](/content/docs/nextjs/reference/components/control/show#authorization-checks-roles-permissions-features-plans/index.html)

`<Protect>`'s `role`, `permission`, `feature`, and `plan` props become a single object passed to `<Show>`'s `when` prop. The `fallback` prop — or fallback slot in Astro, Vue, and Nuxt — carries over unchanged.

```javascript
- <Protect role="admin">
+ <Show when={{ role: 'admin' }}>
      <AdminPanel />
- </Protect>
+ </Show>

- <Protect permission="org:billing:manage">
+ <Show when={{ permission: 'org:billing:manage' }}>
      <BillingSettings />
- </Protect>
+ </Show>

- <Protect feature="widgets">
+ <Show when={{ feature: 'widgets' }}>
      <WidgetsPanel />
- </Protect>
+ </Show>

- <Protect plan="pro">
+ <Show when={{ plan: 'pro' }}>
      <ProFeatures />
- </Protect>
+ </Show>
```

### [Bare `<Protect>`](/content/docs/nextjs/reference/components/control/show#bare-protect/index.html)

A bare `<Protect>` with no props behaves like `<SignedIn>`, so migrate it to `<Show when="signed-in">`:

```javascript
- <Protect>
+ <Show when="signed-in">
      <Dashboard />
- </Protect>
+ </Show>
```

### [`condition` callback](/content/docs/nextjs/reference/components/control/show#condition-callback/index.html)

If you were using `condition={(has) => ...}` on `<Protect>`, pass that callback to `when`:

```javascript
- <Protect condition={(has) => ...}>
+ <Show when={(has) => ...}>
      <AdminPanel />
- </Protect>
+ </Show>
```

## Feedback

What did you think of this content?

It was helpful  
It was not helpful  
I have feedback

---

Last updated on Sep 3, 2026

[GitHubEdit on GitHub](https://github.com/clerk/clerk-docs/edit/main/docs/reference/components/control/show.mdx)