Menu
Clerk modern authentication, WebAuthn, passkeys ve social auth entegrasyonu rehberi.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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.
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.
AGENTS.md dosyaları oluşturma, monorepo yapılandırma ve agent instruction yönetimi rehberi.
p5.js ile generative art, flow fields ve interactive visuals oluşturma rehberi.
API tasarımı, GraphQL schema, OpenAPI spec, versioning. ⚠️ Tasarım aşaması için kullan. Uygulama/security için → backend-api.
ADR template, database selection, capacity planning ve scalability.
| name | clerk_auth |
| description | Clerk modern authentication, WebAuthn, passkeys ve social auth entegrasyonu rehberi. |
Clerk modern authentication rehberi.
npm install @clerk/nextjs
import { clerkMiddleware } from '@clerk/nextjs/server';
export default clerkMiddleware();
export const config = {
matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
};
// app/layout.tsx
import { ClerkProvider } from '@clerk/nextjs';
export default function Layout({ children }) {
return (
<ClerkProvider>
<html>
<body>{children}</body>
</html>
</ClerkProvider>
);
}
import {
SignInButton,
SignUpButton,
UserButton,
SignedIn,
SignedOut
} from '@clerk/nextjs';
function Header() {
return (
<header>
<SignedOut>
<SignInButton />
<SignUpButton />
</SignedOut>
<SignedIn>
<UserButton />
</SignedIn>
</header>
);
}
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
Kaynak: Clerk Documentation
@clerk/nextjs paketi ve API Key'ler.clerkMiddleware ile ayır.ClerkProvider ile sarmala.SignedIn / SignedOut şartlı render yapısı kur.UserButton veya UserProfile bileşenini ekle.auth().userId kontrolü yap.currentUser() ile kullanıcı verisine eriş.| 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 |