āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/_partials/billing/checking-permission-using-protect ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
export default function ProtectedManageContentPage() { return ( <Protect permission="premium_access:manage" fallback={ <p>Only subscribers with the Premium Access Manage permission can access this content.</p> } > <h1>Exclusive Management Content</h1> <p>This content is only visible to users with Premium Access Manage permission.</p> </Protect> ) }
</If>
<If sdk="nuxt">
```vue {{ filename: 'pages/protected-manage-content.vue' }}
<script setup lang="ts">
// Components are automatically imported
</script>
<template>
<main>
<Protect
permission="premium_access:manage"
fallback="Only subscribers with the Premium Access Manage permission can access this content."
>
<h1>Exclusive Management Content</h1>
<p>This content is only visible to users with Premium Access Manage permission.</p>
</Protect>
</main>
</template>
export default function ProtectedManageContentPage() { return ( <Protect permission="premium_access:manage" fallback={ <p>Only subscribers with the Premium Access Manage permission can access this content.</p> } > <h1>Exclusive Management Content</h1> <p>This content is only visible to users with Premium Access Manage permission.</p> </Protect> ) }
</If>
<If sdk="react-router">
```tsx {{ filename: 'app/routes/protected-manage-content.tsx' }}
import type { Route } from './+types/protected-manage-content'
import { Protect } from '@clerk/react-router'
export function meta({}: Route.MetaArgs) {
return [{ title: 'Protected Manage Content' }]
}
export default function ProtectedManageContentPage() {
return (
<Protect
permission="premium_access:manage"
fallback={
<p>Only subscribers with the Premium Access Manage permission can access this content.</p>
}
>
<h1>Exclusive Management Content</h1>
<p>This content is only visible to users with Premium Access Manage permission.</p>
</Protect>
)
}
export default function ProtectedManageContentPage() { return ( <Protect permission="premium_access:manage" fallback={ <p>Only subscribers with the Premium Access Manage permission can access this content.</p> } > <h1>Exclusive Management Content</h1> <p>This content is only visible to users with Premium Access Manage permission.</p> </Protect> ) }
</If>
<If sdk="tanstack-react-start">
```tsx {{ filename: 'app/routes/protected-manage-content.tsx' }}
import { Protect } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/protected-manage-content')({
component: ProtectedManageContentPage,
})
function ProtectedManageContentPage() {
return (
<Protect
permission="premium_access:manage"
fallback={
<p>Only subscribers with the Premium Access Manage permission can access this content.</p>
}
>
<h1>Exclusive Management Content</h1>
<p>This content is only visible to users with Premium Access Manage permission.</p>
</Protect>
)
}
export default function ProtectedManageContentPage() { return ( <Protect permission="premium_access:manage" fallback={ <Text> Only subscribers with the Premium Access Manage permission can access this content. </Text> } > <View> <Text>Exclusive Management Content</Text> <Text>This content is only visible to users with Premium Access Manage permission.</Text> </View> </Protect> ) }
</If>
<If sdk={["expressjs", "fastify", "js-backend"]}>
> [!NOTE]
> To see an example of how to use the `Protect` component, please select one of the frontend SDKs on the sidebar.
</If>
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā