clerk-sdk-patterns

# Clerk SDK Patterns ## Overview Common patterns and best practices for using the Clerk SDK effectively across server components, client components, API routes, and middleware. ## Prerequisites - Clerk SDK installed and configured - Basic understanding of React/Next.js - ClerkProvider wrapping application ## Instructions ### Pattern 1: Server-Side Authentication ```typescript // 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> } ``` ```typescript // Use currentUser() when you need full user profile data import { currentUser } from '@clerk/nextjs/server' export default async function ProfilePage() { const user = await currentUser() if (!user) return null return ( <div> <h1>{user.firstName} {user.lastName}</h1> <p>{user.emailAddresses[0]?.emailAddress}</p> <img src={user.imageUrl} alt="Avatar" /> </div> ) } ``` ### Pattern 2: Client-Side Hooks ```typescript '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...