Clerk Has a Free API That Adds Beautiful Auth to Any React App in 5 Minutes

#nextjs #react #auth #javascript

Clerk is the auth platform that gives you pre-built UI components, session management, multi-factor auth, and user management — all with a simple React hook.

Setup: One Provider

import { ClerkProvider, SignIn, SignUp, UserButton } from "@clerk/nextjs";

export default function App({ children }) {
  return (
    <ClerkProvider>
      {children}
    </ClerkProvider>
  );
}

Pre-Built Components

// Sign in page — fully themed, customizable
export default function SignInPage() {
  return <SignIn />;
}

// Sign up page
export default function SignUpPage() {
  return <SignUp />;
}

// User button (avatar + dropdown)
function Header() {
  return (
    <nav>
      <h1>My App</h1>
      <UserButton afterSignOutUrl="/" />
    </nav>
  );
}

useUser Hook: Client-Side Auth

import { useUser, useAuth } from "@clerk/nextjs";

function Dashboard() {
  const { user, isLoaded, isSignedIn } = useUser();
  const { getToken } = useAuth();

  if (!isLoaded) return <Spinner />;
  if (!isSignedIn) return <RedirectToSignIn />;

  // Get JWT for API calls
  const token = await getToken();
  const res = await fetch("/api/data", {
    headers: { Authorization: `Bearer ${token}` },
  });

  return (
    <div>
      <img src={user.imageUrl} />
      <h2>{user.fullName}</h2>
      <p>{user.primaryEmailAddress.emailAddress}</p>
    </div>
  );
}

Server-Side: currentUser and auth

// Next.js server component
import { currentUser, auth } from "@clerk/nextjs/server";

export default async function Page() {
  const user = await currentUser();
  if (!user) redirect("/sign-in");
  return <h1>Welcome, {user.firstName}!</h1>;
}

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

Middleware: Protect Routes

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

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

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

Organizations: Multi-Tenant

import { OrganizationSwitcher, useOrganization } from "@clerk/nextjs";

function TeamSelector() {
  const { organization } = useOrganization();
  return (
    <div>
      <OrganizationSwitcher />
      <p>Current team: {organization?.name}</p>
    </div>
  );
}