# 📸 Clerk Kurulum - Görsel Adım Adım Rehber

Bu rehber, Clerk API anahtarlarını almanız için ekran görüntüleri açıklamaları ile adım adım yol gösterir.

---

## 🎯 Hedef

3 adet API anahtarı alacağız:
1. ✅ `VITE_CLERK_PUBLISHABLE_KEY` - Frontend için
2. ✅ `CLERK_SECRET_KEY` - Backend için
3. ✅ `CLERK_WEBHOOK_SECRET` - Webhook için

---

## 📋 Adım 1: Clerk Hesabı Oluşturma

### 1.1 Clerk.com'a Git
- **URL:** https://clerk.com/
- **Ekranda görecekleriniz:**
  - Üst sağda "Sign In" ve "Sign Up" butonları
  - Ana sayfada "Start building for free" butonu

### 1.2 Sign Up
- **"Sign Up"** butonuna tıklayın
- **Ekranda görecekleriniz:**
  - Email adresi girme alanı
  - Google ile giriş seçeneği
  - GitHub ile giriş seçeneği

### 1.3 Email Doğrulama
- Email adresinizi girin ve devam edin
- **Ekranda görecekleriniz:**
  - "Check your email" mesajı
  - Doğrulama kodu giriş alanı
- Email'inizdeki 6 haneli kodu girin

---

## 📋 Adım 2: Yeni Uygulama Oluşturma

### 2.1 Dashboard'a Giriş
- Email doğrulaması sonrası otomatik olarak dashboard'a yönlendirileceksiniz
- **Ekranda görecekleriniz:**
  - "Create your first application" başlığı
  - "Application name" input alanı
  - Authentication yöntemleri seçenekleri

### 2.2 Uygulama Bilgilerini Girin
```
Application name: LetsGoCappadocia
```

### 2.3 Authentication Yöntemlerini Seçin
**Önerilen seçenekler:**
- ✅ **Email** (varsayılan olarak seçili)
- ✅ **Google** (opsiyonel - kullanıcılar Google ile giriş yapabilir)
- ✅ **Phone** (opsiyonel - SMS ile doğrulama)

**Not:** Email mutlaka seçili olmalı!

### 2.4 Uygulamayı Oluştur
- **"Create application"** butonuna tıklayın
- **Ekranda görecekleriniz:**
  - "Your application is ready!" mesajı
  - Otomatik olarak API Keys sayfasına yönlendirileceksiniz

---

## 📋 Adım 3: Publishable Key Alma

### 3.1 API Keys Sayfası
- Dashboard'da sol menüden **"API Keys"** seçeneğine tıklayın
- **Ekranda görecekleriniz:**
  - "Publishable key" bölümü (üstte)
  - "Secret keys" bölümü (altta)
  - Her iki bölümde de "Copy" butonları

### 3.2 Publishable Key'i Kopyala
- **"Publishable key"** bölümünü bulun
- Anahtarın formatı: `pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX`
- **"Copy"** butonuna tıklayın
- ✅ Kopyalandı! (Clipboard'a kaydedildi)

### 3.3 .env Dosyasına Ekle
```bash
# Proje kök dizinindeki .env dosyasını açın
# Aşağıdaki satırı ekleyin:
VITE_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
```

**Dosya yolu:** `/workspace/app-9w9pd00g5j41/.env`

---

## 📋 Adım 4: Secret Key Alma

### 4.1 Secret Keys Bölümü
- Aynı API Keys sayfasında aşağı kaydırın
- **"Secret keys"** bölümünü bulun
- **Ekranda görecekleriniz:**
  - Gizlenmiş anahtar: `sk_test_••••••••••••••••••••••••••••••••`
  - "Show" butonu
  - "Copy" butonu

### 4.2 Secret Key'i Görünür Yap
- **"Show"** butonuna tıklayın
- ⚠️ **Güvenlik Uyarısı:** Bu anahtar gizli tutulmalıdır!
- **Ekranda görecekleriniz:**
  - Tam anahtar: `sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX`

### 4.3 Secret Key'i Kopyala
- **"Copy"** butonuna tıklayın
- ✅ Kopyalandı!

### 4.4 Supabase'e Ekle
1. **Supabase Dashboard'a git:** https://supabase.com/dashboard
2. **Projeyi seç:** `vtztatcglebrnvikvntf`
3. Sol menüden **"Edge Functions"** seçeneğine tıkla
4. **"Manage secrets"** butonuna tıkla
5. **Ekranda görecekleriniz:**
   - "Add new secret" formu
   - Name ve Value input alanları
6. **Secret ekle:**
   - **Name:** `CLERK_SECRET_KEY`
   - **Value:** Kopyaladığınız secret key (sk_test_...)
   - **"Add secret"** butonuna tıkla
7. ✅ Secret eklendi!

---

## 📋 Adım 5: Webhook Oluşturma

### 5.1 Webhooks Sayfasına Git
- Clerk Dashboard'da sol menüden **"Webhooks"** seçeneğine tıklayın
- **Ekranda görecekleriniz:**
  - "Add Endpoint" butonu
  - Mevcut webhook'lar listesi (boş olabilir)

### 5.2 Yeni Webhook Ekle
- **"Add Endpoint"** butonuna tıklayın
- **Ekranda görecekleriniz:**
  - "Endpoint URL" input alanı
  - "Subscribe to events" bölümü
  - "Create" butonu

### 5.3 Webhook URL'ini Gir
```
https://vtztatcglebrnvikvntf.supabase.co/functions/v1/clerk-webhook
```

**Not:** Bu URL'yi tam olarak kopyalayın, hata yapmayın!

### 5.4 Event'leri Seç
**"Subscribe to events"** bölümünde şu event'leri seçin:
- ✅ `user.created` - Yeni kullanıcı oluşturulduğunda
- ✅ `user.updated` - Kullanıcı güncellendiğinde
- ✅ `user.deleted` - Kullanıcı silindiğinde

**Nasıl seçilir:**
- Her event'in yanındaki checkbox'ı işaretleyin
- Veya "Select all user events" seçeneğini kullanın

### 5.5 Webhook'u Oluştur
- **"Create"** butonuna tıklayın
- **Ekranda görecekleriniz:**
  - "Webhook created successfully" mesajı
  - Webhook detay sayfası

---

## 📋 Adım 6: Webhook Secret Alma

### 6.1 Webhook Detay Sayfası
- Webhook oluşturulduktan sonra otomatik olarak detay sayfasına yönlendirileceksiniz
- **Ekranda görecekleriniz:**
  - Webhook URL'i
  - Event listesi
  - **"Signing Secret"** bölümü (önemli!)

### 6.2 Signing Secret'ı Bul
- Sayfada aşağı kaydırın
- **"Signing Secret"** bölümünü bulun
- **Ekranda görecekleriniz:**
  - Gizlenmiş secret: `whsec_••••••••••••••••••••••••••••••••`
  - "Reveal" butonu
  - "Copy" butonu

### 6.3 Signing Secret'ı Görünür Yap
- **"Reveal"** butonuna tıklayın
- **Ekranda görecekleriniz:**
  - Tam secret: `whsec_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX`

### 6.4 Signing Secret'ı Kopyala
- **"Copy"** butonuna tıklayın
- ✅ Kopyalandı!

### 6.5 Supabase'e Ekle
1. **Supabase Dashboard'a git:** https://supabase.com/dashboard
2. **Projeyi seç:** `vtztatcglebrnvikvntf`
3. Sol menüden **"Edge Functions"** seçeneğine tıkla
4. **"Manage secrets"** butonuna tıkla
5. **Secret ekle:**
   - **Name:** `CLERK_WEBHOOK_SECRET`
   - **Value:** Kopyaladığınız webhook secret (whsec_...)
   - **"Add secret"** butonuna tıkla
6. ✅ Secret eklendi!

---

## 📋 Adım 7: Doğrulama

### 7.1 Frontend Doğrulama

#### Terminal'de:
```bash
# Development server'ı başlat
npm run dev
```

#### Tarayıcıda:
1. **URL'yi aç:** http://localhost:5173
2. **Sign In sayfasına git**
3. **Ekranda görecekleriniz:**
   - Clerk login formu
   - Email input alanı
   - "Continue" butonu
   - Google/Phone login seçenekleri (eğer aktifse)

✅ **Başarılı!** Clerk formu görünüyorsa frontend doğru yapılandırılmış.

❌ **Hata varsa:**
- Browser console'u açın (F12)
- Hata mesajlarını kontrol edin
- `.env` dosyasında `VITE_CLERK_PUBLISHABLE_KEY` doğru mu kontrol edin

### 7.2 Backend Doğrulama

1. **Admin olarak giriş yapın**
2. **Admin Panel'e gidin**
3. **"Clerk Diagnostics"** sayfasına gidin
4. **"Test Clerk Connection"** butonuna tıklayın
5. **Ekranda görecekleriniz:**
   - "Connection successful" mesajı (yeşil)
   - Clerk API version bilgisi
   - Test sonuçları

✅ **Başarılı!** Backend doğru yapılandırılmış.

### 7.3 Webhook Doğrulama

#### Clerk Dashboard'da:
1. **Webhooks sayfasına git**
2. **Oluşturduğunuz webhook'u seç**
3. **"Testing"** sekmesine tıkla
4. **Ekranda görecekleriniz:**
   - "Send test event" butonu
   - Event type seçenekleri
5. **Test event gönder:**
   - Event type: `user.created`
   - **"Send test event"** butonuna tıkla
6. **Ekranda görecekleriniz:**
   - Response status: `200 OK` (başarılı)
   - Response body
   - Request/Response detayları

✅ **Başarılı!** Webhook çalışıyor.

#### Supabase'de Kontrol:
1. **Supabase Dashboard'a git**
2. **Edge Functions > clerk-webhook > Logs**
3. **Ekranda görecekleriniz:**
   - Webhook log kayıtları
   - "Handling event user.created" mesajı
   - Başarılı işlem logları

---

## 📋 Adım 8: Test Kullanıcı Oluşturma

### 8.1 Uygulamada Kayıt Ol
1. **Uygulamayı aç:** http://localhost:5173
2. **"Sign Up"** butonuna tıkla
3. **Email adresinizi girin**
4. **Doğrulama kodunu girin** (email'inizde)
5. **Şifre oluşturun**
6. **"Create account"** butonuna tıkla

### 8.2 Profil Kontrolü
1. **Supabase Dashboard'a git**
2. **Table Editor > profiles**
3. **Ekranda görecekleriniz:**
   - Yeni oluşturulan profil kaydı
   - `clerk_user_id` alanı dolu
   - `email` alanı dolu
   - `username` alanı dolu

✅ **Başarılı!** Webhook çalıştı ve profil oluşturuldu.

---

## ✅ Kurulum Tamamlandı!

Tüm adımları tamamladıysanız:
- ✅ Clerk hesabı oluşturuldu
- ✅ Uygulama oluşturuldu
- ✅ Publishable key yapılandırıldı
- ✅ Secret key Supabase'e eklendi
- ✅ Webhook oluşturuldu
- ✅ Webhook secret Supabase'e eklendi
- ✅ Frontend doğrulandı
- ✅ Backend doğrulandı
- ✅ Webhook doğrulandı
- ✅ Test kullanıcı oluşturuldu

**🎉 Tebrikler! Clerk entegrasyonu hazır.**

---

## 🔗 Önemli Linkler

### Clerk
- **Dashboard:** https://dashboard.clerk.com/
- **API Keys:** https://dashboard.clerk.com/last-active?path=api-keys
- **Webhooks:** https://dashboard.clerk.com/last-active?path=webhooks
- **Users:** https://dashboard.clerk.com/last-active?path=users

### Supabase
- **Dashboard:** https://supabase.com/dashboard/project/vtztatcglebrnvikvntf
- **Edge Functions:** https://supabase.com/dashboard/project/vtztatcglebrnvikvntf/functions
- **Table Editor:** https://supabase.com/dashboard/project/vtztatcglebrnvikvntf/editor

### Dokümantasyon
- **Clerk Docs:** https://clerk.com/docs
- **Clerk React:** https://clerk.com/docs/references/react/overview
- **Clerk Webhooks:** https://clerk.com/docs/integrations/webhooks

---

## 💡 İpuçları

### Anahtar Formatları
```bash
# Publishable Key (Frontend)
pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  # Test environment
pk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  # Production environment

# Secret Key (Backend)
sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  # Test environment
sk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  # Production environment

# Webhook Secret
whsec_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX    # Her webhook için benzersiz
```

### Güvenlik
- ⚠️ **Secret Key'i asla frontend'de kullanmayın**
- ⚠️ **Webhook Secret'ı asla paylaşmayın**
- ⚠️ **Anahtarları Git'e commit etmeyin**
- ✅ **Environment variables kullanın**
- ✅ **Development ve production anahtarlarını ayırın**

### Sorun Giderme
- **Anahtar çalışmıyorsa:** Kopyalarken boşluk karakteri eklenmiş olabilir
- **Webhook çalışmıyorsa:** URL'yi kontrol edin, Edge Function deploy edilmiş mi?
- **Profil oluşmuyorsa:** Supabase logs'u kontrol edin, RLS policies doğru mu?

---

**Son Güncelleme:** 2026-02-26
**Versiyon:** 1.0
