菜单
Common Clerk SDK patterns and best practices. Use when implementing authentication flows, accessing user data, or integrating Clerk SDK methods in your application. Trigger with phrases like "clerk SDK", "clerk patterns", "clerk best practices", "clerk API usage".
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/jeremylongshore/claude-code-plugins-plus-skills --skill clerk-sdk-patterns命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
Implement user sign-up and sign-in flows with Clerk. Use when building authentication UI, customizing sign-in experience, or implementing OAuth social login. Trigger with phrases like "clerk sign-in", "clerk sign-up", "clerk login flow", "clerk OAuth", "clerk social login".
Implement session management and middleware with Clerk. Use when managing user sessions, configuring route protection, or implementing token refresh and custom JWT templates. Trigger with phrases like "clerk session", "clerk middleware", "clerk route protection", "clerk token", "clerk JWT".
Configure enterprise SSO, role-based access control, and organization management. Use when implementing SSO integration, configuring role-based permissions, or setting up organization-level controls. Trigger with phrases like "clerk SSO", "clerk RBAC", "clerk enterprise", "clerk roles", "clerk permissions", "clerk organizations".
| name | clerk-sdk-patterns |
| description | Common Clerk SDK patterns and best practices. Use when implementing authentication flows, accessing user data, or integrating Clerk SDK methods in your application. Trigger with phrases like "clerk SDK", "clerk patterns", "clerk best practices", "clerk API usage". |
| allowed-tools | Read, Write, Edit, Grep |
| version | 1.14.0 |
| license | MIT |
| author | Jeremy Longshore <jeremy@intentsolutions.io> |
| tags | ["saas","clerk","api","authentication"] |
| compatibility | Designed for Claude Code, also compatible with Codex and OpenClaw |
Common patterns and best practices for using the Clerk SDK effectively across server components, client components, API routes, and middleware.
// Server Component — use auth() for lightweight checks
import { auth } from '@clerk/nextjs/server'
export default async function ServerPage() {
const { userId, orgId, has } = await auth()
if (!userId) return <div>Not authenticated</div>
if (!has({ permission: 'org:posts:create' })) return <div>No permission</div>
return <div>Authorized content for {userId}</div>
}
// Use currentUser() when you need full user profile data
import { currentUser } from '@clerk/nextjs/server'
export default async function () {
user = ()
(!user)
(
)
}
'use client'
import { useUser, useAuth, useClerk, useSignIn } from '@clerk/nextjs'
export function ClientAuthExample() {
const { user, isLoaded, isSignedIn } = useUser() // Full user object
const { userId, getToken, signOut } = useAuth() // Auth state + token access
const { openSignIn, openUserProfile } = useClerk() // UI controls
if (!isLoaded) return <div>Loading...</div>
if (!isSignedIn) return <button onClick={() => openSignIn()}>Sign In</button>
const fetchWithAuth = async (url: string) => {
const token = await getToken()
return fetch(url, {
headers: { Authorization: `Bearer ${token}` },
})
}
return (
<div>
<p>Hello, {user.firstName}</p>
<button onClick={() => openUserProfile()}>Profile</button>
<button onClick={() => signOut()}>Sign Out</button>
</div>
)
}
// middleware.ts
import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'
const isPublicRoute = createRouteMatcher([
'/',
'/pricing',
'/sign-in(.*)',
'/sign-up(.*)',
'/api/webhooks(.*)',
])
export default clerkMiddleware(async (auth, req) => {
if (!isPublicRoute(req)) {
await auth.protect()
}
})
// lib/db-helpers.ts
import { auth } from '@clerk/nextjs/server'
export async function getOrgData() {
const { userId, orgId } = await auth()
if (orgId) {
// Org-scoped query: return data for the active organization
return db.items.findMany({ where: { organizationId: orgId } })
}
// Personal account: return user's own data
return db.items.findMany({ where: { ownerId: userId } })
}
// Generate a Supabase-compatible JWT
import { auth } from '@clerk/nextjs/server'
import { createClient } from '@supabase/supabase-js'
export async function getSupabaseClient() {
const { getToken } = await auth()
const supabaseToken = await getToken({ template: 'supabase' })
return createClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
{
global: {
headers: { Authorization: `Bearer ${supabaseToken}` },
},
}
)
}
Configure the JWT template in Clerk Dashboard > JWT Templates with claims:
{
"sub": "{{user.id}}",
"email": "{{user.primary_email_address}}",
"role": "authenticated"
}
| Error | Cause | Solution |
|---|---|---|
auth() returns null userId | Not in server context | Use only in Server Components or API routes |
useUser() not updating | Stale component | Check ClerkProvider wraps the component tree |
getToken() fails | JWT template not configured | Create template in Dashboard > JWT Templates |
orgId is null | No organization selected | Prompt user with <OrganizationSwitcher /> |
'use server'
import { auth } from '@clerk/nextjs/server'
export async function createPost(title: string, content: string) {
const { userId, orgId } = await auth()
if (!userId) throw new Error('Unauthorized')
return db.post.create({
data: { title, content, authorId: userId, orgId },
})
}
Proceed to clerk-core-workflow-a for user sign-up and sign-in flows.