Hide signed-out-only content
A page contains controls that should appear only to authenticated users.
Clerk · Component
Protect
Protect conditionally displays content or entire routes for signed-in users and can additionally require a role, permission, feature, or plan. It supports declarative authentication and authorization boundaries.
How it works
Protect conditionally renders its children when the user is signed in and, when configured, has the required access control. It can guard a portion of a page or an entire route, and it can show fallback content when the condition is not met.
Syntax
<Protect>children</Protect>Returns
Conditionally rendered React children; the page describes rendering behavior rather than a return value.
Key points
- Use Protect around either a UI fragment or a complete route boundary.
- Authentication is the basic gate; authorization adds a second, optional gate.
- The supported access-control categories are roles, permissions, features, and plans.
- Protected children stay out of the rendered output for signed-out users.
Common mistakes
- Unauthenticated users do not receive the protected children.
- Adding authorization requirements makes rendering depend on the user's granted access, not merely authentication.
Example: Protect content by role
import { Protect } from '@clerk/nextjs'
export default function AdminPanel() {
return (
<Protect role="org:admin" fallback={<p>Access denied.</p>}>
<section>Admin controls</section>
</Protect>
)
}This renders the admin controls only for signed-in users who have the specified organization role; other users see the fallback.
When to use it
Gate role-based UI
An administrative area must be limited to users with a particular organization role.
Enforce entitlement visibility
A paid capability should be shown only to users entitled through a feature or plan.
Interview questions
QWhen does Protect render its children?
The component renders its children only when the current user is signed in. It can also require a configured access-control grant before rendering them.
Follow-up: How would you handle users who fail the condition? Use the component's fallback content so unauthorized or signed-out users receive an alternate UI.
QWhat can Protect guard?
Protect can wrap a section of UI or an entire route because its purpose is to protect content at either scope. The protected content is withheld unless the authentication and any configured authorization checks pass.
Follow-up: What is the practical benefit of route-level use? It provides a declarative boundary around all content on that route rather than repeating checks in individual components.
QWhich authorization models does Protect support?
Authorization can be based on a specific access-control type, including a role, permission, feature, or plan. The user must have the required grant for the protected children to render.
Follow-up: What should be selected for a business entitlement rather than an organizational job function? A feature or plan is the more appropriate access-control category.
Related
RolePermissionFeaturePlanfallback