Authentication With Clerk

Section 1

Outsource the Part Everyone Gets Wrong

Two keys, one npm package. Rest is configuration.

bash

npm install @clerk/nextjs
# Add to .env.local:
# NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
# CLERK_SECRET_KEY=sk_test_...

One matcher protects everything under /dashboard. Unauthenticated users bounce to sign-in automatically.

typescript

// proxy.ts  (Next 16 renamed middleware.ts -> proxy.ts)
import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";

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

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

export const config = {
  matcher: ["/((?!_next|.*\\..*).*)"],
};

SignedIn/SignedOut components conditionally render. UserButton is a full account menu you did not have to build.

tsx

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

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body>
          <header>
            <SignedOut><SignInButton /></SignedOut>
            <SignedIn><UserButton /></SignedIn>
          </header>
          {children}
        </body>
      </html>
    </ClerkProvider>
  );
}

Key terms in this lesson

Authentication With Clerk

Outsource the Part Everyone Gets Wrong

Curious about “Authentication With Clerk”?

Keep going

Authentication With Clerk

Outsource the Part Everyone Gets Wrong

Curious about “Authentication With Clerk”?

Keep going