<Protect>
The <Protect> component is used for authorization. It only renders its children when the current user has the specified permission or role in the organization.
Properties
- Name
condition?- Type
has => boolean- Description
Optional conditional logic that renders the children if it returns
true.
- Name
fallback?- Type
JSX- Description
An optional snippet of JSX to show when a user doesn't have the
roleorpermissionto access the protected content.
- Name
permission?- Type
string- Description
Optional string corresponding to a Role's Permission in the format
org:<resource>:<action>
- Name
role?- Type
string- Description
Optional string corresponding to an Organization's Role in the format
org:<role>
Usage
To limit who is able to see the content that <Protect> renders, you can pass either the permission or role prop. The recommended approach is to use permission because this lets you modify roles without breaking your application. Permissions can be assigned to different roles with ease.
If you do not pass either prop, <Protect> behaves the same as <SignedIn> and 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 condition prop.
Render content by permissions
The children of the following component will only be visible to users with roles that have the org:invoices:create permission.
import { Protect } from '@clerk/nextjs'
export default function ProtectPage() {
return (
<Protect
permission="org:invoices:create"
fallback={<p>You do not have the permissions to create an invoice.</p>}
>
{children}
</Protect>
)
}import { Protect } from '@clerk/clerk-react'
export default function ProtectPage() {
return (
<Protect
permission="org:invoices:create"
fallback={<p>You do not have the permissions to create an invoice.</p>}
>
{children}
</Protect>
)
}---
import { Protect } from '@clerk/astro/components'
---
<Protect permission="org:invoices:create">
<p slot="fallback">You do not have the permissions to create an invoice.</p>
<slot />
</Protect>Render content by role
While authorization by permission is recommended, for convenience, <Protect> allows a role prop to be passed. The children of the following component will only be visible to users with the org:billing role.
import { Protect } from '@clerk/nextjs'
export default function ProtectPage() {
return (
<Protect
role="org:billing"
fallback={<p>Only a member of the Billing department can access this content.</p>}
>
{children}
</Protect>
)
}import { Protect } from '@clerk/clerk-react'
export default function ProtectPage() {
return (
<Protect
role="org:billing"
fallback={<p>Only a member of the Billing department can access this content.</p>}
>
{children}
</Protect>
)
}---
import { Protect } from '@clerk/astro/components'
---
<Protect role="org:billing">
<p slot="fallback">Only a member of the Billing department can access this content.</p>
<slot />
</Protect>Render content conditionally
The following example uses <Protect>'s condition prop to conditionally render its children if the user has the correct role.
import type { PropsWithChildren } from 'react'
import { Protect } from '@clerk/nextjs'
export default function SettingsLayout(props: PropsWithChildren) {
return (
<Protect
condition={(has) => has({ role: 'org:admin' }) || has({ role: 'org:billing_manager' })}
fallback={<p>Only an Admin or Billing Manager can access this content.</p>}
>
{props.children}
</Protect>
)
}---
import { Protect } from '@clerk/astro/components'
---
<Protect condition={(has) => has({ role: 'org:admin' }) || has({ role: 'org:billing_manager' })}>
<p slot="fallback">Only an Admin or Billing Manager can access this content.</p>
<slot />
</Protect>Feedback
Last updated on