Agent skill

clerk-auth

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/clerk-auth

SKILL.md

🔐 Clerk Auth

Clerk modern authentication rehberi.

📋 Kurulum

bash
npm install @clerk/nextjs

middleware.ts

typescript
import { clerkMiddleware } from '@clerk/nextjs/server';

export default clerkMiddleware();

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

🔧 Provider Setup

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

export default function Layout({ children }) {
  return (
    <ClerkProvider>
      <html>
        <body>{children}</body>
      </html>
    </ClerkProvider>
  );
}

👤 Components

typescript
import { 
  SignInButton, 
  SignUpButton, 
  UserButton,
  SignedIn,
  SignedOut 
} from '@clerk/nextjs';

function Header() {
  return (
    <header>
      <SignedOut>
        <SignInButton />
        <SignUpButton />
      </SignedOut>
      <SignedIn>
        <UserButton />
      </SignedIn>
    </header>
  );
}

🔒 Server-side Auth

typescript
import { auth, currentUser } from '@clerk/nextjs/server';

export async function GET() {
  const { userId } = await auth();
  
  if (!userId) {
    return new Response('Unauthorized', { status: 401 });
  }
  
  const user = await currentUser();
  return Response.json({ user });
}

Clerk Auth v1.1 - Enhanced

🔄 Workflow

Kaynak: Clerk Documentation

Aşama 1: Integration

  • Install: @clerk/nextjs paketi ve API Key'ler.
  • Middleware: Public/Private rotaları clerkMiddleware ile ayır.
  • Provider: Root layout'u ClerkProvider ile sarmala.

Aşama 2: UX & Components

  • Header: SignedIn / SignedOut şartlı render yapısı kur.
  • Profile: UserButton veya UserProfile bileşenini ekle.
  • Custom Flow: Gerekirse Custom Sign-in sayfası yap.

Aşama 3: Server Logic

  • Protect: API rotalarında auth().userId kontrolü yap.
  • Data: currentUser() ile kullanıcı verisine eriş.
  • Sync: Webhook kullanarak kullanıcıyı kendi veritabanınla eşle (Opsiyonel).

Kontrol Noktaları

Aşama Doğrulama
1 Middleware statik dosyaları (image, css) engellemiyor
2 Sign-out sonrası login sayfasına yönlendiriyor
3 API request'leri tokensiz atılınca 401 dönüyor

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results