Skip to content

Arcjet / Clerk integration

Arcjet and Clerk work well together to provide rate limiting based on user authentication. Clerk provides the user authentication and Arcjet provides the rate limiting.

What is Arcjet? Arcjet helps developers protect their apps in just a few lines of code. Implement rate limiting, bot protection, email verification & defend against common attacks.

Example use case

  • Limiting access to a free API endpoint based on the client IP address.
  • Providing a higher rate limit for authenticated clients based on their Clerk user ID.

See an example Next.js implementation on GitHub.

Rate limits using Clerk user ID

Arcjet rate limits allow custom characteristics to identify the client and apply the limit. Using Clerk’s currentUser() (app router) or getAuth() (pages router) helpers you can pass through a user ID.

/app/api/private/route.ts
import arcjet, { tokenBucket } from "@arcjet/next";
import { currentUser } from "@clerk/nextjs";
import { NextResponse } from "next/server";
// The arcjet instance is created outside of the handler
const aj = arcjet({
key: process.env.ARCJET_KEY!, // Get your site key from https://app.arcjet.com
rules: [
// Create a token bucket rate limit. Other algorithms are supported.
tokenBucket({
mode: "LIVE", // will block requests. Use "DRY_RUN" to log only
characteristics: ["userId"], // Rate limit based on the Clerk userId
refillRate: 5, // refill 5 tokens per interval
interval: 10, // refill every 10 seconds
capacity: 10, // bucket maximum capacity of 10 tokens
}),
],
});
export async function GET(req: Request) {
// Get the current user from Clerk
const user = await currentUser();
if (!user) {
return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
}
// Deduct 5 tokens from the user's bucket
const decision = await aj.protect(req, { userId: user.id, requested: 5 });
if (decision.isDenied()) {
return NextResponse.json(
{
error: "Too Many Requests",
reason: decision.reason,
},
{
status: 429,
},
);
}
return NextResponse.json({ message: "Hello World" });
}
/middleware.ts
import { authMiddleware } from "@clerk/nextjs";
export default authMiddleware({
// Routes that can be accessed while signed out
publicRoutes: ["/", "/api/public"],
apiRoutes: ["/api/private"],
});
export const config = {
// Protects all routes, including api/trpc.
// See https://clerk.com/docs/references/nextjs/auth-middleware
// for more information about configuring your Middleware
matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
};

Chaining middleware

If you want to protect every page with Arcjet Shield automatically you can run it through Next.js middleware. Clerk also uses middleware to add authentication to your pages. You can chain the two together.

See an example Next.js implementation on GitHub.

/middleware.ts
import { authMiddleware } from "@clerk/nextjs";
import arcjet, { createMiddleware } from "@arcjet/next";
export const config = {
// Protects all routes, including api/trpc.
// See https://clerk.com/docs/references/nextjs/auth-middleware
// for more information about configuring your Middleware
matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
};
const clerkMiddleware = authMiddleware({
// Routes that can be accessed while signed out
publicRoutes: ["/"],
apiRoutes: ["/api/private"],
});
const aj = arcjet({
key: process.env.ARCJET_KEY!, // Get your site key from https://app.arcjet.com
// No rules are required for Arcjet Shield - it runs on every request.
// You can also add other rules, such as bot protection, here.
rules: [],
});
// Clerk middleware will run after the Arcjet middleware. You could also use
// Clerk's beforeAuth options to run Arcjet first. See
// https://clerk.com/docs/references/nextjs/auth-middleware#use-before-auth-to-execute-middleware-before-authentication
export default createMiddleware(aj, clerkMiddleware);