āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/_partials/billing/checking-permission-using-has-function ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
export function ManagePremiumContent() { const { isLoaded, has } = useAuth()
if (!isLoaded) return <div>Loading...</div>
const hasPremiumAccessManage = has({ permission: 'org:premium_access:manage' })
if (!hasPremiumAccessManage)
return (
<h1>Only subscribers with the Premium Access Manage permission can access this content.</h1>
)
return <h1>Our Exclusive Content</h1>
}
```astro {{ filename: 'src/pages/manage-premium-content.astro' }}
---
import { ManagePremiumContent } from '../components/manage-premium-content'
---
<!doctype html>
<html>
<body>
<ManagePremiumContent client:load />
</body>
</html>
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
const clerk = new Clerk(clerkPubKey) await clerk.load()
document.getElementById('app').innerHTML = <div id="manage-premium-content"></div>
const managePremiumContentDiv = document.getElementById('manage-premium-content')
const hasPremiumAccessManage = clerk.session.checkAuthorization({ permission: 'org:premium_access:manage', })
if (!hasPremiumAccessManage) {
managePremiumContentDiv.innerHTML = <h1>Only subscribers with the Premium Access Manage permission can access this content.</h1>
} else {
managePremiumContentDiv.innerHTML = <h1>Our Exclusive Content</h1>
}
</If>
<If sdk="nextjs">
```tsx {{ filename: 'app/manage-premium-content/page.tsx' }}
import { auth } from '@clerk/nextjs/server'
export default async function ManagePremiumContentPage() {
const { has } = await auth()
const hasPremiumAccessManage = has({ permission: 'org:premium_access:manage' })
if (!hasPremiumAccessManage)
return (
<h1>Only subscribers with the Premium Access Manage permission can access this content.</h1>
)
return <h1>Our Exclusive Content</h1>
}
const { isLoaded, has } = useAuth() const hasPremiumAccessManage = computed(() => has.value?.({ permission: 'org:premium_access:manage' }), ) </script>
<template> <main> <div v-if="!isLoaded">Loading...</div> <h1 v-else-if="!hasPremiumAccessManage"> Only subscribers with the Premium Access Manage permission can access this content. </h1> <h1 v-else>Our Exclusive Content</h1> </main> </template> ``` </If> <If sdk="vue"> ```vue {{ filename: 'src/manage-premium-content.vue' }} <script setup lang="ts"> import { useAuth } from '@clerk/vue' import { computed } from 'vue'const { isLoaded, has } = useAuth() const hasPremiumAccessManage = computed(() => has.value?.({ permission: 'org:premium_access:manage' }), ) </script>
<template> <main> <div v-if="!isLoaded">Loading...</div> <h1 v-else-if="!hasPremiumAccessManage"> Only subscribers with the Premium Access Manage permission can access this content. </h1> <h1 v-else>Our Exclusive Content</h1> </main> </template> ``` </If> <If sdk="react"> ```tsx {{ filename: 'src/pages/manage-premium-content.tsx' }} import { useAuth } from '@clerk/clerk-react'export default function ManagePremiumContentPage() { const { has, isLoaded } = useAuth()
if (!isLoaded) return <div>Loading...</div>
const hasPremiumAccessManage = has({ permission: 'org:premium_access:manage' })
if (!hasPremiumAccessManage)
return (
<h1>Only subscribers with the Premium Access Manage permission can access this content.</h1>
)
return <h1>Our Exclusive Content</h1>
}
</If>
<If sdk="react-router">
```tsx {{ filename: 'app/routes/manage-premium-content.tsx' }}
import type { Route } from './+types/manage-premium-content'
import { useAuth } from '@clerk/react-router'
export function meta({}: Route.MetaArgs) {
return [{ title: 'Manage Premium Content' }]
}
export default function ManagePremiumContentPage() {
const { has, isLoaded } = useAuth()
if (!isLoaded) return <div>Loading...</div>
const hasPremiumAccessManage = has({ permission: 'org:premium_access:manage' })
if (!hasPremiumAccessManage)
return (
<h1>Only subscribers with the Premium Access Manage permission can access this content.</h1>
)
return <h1>Our Exclusive Content</h1>
}
export const loader = async (args: LoaderFunctionArgs) => { const { has } = await getAuth(args) return { hasPremiumAccessManage: has({ permission: 'org:premium_access:manage' }) } }
export default function ManagePremiumContentPage() { const { hasPremiumAccessManage } = useLoaderData<typeof loader>()
if (!hasPremiumAccessManage)
return (
<h1>Only subscribers with the Premium Access Manage permission can access this content.</h1>
)
return <h1>Our Exclusive Content</h1>
}
</If>
<If sdk="tanstack-react-start">
```tsx {{ filename: 'app/routes/manage-premium-content.tsx' }}
import { getAuth } from '@clerk/tanstack-react-start/server'
import { createFileRoute } from '@tanstack/react-router'
import { getWebRequest } from '@tanstack/react-start/server'
export const Route = createFileRoute('/manage-premium-content')({
component: ManagePremiumContentPage,
beforeLoad: async () => {
const request = getWebRequest()
if (!request) throw new Error('Request not found')
return { auth: await getAuth(request) }
},
loader: async ({ context }) => {
return {
hasPremiumAccessManage: context.auth.has({ permission: 'org:premium_access:manage' }),
}
},
})
function ManagePremiumContentPage() {
const { hasPremiumAccessManage } = Route.useLoaderData()
if (!hasPremiumAccessManage)
return (
<h1>Only subscribers with the Premium Access Manage permission can access this content.</h1>
)
return <h1>Our Exclusive Content</h1>
}
export default function ManagePremiumContentPage() { const { isLoaded, has } = useAuth()
if (!isLoaded) return <div>Loading...</div>
const hasPremiumAccessManage = has({ permission: 'org:premium_access:manage' })
if (!hasPremiumAccessManage)
return (
<Text>
Only subscribers with the Premium Access Manage permission can access this content.
</Text>
)
return <Text>Our Exclusive Content</Text>
}
</If>
<If sdk="expressjs">
```tsx {{ filename: 'src/routes/manage-premium-content.ts' }}
import { getAuth, requireAuth } from '@clerk/express'
import { Router } from 'express'
const router = Router()
router.get('/manage-premium-content', requireAuth(), async (req, res) => {
const { has } = getAuth(req)
const hasPremiumAccessManage = has({ permission: 'org:premium_access:manage' })
if (hasPremiumAccessManage) {
res.send('Our Exclusive Content')
} else {
res.send('Only subscribers with the Premium Access Manage permission can access this content.')
}
})
export default router
export const managePremiumContentRoutes = (fastify: FastifyInstance) => { fastify.get('/manage-premium-content', async (request: FastifyRequest, reply: FastifyReply) => { const { has } = getAuth(request)
const hasPremiumAccessManage = has({ permission: 'org:premium_access:manage' })
if (hasPremiumAccessManage) {
reply.send('Our Exclusive Content')
} else {
reply.send(
'Only subscribers with the Premium Access Manage permission can access this content.',
)
}
})
}
</If>
<If sdk="js-backend">
```ts {{ filename: 'src/routes/manage-premium-content.ts' }}
import { createClerkClient } from '@clerk/backend'
const clerkClient = createClerkClient({
publishableKey: process.env.CLERK_PUBLISHABLE_KEY,
secretKey: process.env.CLERK_SECRET_KEY,
})
const domain =
process.env.NODE_ENV === 'production' ? 'https://example.com' : 'http://localhost:3000'
export async function GET(request: Request) {
const authenticatedRequest = await clerkClient.authenticateRequest(request, {
authorizedParties: [domain],
})
const user = authenticatedRequest.toAuth()
if (user === null || user.userId === null) {
return new Response('Unauthorized', { status: 401 })
}
const hasPremiumAccessManage = user.has({ permission: 'org:premium_access:manage' })
if (!hasPremiumAccessManage) {
return new Response(
'Only subscribers with the Premium Access Manage permission can access this content.',
)
}
return new Response('Our Exclusive Content')
}
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā