Clerk Has a Free API That Most Developers Dont Know About

#authentication #react #nextjs #webdev

Clerk provides drop-in authentication for React and Next.js. Prebuilt components for sign-in, sign-up, user profiles — plus a powerful backend API.

Next.js Setup

// app/layout.tsx
import { ClerkProvider, SignedIn, SignedOut, UserButton, SignInButton } from "@clerk/nextjs";

export default function Layout({ children }) {
  return (
    <ClerkProvider>
      <html><body>
        <header>
          <SignedOut><SignInButton /></SignedOut>
          <SignedIn><UserButton /></SignedIn>
        </header>
        {children}
      </body></html>
    </ClerkProvider>
  );
}

Protect Routes

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

const isProtected = createRouteMatcher(["/dashboard(.*)", "/api/private(.*)"]);

export default clerkMiddleware((auth, req) => {
  if (isProtected(req)) auth().protect();
});

Server-Side

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

export default async function Dashboard() {
  const user = await currentUser();
  return <h1>Welcome, {user?.firstName}</h1>;
}

// API Route
export async function GET() {
  const { userId } = await auth();
  if (!userId) return new Response("Unauthorized", { status: 401 });
  return Response.json({ userId });
}