372 lines
11 KiB
Markdown
372 lines
11 KiB
Markdown
# 📸 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
|