Clerk Hooks API and Next.js Route Matching Cheat Sheet

This quick reference guide summarizes the most common configurations and APIs in Clerk.

1. Environment Configurations Cheat Sheet

# Clerk developer console API credentials
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="pk_test_..."
CLERK_SECRET_KEY="sk_test_..."

# Client-side component route redirects
NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in"
NEXT_PUBLIC_CLERK_SIGN_UP_URL="/sign-up"

2. Client-Side Hooks Reference

// 1. Hook to retrieve session status metadata
const { userId, isLoaded, signOut } = useAuth();

// 2. Hook to fetch full user profile data
const { user, isSignedIn } = useUser();
const emailAddress = user?.primaryEmailAddress?.emailAddress;

3. Server-Side Context and Authorization

import { auth, currentUser } from "@clerk/nextjs/server";

// A. Access session authentication objects (Server Action or API Route)
const authObject = await auth();
const userId = authObject.userId;

// B. Query full profile details from the Clerk backend REST API
const user = await currentUser();

4. Next.js clerkMiddleware Configuration Template

// middleware.ts
import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";

// Declare pages accessible to anonymous visitors
const isPublicRoute = createRouteMatcher(["/sign-in(.*)", "/sign-up(.*)", "/"]);

export default clerkMiddleware(async (auth, request) => {
  if (!isPublicRoute(request)) {
    // Blocks requests and redirects anonymous visitors to /sign-in
    await auth.protect();
  }
});

export const config = {
  matcher: ["/((?!_next|[^?]*\\.(?:html|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)"],
};