aibot88 🔐 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/nextjspaketi ve API Key'ler. - Middleware: Public/Private rotaları
clerkMiddlewareile ayır. - Provider: Root layout'u
ClerkProviderile sarmala.
Aşama 2: UX & Components
- Header:
SignedIn/SignedOutşartlı render yapısı kur. - Profile:
UserButtonveyaUserProfilebileşenini ekle. - Custom Flow: Gerekirse Custom Sign-in sayfası yap.
Aşama 3: Server Logic
- Protect: API rotalarında
auth().userIdkontrolü 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 |