clerk_auth

vuralserhat86

•

43126 months ago

Source Raw

Clerk modern authentication, WebAuthn, passkeys ve social auth entegrasyonu rehberi.

Quick Install

npxskills add vuralserhat86/antigravity-agentic-skills--skill clerk_auth

Instructions

🔐 Clerk Auth

Clerk modern authentication rehberi.

📋 Kurulum

npm install @clerk/nextjs

middleware.ts

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

export default clerkMiddleware();

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

🔧 Provider Setup

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

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

👤 Components

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

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

🔒 Server-side Auth

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

Loading…

Related Skills

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,360

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,309

1password

Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.

365,915

himalaya

CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).

365,885