301-clerk-patterns

Clerk Authentication Patterns

Description

This rule documents the standard patterns for implementing authentication with Clerk in our application, including reusable components and best practices.

Server-Side Authentication

Server Components

import { auth } from "@clerk/nextjs/server"

export default async function ServerComponent() {
  const { userId } = await auth()
  
  // Use userId to conditionally render content
  if (!userId) {
    return <SignInPrompt />
  }
  
  return <AuthenticatedContent />
}

Server Actions

import { auth } from "@clerk/nextjs/server"

export async function serverAction() {
  const { userId } = await auth()
  if (!userId) {
    throw new Error("Unauthorized")
  }
  // Proceed with authenticated action
}

Client-Side Authentication

Client Components

"use client"
import { useUser, SignInButton } from "@clerk/nextjs"

export function ClientComponent() {
  const { isSignedIn, isLoaded, user } = useUser()
  
  if (!isLoaded) return <LoadingState />
  if (!isSignedIn) return <SignInPrompt />
  
  return <AuthenticatedContent />
}

Reusable Components

SignInButton

The SignInButton component from Clerk should be used with our custom Button component:

import { SignInButton } from "@clerk/nextjs"
import { Button } from "@/components/ui/button"

<SignInButton mode="modal">
  <Button size="lg">Sign in to Continue</Button>
</SignInButton>

Auth Buttons

For navigation/header auth controls, use our AuthButtons component:

import AuthButtons from "@/components/nav/auth-buttons"

<AuthButtons />

Sign In Prompt Card

For gating features behind authentication, use this pattern:

<Card>
  <CardContent className="flex flex-col items-center gap-6 py-16">
    <div className="text-center space-y-2">
      <h2 className="text-2xl font-semibold">Sign in to Continue</h2>
      <p className="text-muted-foreground">Create an account or sign in to access this feature</p>
    </div>
    <SignInButton mode="modal">
      <Button size="lg">Sign in to Continue</Button>
    </SignInButton>
  </CardContent>
</Card>