Nuxt 4 Auth Module (Local)

Bu, Nuxt 4+ projeleri için geliştirilmiş, MongoDB tabanlı, JWT ile çalışan, kendi kendine yeten bir kimlik doğrulama modülüdür. Projelere lokal bir modül olarak kolayca entegre edilmek üzere tasarlanmıştır.

---

✨ Özellikler

• Güvenli Kayıt & Giriş: bcrypt ile şifre hash'leme ve httpOnly cookie'lerde saklanan JWT (JSON Web Token) ile güvenli oturum yönetimi.
• Kalıcı Oturumlar: Sayfa yenilendiğinde veya tarayıcı kapatılıp açıldığında oturumun devam etmesini sağlar.
• Sayfa Koruma: auth isminde, belirli sayfaları sadece giriş yapmış kullanıcıların erişebilmesi için yapılandırılabilir bir middleware sağlar.
• Global State Yönetimi: useAuth() composable'ı ile uygulama genelinde kullanıcı bilgilerine kolayca erişim ve logout işlevi sunar.
• Yapılandırılabilir: Davranışları (global middleware, MongoDB URI) nuxt.config.ts üzerinden kolayca ayarlanabilir.
• Temiz Mimari: En iyi pratikler kullanılarak, runtimeConfig ve dinamik eklenti oluşturma gibi Nuxt 4'ün modern özelliklerinden faydalanır.

---

🚀 Kurulum

1. Projenizin ana dizininde bir modules klasörü olduğundan emin olun.

2. Bu projedeki modules klasörünün içerisindeki auth klasörünü, projenizdeki modules/ klasörünün içine kopyalayın.

3. Projenizin nuxt.config.ts dosyasına modülün yolunu ekleyin:

   // nuxt.config.ts
   export default defineNuxtConfig({
     modules: [
       './modules/auth'
     ]
     // ...
   })

---

⚙️ Yapılandırma

Modülün çalışması için nuxt.config.ts ve .env dosyalarında bazı ayarların yapılması gerekmektedir.

1. Environment Değişkenleri (.env)

Projenizin ana dizininde bir .env dosyası oluşturun ve aşağıdaki değişkenleri tanımlayın:

# Modülün veritabanına bağlanması için gereken MongoDB bağlantı adresi.
MONGODB_URI="mongodb+srv://<user>:<password>@cluster.../dbname"

# JWT'leri imzalamak için kullanılacak olan çok gizli ve uzun bir anahtar.
JWT_SECRET="COK_GIZLI_VE_TAHMIN_EDILEMEZ_BIR_ANAHTAR"

2. nuxt.config.ts

Modülün seçeneklerini ve gerekli runtimeConfig ayarlarını nuxt.config.ts üzerinden yapın.

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt/config';

export default defineNuxtConfig({
  // Nuxt ve Nitro için en güncel davranışları etkinleştirir
  compatibilityDate: '2025-08-18', // Bu tarihi kendi projenize göre güncelleyin

  modules: [
    './modules/auth'
  ],

  // Modülümüze özel seçenekler
  myAuth: {
    // Eğer 'true' yapılırsa, tüm siteniz korunur. Genellikle 'false' bırakılır.
    globalMiddleware: false,
    
    // Veritabanı bağlantı adresi. Doğrudan .env dosyasından okunur.
    mongodbURL: process.env.MONGODB_URI
  },

  // Sadece sunucu tarafında erişilecek gizli anahtarlar
  runtimeConfig: {
    // JWT imzalamak için kullanılan gizli anahtar. Doğrudan .env dosyasından okunur.
    jwtSecret: process.env.JWT_SECRET,
  },
})

---

💡 Kullanım

Bir Sayfayı Koruma

Bir sayfayı sadece giriş yapmış kullanıcıların görebilmesi için, o sayfanın <script setup> bölümüne definePageMeta ekleyin:

<script setup lang="ts">
definePageMeta({
  middleware: 'auth'
});
</script>

useAuth() Composable'ı

Bu composable, uygulama içinde kullanıcı durumunu yönetmek için kullanılır ve otomatik olarak import edilir (auto-import).

• Kullanıcı Bilgisini Alma:

  <script setup lang="ts">
  const { user } = useAuth();
  </script>
  
  <template>
    <div v-if="user">
      Hoş geldin, {{ user.username }}!
    </div>
    <div v-else>
      Lütfen giriş yapın.
    </div>
  </template>

• Çıkış Yapma:

  <script setup lang="ts">
  const { logout } = useAuth();
  </script>
  
  <template>
    <button @click="logout">Güvenli Çıkış</button>
  </template>