component - Control components - Next.js | Clerk Docs

`<Show>` component

The <Show /> 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

Authentication checks

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

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

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.

Render content by Permissions

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

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

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.

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

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

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

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

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

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

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

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 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, Permission, Plan, or Role for authorization checks, or a callback function for custom conditional logic.

Upgrading from Core 2 to Core 3

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

Update your imports

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

Signed in / signed out

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

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

Authorization checks (roles/permissions/features/plans)

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

- <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>`

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

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

`condition` callback

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

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

<Show> component

Feedback

`<Show>` component