ワンクリックで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で実行

🔐 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
description	Clerk modern authentication, WebAuthn, passkeys ve social auth entegrasyonu rehberi.

🔐 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