원클릭으로 Manus에서 모든 스킬 실행

시작하기

clerk-auth

스타43

포크12

업데이트2026년 1월 3일 12:19

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

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

vuralserhat86

vuralserhat86/antigravity-agentic-skills

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

name: clerk_auth router_kit: SecurityKit description: Clerk modern authentication, WebAuthn, passkeys ve social auth entegrasyonu rehberi. metadata: skillport: category: authentication tags: [accessibility, api integration, backend, browser apis, clerk auth, client-side, components, css3, debugging, deployment, frameworks, frontend, fullstack, html5, javascript, libraries, node.js, npm, performance optimization, responsive design, seo, state management, testing, typescript, ui/ux, web development] - webauthn

🔐 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

이 저장소의 다른 Skills

같은 저장소

accessibility-testing

vuralserhat86/antigravity-agentic-skills

Guide for conducting comprehensive accessibility audits of code to identify WCAG compliance issues and barriers to inclusive design. This skill should be used when reviewing accessibility, ARIA implementation, keyboard navigation, or screen reader compatibility.

2026-01-0343

agent-orchestration

vuralserhat86/antigravity-agentic-skills

Transform clarified user requests into structured delegation prompts optimized for specialist agents (cto-architect, strategic-cto-mentor, cv-ml-architect). Use after clarification is complete, before routing to specialist agents. Ensures agents receive complete context for effective work.

2026-01-0343

agents-md

vuralserhat86/antigravity-agentic-skills

AGENTS.md dosyaları oluşturma, monorepo yapılandırma ve agent instruction yönetimi rehberi.

2026-01-0343

algorithmic-art

vuralserhat86/antigravity-agentic-skills

p5.js ile generative art, flow fields ve interactive visuals oluşturma rehberi.

2026-01-0343

api-design

vuralserhat86/antigravity-agentic-skills

API tasarımı, GraphQL schema, OpenAPI spec, versioning. ⚠️ Tasarım aşaması için kullan. Uygulama/security için → backend-api.

2026-01-0343

arch-decisions

vuralserhat86/antigravity-agentic-skills

ADR template, database selection, capacity planning ve scalability.

2026-01-0343

name: clerk_auth router_kit: SecurityKit description: Clerk modern authentication, WebAuthn, passkeys ve social auth entegrasyonu rehberi. metadata: skillport: category: authentication tags: [accessibility, api integration, backend, browser apis, clerk auth, client-side, components, css3, debugging, deployment, frameworks, frontend, fullstack, html5, javascript, libraries, node.js, npm, performance optimization, responsive design, seo, state management, testing, typescript, ui/ux, web development] - webauthn

🔐 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