admin/38980-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
38980-vm/app-9w9pd00g5j41/CLERK_VISUAL_GUIDE.md
Flatlogic Bot 6bd90312de Initial import
2026-03-04 18:25:09 +00:00

11 KiB
Raw Permalink Blame History

📸 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

# 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:

# 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

Supabase

Dokümantasyon

💡 İpuçları

Anahtar Formatları

# 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