--- title: "``" description: The Show component protects content or even entire routes based on authentication, and optionally, authorization. sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue sdkScoped: "true" canonical: /docs/:sdk:/reference/components/control/show lastUpdated: 2026-01-14T23:24:51.000Z availableSdks: astro,chrome-extension,expo,nextjs,nuxt,react,react-router,remix,tanstack-react-start,vue notAvailableSdks: js-frontend,android,ios,expressjs,fastify,go,ruby,js-backend activeSdk: react sourceFile: /docs/reference/components/control/show.mdx --- The \ 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) `` with `when='signed-in'` or `when='signed-out'` performs authentication checks. To perform authorization checksAuthorization checks are checks you perform in your code to determine the access rights and privileges of a user, ensuring they have the necessary permissions to perform specific actions or access certain content. Learn more about [authorization checks](/docs/guides/secure/authorization-checks)., you can pass different values to the `when` prop, like `when={{ role: '...' }}`, `when={{ permission: '...' }}`, `when={{ feature: '...' }}`, or `when={{ plan: '...' }}`. `` accepts a `fallback` prop that will be rendered if the user fails the authentication or authorization checks. `` can be used both client-side and server-side (in Server Components). > \[!CAUTION] > 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 checksAuthorization checks are checks you perform in your code to determine the access rights and privileges of a user, ensuring they have the necessary permissions to perform specific actions or access certain content. Learn more about [authorization checks](/docs/guides/secure/authorization-checks). on the server before sending the data to the client. ## Usage ### Authentication checks `` performs authentication checks. It will render its children if the user is signed-in, and its `fallback` prop if the user is signed-out. ```jsx {{ filename: 'src/App.tsx' }} import { Show } from '@clerk/react' function App() { return ( Users that are signed-out can see this.

} when="signed-in">

Users that are signed-in can see this.

) } export default App ``` ### Authorization checks To limit who is able to see the content that `` 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, `` 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 `` component to protect content by checking if the user has the `org:invoices:create` Permission. ```jsx {{ filename: 'src/App.tsx' }} import { Show } from '@clerk/react' function App() { return ( You do not have the Permissions to create an invoice.

} >

Users with Permission org:invoices:create can see this.

) } export default App ``` ### Render content by Role While authorization by `when={{ permission: '...' }}` is **recommended**, for convenience, `` allows a `when={{ role: '...' }}` prop to be passed. The following example demonstrates how to use the `` component to protect content by checking if the user has the `org:billing` Role. ```jsx {{ filename: 'src/App.tsx' }} import { Show } from '@clerk/react' function App() { return ( Only a member of the Billing department can access this content.

} >

Users with Role org:billing can see this.

) } export default App ``` ### Render content by Plan The following example demonstrates how to use `` to protect content by checking if the user has a Plan. ```tsx {{ filename: 'src/App.tsx' }} import { Show } from '@clerk/react' function App() { return ( Sorry, only subscribers to the Bronze plan can access this content.

} >

Welcome, Bronze subscriber!

) } export default App ``` ### Render content by Feature The following example demonstrates how to use `` to protect content by checking if the user has a Feature. ```tsx {{ filename: 'src/App.tsx' }} import { Show } from '@clerk/react' function App() { return ( Sorry, only subscribers with the Premium Access feature can access this content.

} >

Congratulations! You have access to the Premium Access feature.

) } export default App ``` ### Render content conditionally The following example uses ``'s `when` prop with a callback function to conditionally render its children if the user has the correct Role. ```tsx {{ filename: 'src/App.tsx' }} import { Show } from '@clerk/react' function App() { return ( has({ role: 'org:admin' }) || has({ role: 'org:billing_manager' })} fallback={

Only an Admin or Billing Manager can access this content.

} >

The settings page.

) } export default App ``` ## Properties * `fallback?` * `JSX` Optional UI to show when a user doesn't have the correct type of access control to access the protected content. *** * `treatPendingAsSignedOut?` * `boolean` A boolean that indicates whether to treat pending sessions as signed out. Defaults to `true`. *** * `when` * `'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](/docs/guides/billing/overview), [Permission](/docs/guides/organizations/control-access/roles-and-permissions), [Plan](/docs/guides/billing/overview), or [Role](/docs/guides/organizations/control-access/roles-and-permissions) for authorization checks, or a callback function for custom conditional logic.

You are not authorized to access this Preview Deployment