āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/_partials/billing/checking-plan-using-has-function ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
export function BronzeContent() { const { isLoaded, has } = useAuth()
if (!isLoaded) return <div>Loading...</div>
const hasBronzePlan = has({ plan: 'bronze' })
if (!hasBronzePlan) return <h1>Only subscribers to the Bronze plan can access this content.</h1>
return <h1>For Bronze subscribers only</h1>
}
```astro {{ filename: 'src/pages/content.astro' }}
---
import { BronzeContent } from '../components/bronze-content'
---
<!doctype html>
<html>
<body>
<BronzeContent 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="bronze-content"></div>
const bronzeContentDiv = document.getElementById('bronze-content')
const hasBronzePlan = clerk.session.checkAuthorization({ plan: 'bronze' })
if (!hasBronzePlan) {
bronzeContentDiv.innerHTML = <h1>Only subscribers to the Bronze plan can access this content.</h1>
} else {
bronzeContentDiv.innerHTML = <h1>For Bronze subscribers only</h1>
}
</If>
<If sdk="nextjs">
```tsx {{ filename: 'app/bronze-content/page.tsx' }}
import { auth } from '@clerk/nextjs/server'
export default async function BronzeContentPage() {
const { has } = await auth()
const hasBronzePlan = has({ plan: 'bronze' })
if (!hasBronzePlan) return <h1>Only subscribers to the Bronze plan can access this content.</h1>
return <h1>For Bronze subscribers only</h1>
}
const { isLoaded, has } = useAuth() const hasBronzePlan = computed(() => has.value?.({ plan: 'bronze' })) </script>
<template> <main> <div v-if="!isLoaded">Loading...</div> <h1 v-else-if="!hasBronzePlan">Only subscribers to the Bronze plan can access this content.</h1> <h1 v-else>For Bronze subscribers only</h1> </main> </template> ``` </If> <If sdk="vue"> ```vue {{ filename: 'src/bronze-content.vue' }} <script setup lang="ts"> import { useAuth } from '@clerk/vue' import { computed } from 'vue'const { isLoaded, has } = useAuth() const hasBronzePlan = computed(() => has.value?.({ plan: 'bronze' })) </script>
<template> <main> <div v-if="!isLoaded">Loading...</div> <h1 v-else-if="!hasBronzePlan">Only subscribers to the Bronze plan can access this content.</h1> <h1 v-else>For Bronze subscribers only</h1> </main> </template> ``` </If> <If sdk="react"> ```tsx {{ filename: 'src/pages/bronze-content.tsx' }} import { useAuth } from '@clerk/clerk-react'export default function BronzeContentPage() { const { has, isLoaded } = useAuth()
if (!isLoaded) return <div>Loading...</div>
const hasBronzePlan = has({ plan: 'bronze' })
if (!hasBronzePlan) return <h1>Only subscribers to the Bronze plan can access this content.</h1>
return <h1>For Bronze subscribers only</h1>
}
</If>
<If sdk="react-router">
```tsx {{ filename: 'app/routes/bronze-content.tsx' }}
import type { Route } from './+types/bronze-content'
import { useAuth } from '@clerk/react-router'
export function meta({}: Route.MetaArgs) {
return [{ title: 'Bronze Content' }]
}
export default function BronzeContentPage() {
const { has, isLoaded } = useAuth()
if (!isLoaded) return <div>Loading...</div>
const hasBronzePlan = has({ plan: 'bronze' })
if (!hasBronzePlan) return <h1>Only subscribers to the Bronze plan can access this content.</h1>
return <h1>For Bronze subscribers only</h1>
}
export const loader = async (args: LoaderFunctionArgs) => { const { has } = await getAuth(args) return { hasBronzePlan: has({ plan: 'bronze' }) } }
export default function BronzeContentPage() { const { hasBronzePlan } = useLoaderData<typeof loader>()
if (!hasBronzePlan) return <h1>Only subscribers to the Bronze plan can access this content.</h1>
return <h1>For Bronze subscribers only</h1>
}
</If>
<If sdk="tanstack-react-start">
```tsx {{ filename: 'app/routes/bronze-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('/bronze-content')({
component: BronzeContentPage,
beforeLoad: async () => {
const request = getWebRequest()
if (!request) throw new Error('Request not found')
return { auth: await getAuth(request) }
},
loader: async ({ context }) => {
return { hasBronzePlan: context.auth.has({ plan: 'bronze' }) }
},
})
function BronzeContentPage() {
const { hasBronzePlan } = Route.useLoaderData()
if (!hasBronzePlan) return <h1>Only subscribers to the Bronze plan can access this content.</h1>
return <h1>For Bronze subscribers only</h1>
}
export default function BronzeContentPage() { const { isLoaded, has } = useAuth()
if (!isLoaded) return <div>Loading...</div>
const hasBronzePlan = has({ plan: 'bronze' })
if (!hasBronzePlan)
return <Text>Only subscribers to the Bronze plan can access this content.</Text>
return <Text>For Bronze subscribers only</Text>
}
</If>
<If sdk="expressjs">
```tsx {{ filename: 'src/routes/bronze-content.ts' }}
import { getAuth, requireAuth } from '@clerk/express'
import { Router } from 'express'
const router = Router()
router.get('/bronze-content', requireAuth(), async (req, res) => {
const { has } = getAuth(req)
const hasBronzePlan = has({ plan: 'bronze' })
if (hasBronzePlan) {
res.send('For Bronze subscribers only')
} else {
res.send('Only subscribers to the Bronze plan can access this content.')
}
})
export default router
export const bronzeContentRoutes = (fastify: FastifyInstance) => { fastify.get('/bronze-content', async (request: FastifyRequest, reply: FastifyReply) => { const { has } = getAuth(request)
const hasBronzePlan = has({ plan: 'bronze' })
if (hasBronzePlan) {
reply.send('For Bronze subscribers only')
} else {
reply.send('Only subscribers to the Bronze plan can access this content.')
}
})
}
</If>
<If sdk="js-backend">
```ts {{ filename: 'src/routes/bronze-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 hasBronzePlan = user.has({ plan: 'bronze' })
if (!hasBronzePlan) {
return new Response('For Bronze subscribers only')
}
return new Response('Only subscribers to the Bronze plan can access this content.')
}
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā