Complete Clerk Complete Guide | Authentication

Complete Clerk Complete Guide | Authentication

· 5분 읽기 · 수정 Intermediate
Complete Clerk Complete Guide | Authentication

이 글의 핵심

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

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

// middleware.ts
import { authMiddleware } from '@clerk/nextjs';
export default authMiddleware({
  publicRoutes: ['/', '/api/webhook'],
});
export const config = {
  matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
};

Provider

// 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

// 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

// 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

'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

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

// 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

// 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

import { OrganizationSwitcher, OrganizationProfile } from '@clerk/nextjs';
export default function OrganizationPage() {
  return (
    <div>
      <OrganizationSwitcher />
      <OrganizationProfile />
    </div>
  );
}

Permission Check

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.

Frequently Asked Questions (FAQ)

Q. When would I use this in practice?

A. Complete guide to building perfect authentication system with Clerk.

Q. What should I read before this?

A. Follow the previous article or related articles links at the bottom of each post to learn in sequence.

Q. Where can I study this more deeply?

A. Check cppreference and the relevant library’s official documentation. The reference links at the end of the article are also worth using.

Other articles related to this topic.

Keywords Covered in This Article (Related Search Terms)

This article covers Clerk, Authentication, OAuth, MFA, User Management, Next.js, Backend.