Skip to main content

​
Clerk

User management for modern apps Drop-in components and APIs for authentication, user management, and session handling. Built for React and Next.js with a generous free tier.

​
Key Features

  • Pre-built components
  • Next.js & React
  • Free tier

​
Quick Setup

1

Install Clerk

npm install @clerk/nextjs
2

Add environment variables

Add env vars (NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY, CLERK_SECRET_KEY) to your .env.local file.
3

Wrap your app

Wrap your app in ClerkProvider.
4

Add authentication components

Use <SignIn /> and <SignUp /> for pre-built modals, or <UserButton /> for profile dropdown.

​
Protecting routes

Use middleware to protect routes:
export default clerkMiddleware((auth, req) => {
  // Your protection logic
});
Get the current user with auth() in server components or useUser() in client components.

​
Hackathon tips

  • Social logins (Google, GitHub) work out of the box—fast for demos.
  • Free tier is generous; no credit card needed for most hackathon projects.

​
Resources

Clerk quickstart

Official Next.js quickstart guide

Watch: Clerk official setup walkthrough

Official video walkthrough

Visit Clerk

Official website

Build docs developers (and LLMs) love

Get started for freeTalk to us