Previous
Next
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

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.

자주 묻는 질문 (FAQ)

Q. 이 내용을 실무에서 언제 쓰나요?

A. Complete guide to building perfect authentication system with Clerk. From email/password, OAuth, MFA, user management to… 실무에서는 위 본문의 예제와 선택 가이드를 참고해 적용하면 됩니다.

Q. 선행으로 읽으면 좋은 글은?

A. 각 글 하단의 이전 글 또는 관련 글 링크를 따라가면 순서대로 배울 수 있습니다. C++ 시리즈 목차에서 전체 흐름을 확인할 수 있습니다.

Q. 더 깊이 공부하려면?

A. cppreference와 해당 라이브러리 공식 문서를 참고하세요. 글 말미의 참고 자료 링크도 활용하면 좋습니다.

같이 보면 좋은 글 (내부 링크)

이 주제와 연결되는 다른 글입니다.

이 글에서 다루는 키워드 (관련 검색어)

Clerk, Authentication, OAuth, MFA, User Management, Next.js, Backend 등으로 검색하시면 이 글이 도움이 됩니다.