一键在 Manus 中运行任何 Skill

开始使用

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 仓库查看创作者相关仓库

下载

在 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