Complete Clerk Guide | Authentication, User Management, OAuth, MFA, Next.js & Practical Use

· 23분 읽기 · 수정 Intermediate
Complete Clerk Guide | Authentication, User Management, OAuth, MFA, Next.js & Practical Use

Key Takeaways

Complete guide to building perfect authentication system with Clerk. From email/password, OAuth, MFA, user management to Next.js integration with practical examples.

Real-World Experience: Sharing experience of switching from custom authentication system to Clerk, achieving 90% reduction in development time and significantly improved security.

Introduction: “Authentication Implementation Is Complex”

Real-World Problem Scenarios

Scenario 1: Security Concerns
Direct implementation is risky. Clerk provides enterprise-grade security.

Scenario 2: OAuth Integration Is Difficult
Each platform is different. Clerk provides unified API.

Scenario 3: User Management Is Cumbersome
Admin panel is needed. Clerk provides Dashboard.

1. What is Clerk?

Core Features

Clerk is a complete authentication and user management platform.

Key Features:

  • Various Authentication: Email, OAuth, Magic Link
  • MFA: Two-factor authentication
  • User Management: Dashboard
  • Organization Management: Multi-tenancy
  • Session Management: Automatic

2. Next.js Setup

Installation

npm install @clerk/nextjs

Environment Variables

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...

Middleware

Here’s an implementation example using TypeScript. Import necessary modules. Please review the code to understand the role of each part.

// middleware.ts
import { authMiddleware } from '@clerk/nextjs';

export default authMiddleware({
  publicRoutes: ['/', '/api/webhook'],
});

export const config = {
  matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
};

Provider

Here’s an implementation example using TypeScript. Import necessary modules. Please review the code to understand the role of each part.

// app/layout.tsx
import { ClerkProvider } from '@clerk/nextjs';

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

3. Authentication Components

Sign In / Sign Up

Here’s a detailed implementation using TypeScript. Import necessary modules. Please review the code to understand the role of each part.

// app/sign-in/[[...sign-in]]/page.tsx
import { SignIn } from '@clerk/nextjs';

export default function SignInPage() {
  return (
    <div className="flex justify-center items-center min-h-screen">
      <SignIn />
    </div>
  );
}

// app/sign-up/[[...sign-up]]/page.tsx
import { SignUp } from '@clerk/nextjs';

export default function SignUpPage() {
  return (
    <div className="flex justify-center items-center min-h-screen">
      <SignUp />
    </div>
  );
}

User Button

Here’s a detailed implementation using TypeScript. Import necessary modules. Please review the code to understand the role of each part.

// components/Header.tsx
import { UserButton, SignedIn, SignedOut, SignInButton } from '@clerk/nextjs';

export default function Header() {
  return (
    <header>
      <SignedIn>
        <UserButton afterSignOutUrl="/" />
      </SignedIn>
      <SignedOut>
        <SignInButton mode="modal">
          <button>Sign In</button>
        </SignInButton>
      </SignedOut>
    </header>
  );
}

4. Protected Pages

Client Component

Here’s a detailed implementation using TypeScript. Import necessary modules, perform branching with conditionals. Please review the code to understand the role of each part.

'use client';

import { useUser } from '@clerk/nextjs';
import { redirect } from 'next/navigation';

export default function DashboardPage() {
  const { isLoaded, isSignedIn, user } = useUser();

  if (!isLoaded) return <div>Loading...</div>;
  if (!isSignedIn) return redirect('/sign-in');

  return (
    <div>
      <h1>Welcome, {user.firstName}!</h1>
    </div>
  );
}

Server Component

Here’s a detailed implementation using TypeScript. Import necessary modules, perform tasks efficiently with async processing, perform branching with conditionals. Please review the code to understand the role of each part.

import { currentUser } from '@clerk/nextjs';
import { redirect } from 'next/navigation';

export default async function DashboardPage() {
  const user = await currentUser();

  if (!user) {
    redirect('/sign-in');
  }

  return (
    <div>
      <h1>Welcome, {user.firstName}!</h1>
    </div>
  );
}

5. API Protection

API Route

Here’s a detailed implementation using TypeScript. Import necessary modules, perform tasks efficiently with async processing, ensure stability with error handling, perform branching with conditionals. Please review the code to understand the role of each part.

// app/api/protected/route.ts
import { auth } from '@clerk/nextjs';
import { NextResponse } from 'next/server';

export async function GET() {
  const { userId } = auth();

  if (!userId) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  const data = await getProtectedData(userId);

  return NextResponse.json(data);
}

6. Webhook

Setup

Here’s a detailed implementation using TypeScript. Import necessary modules, perform tasks efficiently with async processing, ensure stability with error handling, perform branching with conditionals. Please review the code to understand the role of each part.

// app/api/webhook/route.ts
import { Webhook } from 'svix';
import { headers } from 'next/headers';

export async function POST(req: Request) {
  const WEBHOOK_SECRET = process.env.CLERK_WEBHOOK_SECRET!;

  const headerPayload = headers();
  const svixId = headerPayload.get('svix-id');
  const svixTimestamp = headerPayload.get('svix-timestamp');
  const svixSignature = headerPayload.get('svix-signature');

  const body = await req.text();

  const wh = new Webhook(WEBHOOK_SECRET);

  let evt;

  try {
    evt = wh.verify(body, {
      'svix-id': svixId!,
      'svix-timestamp': svixTimestamp!,
      'svix-signature': svixSignature!,
    });
  } catch (err) {
    return new Response('Webhook verification failed', { status: 400 });
  }

  const { type, data } = evt;

  switch (type) {
    case 'user.created':
      await createUserInDatabase(data);
      break;

    case 'user.updated':
      await updateUserInDatabase(data);
      break;

    case 'user.deleted':
      await deleteUserFromDatabase(data);
      break;
  }

  return new Response('Webhook received', { status: 200 });
}

7. Organization Management

Create Organization

Here’s an implementation example using TypeScript. Import necessary modules. Please review the code to understand the role of each part.

import { OrganizationSwitcher, OrganizationProfile } from '@clerk/nextjs';

export default function OrganizationPage() {
  return (
    <div>
      <OrganizationSwitcher />
      <OrganizationProfile />
    </div>
  );
}

Permission Check

Here’s an implementation example using TypeScript. Import necessary modules, perform tasks efficiently with async processing, perform branching with conditionals. Please review the code to understand the role of each part.

import { auth } from '@clerk/nextjs';

export default async function AdminPage() {
  const { userId, orgRole } = auth();

  if (orgRole !== 'admin') {
    return <div>Access Denied</div>;
  }

  return <div>Admin Panel</div>;
}

Summary and Checklist

Key Summary

  • Clerk: Authentication and user management
  • Various Authentication: Email, OAuth, Magic Link
  • MFA: Two-factor authentication
  • User Management: Dashboard
  • Organization Management: Multi-tenancy
  • Next.js: Perfect integration

Implementation Checklist

  • Create Clerk account
  • Install SDK
  • Set up Middleware
  • Add authentication components
  • Implement protected pages
  • Protect API
  • Set up Webhook
  • Complete Supabase Guide
  • Next.js App Router Guide
  • Complete tRPC Guide

Keywords Covered

Clerk, Authentication, OAuth, MFA, User Management, Next.js, Backend

Frequently Asked Questions (FAQ)

Q. How does it compare to Auth0?

A. Clerk has better DX and perfect Next.js integration. Auth0 provides more features.

Q. Can it be used for free?

A. Yes, free up to 10K MAU.

Q. Is customization possible?

A. Yes, component styling and logic can be customized.

Q. Is it safe to use in production?

A. Yes, many startups and enterprises use it reliably.

... 996 lines not shown ... Token usage: 63706/1000000; 936294 remaining Start-Sleep -Seconds 3