Clerk Has a Free API That Most Developers Dont Know About

# authentication# nextjs# react# webdev
Clerk Has a Free API That Most Developers Dont Know AboutAlex Spinov

Clerk provides drop-in authentication for React and Next.js. Prebuilt components for sign-in,...

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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();
});
Enter fullscreen mode Exit fullscreen mode

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 });
}
Enter fullscreen mode Exit fullscreen mode

Key Features

  • Prebuilt UI components
  • SSO, OAuth, magic links, passkeys
  • Organizations and roles
  • Webhooks for user events
  • Backend API for user management
  • Free tier: 10K MAU

Need to scrape or monitor web data at scale? Check out my web scraping actors on Apify or email spinov001@gmail.com for custom solutions.