Skip to main content
Docs
Dashboard

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

Caution

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

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 role or permission to 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>

Warning

<Protect> can only accept permission or role, not both. The recommended approach is to use permission.

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> 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>
import { Protect } from '@clerk/clerk-expo'
import { Text } from 'react-native'

export default function Screen() {
  return (
    <Protect
      permission="org:invoices:create"
      fallback={<Text>You do not have the permissions to create an invoice.</Text>}
    >
      <Text>Users with permission org:invoices:create can see this.</Text>
    </Protect>
  )
}
<script setup lang="ts">
import { Protect } from '@clerk/vue'
</script>

<template>
  <Protect permission="org:invoices:create">
    <template #fallback>
      <p>You do not have the permissions to create an invoice.</p>
    </template>
    <slot />
  </Protect>
</template>

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>
<script setup lang="ts">
import { Protect } from '@clerk/vue'
</script>

<template>
  <Protect role="org:billing">
    <template #fallback>
      <p>Only a member of the Billing department can access this content.</p>
    </template>
    <slot />
  </Protect>
</template>
import { Protect } from '@clerk/clerk-expo'
import { Text } from 'react-native'

export default function Screen() {
  return (
    <Protect
      permission="org:billing"
      fallback={<Text>Only a member of the Billing department can access this content.</Text>}
    >
      <Text>Users with role org:billing can see this.</Text>
    </Protect>
  )
}

Render content conditionally

The following example uses <Protect>'s condition prop to conditionally render its children if the user has the correct role.

app/dashboard/settings/layout.tsx
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>
<script setup>
import { Protect } from '@clerk/vue'
</script>

<template>
  <Protect :condition="(has) => has({ role: 'org:admin' }) || has({ role: 'org:billing_manager' })">
    <template #fallback>
      <p>Only an Admin or Billing Manager can access this content.</p>
    </template>
    <p>Visible content.</p>
  </Protect>
</template>
app/dashboard/settings/_layout.tsx
import { Slot } from 'expo-router'
import { Protect } from '@clerk/clerk-expo'
import { Text } from 'react-native'

export default function SettingsLayout() {
  return (
    <Protect
      condition={(has) => has({ role: 'org:admin' }) || has({ role: 'org:billing_manager' })}
      fallback={<Text>Only an Admin or Billing Manager can access this content.</Text>}
    >
      <Slot />
    </Protect>
  )
}

Feedback

What did you think of this content?
Edit this page on GitHub

Last updated on