SolidJS Uygulamasında Supabase ile Kullanıcı Kimlik Doğrulama Entegrasyonu

SolidJS Uygulamasında Supabase ile Kullanıcı Kimlik Doğrulama Entegrasyonu

SolidJS, modern web uygulamaları geliştirmek için performanslı ve reaktif bir JavaScript kütüphanesidir. Bileşen tabanlı yapısı ve ince taneli reaktivite modeli sayesinde, özellikle yüksek performans gerektiren uygulamalarda tercih edilmektedir. Diğer yandan Supabase, açık kaynaklı bir Firebase alternatifi olarak ortaya çıkmış, geliştiricilere veritabanı, kimlik doğrulama, depolama ve gerçek zamanlı abonelikler gibi backend hizmetlerini kolayca sunan bir “Backend-as-a-Service” (BaaS) platformudur. Bir SolidJS uygulamasına kullanıcı kimlik doğrulama özelliği eklemek istediğimizde, Supabase sunduğu zengin API’ler ve kullanım kolaylığı ile mükemmel bir çözüm ortağı olabilir.

Bu makalede, SolidJS tabanlı bir uygulamada Supabase’i kullanarak kullanıcı kaydı, girişi, çıkışı, oturum yönetimi ve korunan rotalar gibi temel kimlik doğrulama akışlarını nasıl entegre edeceğimizi adım adım ele alacağız. Amacımız, geliştiricilere bu iki güçlü teknolojiyi bir araya getirerek hızlı ve güvenli bir şekilde kullanıcı kimlik doğrulama sistemleri oluşturma konusunda kapsamlı bir rehber sunmaktır.

Ön Koşullar

Bu makaledeki adımları takip edebilmek için aşağıdaki temel bilgilere ve araçlara sahip olmanız gerekmektedir:

* Temel JavaScript Bilgisi: ES6+ sentaksına ve asenkron programlamaya aşina olmak.
* SolidJS Temelleri: SolidJS’in reaktif primitifleri (createSignal, createEffect vb.) ve bileşen yapısı hakkında bilgi sahibi olmak.
* Node.js ve npm/yarn: Geliştirme ortamınızda kurulu olması.
* Git: Versiyon kontrol sistemi.
* Supabase Hesabı: Ücretsiz bir Supabase hesabı oluşturmuş olmanız gerekmektedir.

Supabase Projesi Oluşturma ve Yapılandırma

SolidJS uygulamamızla etkileşime geçecek bir Supabase backend’ine ihtiyacımız var. Bu bölümde, Supabase projemizi nasıl oluşturacağımızı ve kimlik doğrulama için gerekli temel yapılandırmaları nasıl yapacağımızı inceleyeceğiz.

Supabase Hesabı Oluşturma ve Proje Yaratma

İlk adım, Supabase web sitesine (supabase.com) giderek ücretsiz bir hesap oluşturmak veya mevcut hesabınızla giriş yapmaktır. Giriş yaptıktan sonra, kontrol panelinde “New project” butonuna tıklayarak yeni bir proje oluşturabilirsiniz.

Proje oluşturma aşamasında aşağıdaki bilgileri girmeniz istenecektir:

* Organization: Projenizin ait olacağı organizasyonu seçin veya yeni bir tane oluşturun.
* Project name: Projenize açıklayıcı bir isim verin (örn. solid-auth-app).
* Database Password: Veritabanınız için güçlü bir şifre belirleyin ve güvenli bir yerde saklayın.
* Region: Uygulamanızın kullanıcılarına coğrafi olarak en yakın bölgeyi seçerek gecikmeyi azaltabilirsiniz.

Bu adımları tamamladığınızda Supabase, sizin için bir PostgreSQL veritabanı, kimlik doğrulama hizmetleri, depolama ve daha fazlasını içeren bir backend provizyonu yapacaktır. Bu işlem birkaç dakika sürebilir.

API Anahtarlarını ve URL’yi Alma

Projeniz hazır olduğunda, Supabase kontrol panelinizdeki “Project Settings” (Proje Ayarları) bölümüne ve ardından “API” sekmesine gidin. Burada, SolidJS uygulamanızın Supabase ile iletişim kurması için gerekli olan Project URL ve anon public anahtarını bulacaksınız.

* Project URL: Supabase hizmetinize yapılan tüm isteklerin gönderileceği URL’dir.
* anon public (Public Anon Key): Bu anahtar, istemci tarafında güvenle kullanılabilir. Kullanıcı kimlik doğrulaması gerektirmeyen veya genel olarak erişilebilir veriler için kullanılır. Kullanıcı oturum açtığında, bu anahtar kullanılarak yapılan istekler kullanıcının kimliğiyle ilişkilendirilir.

service_role anahtarı ise yalnızca sunucu tarafında kullanılması gereken, yüksek ayrıcalıklı bir anahtardır. Asla istemci tarafında (SolidJS uygulamanızda) kullanmamalısınız.

Kimlik Doğrulama Sağlayıcılarını Yapılandırma

Supabase, e-posta/şifre tabanlı kimlik doğrulamanın yanı sıra birçok sosyal medya ve OAuth sağlayıcısını da destekler. Kimlik doğrulama ayarlarını yapılandırmak için Supabase kontrol panelinizdeki “Authentication” (Kimlik Doğrulama) bölümüne ve ardından “Providers” (Sağlayıcılar) sekmesine gidin.

Varsayılan olarak, e-posta/şifre tabanlı kimlik doğrulama etkindir. Eğer kullanıcılarınızın e-posta onayı yapmasını istiyorsanız, “Email” sağlayıcısının ayarlarından “Confirm email” seçeneğini etkinleştirebilirsiniz. Bu, kullanıcılar kaydolduktan sonra e-posta adreslerini doğrulamalarını gerektirir.

Sosyal medya ile giriş yapmak istiyorsanız (örn. Google, GitHub), ilgili sağlayıcıyı etkinleştirip gerekli API anahtarlarını ve geri arama (callback) URL’lerini yapılandırmanız gerekir. Bu işlem, genellikle ilgili sağlayıcının geliştirici konsolundan bir uygulama oluşturmayı ve Supabase’e Client ID ile Client Secret’ı sağlamayı içerir.

SolidJS Uygulaması Oluşturma ve Supabase Entegrasyonu

Supabase projemizi hazırladığımıza göre, şimdi SolidJS uygulamamızı oluşturalım ve Supabase istemcisini entegre edelim.

Yeni SolidJS Uygulaması Oluşturma

Vite kullanarak hızlıca yeni bir SolidJS projesi oluşturabiliriz. Terminalinizde aşağıdaki komutu çalıştırın:

npm create vite@latest my-solid-auth-app -- --template solid
cd my-solid-auth-app
npm install

Bu komut, my-solid-auth-app adında yeni bir SolidJS projesi oluşturacak ve gerekli bağımlılıkları yükleyecektir.

Gerekli Paketleri Yükleme

Supabase ile etkileşim kurmak için @supabase/supabase-js paketini yüklememiz gerekiyor:

npm install @supabase/supabase-js

Supabase İstemcisini Yapılandırma

Uygulamamızın herhangi bir yerinden Supabase’e kolayca erişebilmek için Supabase istemcisini merkezi bir yerde başlatmalı ve yapılandırmalıyız. Genellikle bu işlem, projenizin kök dizininde veya bir src/lib klasörü içinde supabaseClient.js veya supabase.js gibi bir dosyada yapılır.

Supabase API anahtarlarımızı doğrudan kod içine yazmak yerine, güvenlik amacıyla ortam değişkenleri (environment variables) kullanmak en iyi yöntemdir. Bunun için projenizin kök dizininde .env adında bir dosya oluşturun ve Supabase URL’nizi ve anon public anahtarınızı buraya ekleyin:

VITE_SUPABASE_URL="https://your-project-ref.supabase.co"
VITE_SUPABASE_ANON_KEY="your-anon-public-key"

Vite, ortam değişkenlerini VITE_ önekiyle başlayan değişkenler olarak otomatik olarak yükler ve istemci tarafında erişilebilir hale getirir. Şimdi, src/supabaseClient.js (veya benzeri) dosyasını oluşturalım:

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

Artık supabase nesnesini uygulamanızın herhangi bir yerinde içe aktararak Supabase API’sine erişebilirsiniz.

Temel Kimlik Doğrulama Akışı

Şimdi sıra geldi kullanıcıların uygulamamızda kayıt olmasına, giriş yapmasına ve çıkış yapmasına olanak tanıyan temel kimlik doğrulama akışlarını uygulamaya.

Kayıt Olma (Sign Up)

Kullanıcıların e-posta ve şifre ile kaydolmasını sağlamak için bir kayıt formu oluşturalım.

// src/components/Auth.jsx
import { createSignal } from 'solid-js';
import { supabase } from '../supabaseClient';

function Auth() {
  const [loading, setLoading] = createSignal(false);
  const [email, setEmail] = createSignal('');
  const [password, setPassword] = createSignal('');
  const [message, setMessage] = createSignal('');

  const handleSignUp = async (e) => {
    e.preventDefault();
    setLoading(true);
    setMessage('');

    try {
      const { error } = await supabase.auth.signUp({
        email: email(),
        password: password(),
      });

      if (error) throw error;
      setMessage('Kayıt başarılı! Lütfen e-postanızı kontrol edin ve onaylayın.');
    } catch (error) {
      setMessage(Hata: ${error.message});
    } finally {
      setLoading(false);
    }
  };

  return (
    

      
Kayıt Ol
      

        

          E-posta:
           setEmail(e.target.value)}
            required
          />
        
        

          Şifre:
           setPassword(e.target.value)}
            required
          />
        
        
          {loading() ? 'Yükleniyor...' : 'Kayıt Ol'}
        
      
      {message() && 
{message()}
}
    
  );
}

export default Auth;

Bu bileşen, e-posta ve şifre alanları içeren basit bir form sunar. handleSignUp fonksiyonu, supabase.auth.signUp metodunu kullanarak Supabase’e yeni bir kullanıcı kaydeder. Eğer Supabase’de e-posta onayı etkinse, kullanıcıya bir onay e-postası gönderilir ve uygulama içinde buna dair bir mesaj gösterilir.

Giriş Yapma (Sign In)

Kullanıcıların uygulamaya giriş yapabilmeleri için benzer bir giriş formu oluşturacağız. Supabase, e-posta ve şifre ile giriş için signInWithPassword metodunu sunar.

// src/components/Auth.jsx içinde devam
// ... (Auth bileşeninin üst kısmı)

  const handleSignIn = async (e) => {
    e.preventDefault();
    setLoading(true);
    setMessage('');

    try {
      const { error } = await supabase.auth.signInWithPassword({
        email: email(),
        password: password(),
      });

      if (error) throw error;
      setMessage('Giriş başarılı!');
      // Başarılı girişte kullanıcıyı yönlendirme yapılabilir
    } catch (error) {
      setMessage(Hata: ${error.message});
    } finally {
      setLoading(false);
    }
  };

  return (
    

      {/ Kayıt Ol formu /}
      
Giriş Yap
      

        {/ E-posta ve şifre inputları aynı kalır /}
        

          E-posta:
           setEmail(e.target.value)}
            required
          />
        
        

          Şifre:
           setPassword(e.target.value)}
            required
          />
        
        
          {loading() ? 'Yükleniyor...' : 'Giriş Yap'}
        
      
      {message() && 
{message()}
}
    
  );
}

export default Auth;

Bu örnekte, Auth bileşeni hem kayıt hem de giriş formlarını içeriyor. Gerçek bir uygulamada, bu formları ayrı bileşenlere ayırmak ve bir yönlendirme (routing) sistemi ile geçiş yapmak daha iyi bir yaklaşım olacaktır.

Çıkış Yapma (Sign Out)

Kullanıcıların oturumlarını sonlandırmaları için basit bir çıkış butonu ekleyelim. Bu işlem, supabase.auth.signOut metodu ile gerçekleştirilir.

// src/components/Account.jsx
import { createSignal, onMount } from 'solid-js';
import { supabase } from '../supabaseClient';

function Account() {
  const [loading, setLoading] = createSignal(false);
  const [user, setUser] = createSignal(null);

  onMount(async () => {
    const { data: { user } } = await supabase.auth.getUser();
    setUser(user);
  });

  const handleSignOut = async () => {
    setLoading(true);
    try {
      const { error } = await supabase.auth.signOut();
      if (error) throw error;
      // Kullanıcıyı giriş sayfasına yönlendirme veya durumu güncelleme
    } catch (error) {
      console.error('Çıkış yaparken hata oluştu:', error.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    

      
Hesabım
      {user() ? (
        <>
          
Hoş geldiniz, {user().email}!
          
            {loading() ? 'Çıkış Yapılıyor...' : 'Çıkış Yap'}
          
        >
      ) : (
        
Giriş yapmadınız.
      )}
    
  );
}

export default Account;

Bu Account bileşeni, mevcut kullanıcıyı gösterir ve bir çıkış butonu sunar. onMount kullanarak bileşen yüklendiğinde mevcut kullanıcı bilgisini alırız.

Kullanıcı Oturumunu Yönetme

Bir kullanıcının oturum durumunu (giriş yapmış mı, kimdir?) uygulamanın genelinde takip etmek ve buna göre UI’ı güncellemek kritik öneme sahiptir. SolidJS’in reaktif yapısı ve Supabase’in oturum dinleyicileri bu süreci oldukça kolaylaştırır.

supabase.auth.onAuthStateChange Dinleyicisi

Supabase, kimlik doğrulama durumundaki değişiklikleri dinlemek için onAuthStateChange metodunu sağlar. Bu metod, oturum açma, oturum kapatma, jeton yenileme gibi olaylarda tetiklenir.

// src/AuthContext.jsx
import { createContext, useContext, createSignal, onMount, onCleanup } from 'solid-js';
import { supabase } from './supabaseClient';

const AuthContext = createContext();

export function AuthProvider(props) {
  const [session, setSession] = createSignal(null);
  const [user, setUser] = createSignal(null);
  const [loading, setLoading] = createSignal(true);

  onMount(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setSession(session);
      setUser(session?.user || null);
      setLoading(false);
    });

    const { data: authListener } = supabase.auth.onAuthStateChange(
      (event, currentSession) => {
        setSession(currentSession);
        setUser(currentSession?.user || null);
        setLoading(false);
      }
    );

    onCleanup(() => {
      authListener.subscription.unsubscribe();
    });
  });

  const store = {
    session,
    user,
    loading,
    // Diğer auth işlemleri burada sağlanabilir
  };

  return (
    
      {props.children}
    
  );
}

export function useAuth() {
  return useContext(AuthContext);
}

Bu AuthProvider bileşeni:
1. createContext kullanarak bir bağlam (Context) oluşturur.
2. createSignal ile session, user ve loading durumlarını tutar.
3. onMount içinde, ilk olarak mevcut oturumu Supabase’den alır.
4. Ardından supabase.auth.onAuthStateChange metodunu kullanarak oturum değişikliklerini dinlemeye başlar. Her değişiklikte session ve user sinyallerini günceller.
5. onCleanup kullanarak bileşen DOM’dan kaldırıldığında dinleyiciyi temizler, bellek sızıntılarını önler.
6. AuthContext.Provider aracılığıyla session, user ve loading durumlarını alt bileşenlere sağlar.
7. useAuth hook’u, bu bağlama kolayca erişim sağlar.

Uygulamanızın kök bileşenini (genellikle App.jsx veya index.jsx) bu AuthProvider ile sarmalamanız gerekir:

// src/App.jsx
import { AuthProvider } from './AuthContext';
import Auth from './components/Auth';
import Account from './components/Account';

function App() {
  return (
    
      

        
      
      

        
        
      
    
  );
}

export default App;

Artık uygulamanızın herhangi bir yerinde useAuth hook’unu kullanarak mevcut oturum ve kullanıcı bilgilerine erişebilirsiniz:

// src/components/SomeComponent.jsx
import { useAuth } from '../AuthContext';

function SomeComponent() {
  const { user, loading } = useAuth();

  return (
    

      {loading() ? (
        
Yükleniyor...
      ) : user() ? (
        
Hoş geldiniz, {user().email}!
      ) : (
        
Lütfen giriş yapın.
      )}
    
  );
}

Korunan Rotalar (Protected Routes)

Çoğu uygulamada, belirli sayfaların yalnızca oturum açmış kullanıcılar tarafından erişilebilir olması gerekir. SolidJS yönlendirme kütüphanesi (örneğin Solid Router) kullanarak korunan rotaları kolayca uygulayabiliriz.

Önce Solid Router’ı kuralım:

npm install @solidjs/router

Ardından, korunan bir rota bileşeni oluşturalım:

// src/components/PrivateRoute.jsx
import { Navigate } from '@solidjs/router';
import { useAuth } from '../AuthContext';

function PrivateRoute(props) {
  const { user, loading } = useAuth();

  if (loading()) {
    return 
Yükleniyor...
; // Yükleme durumunu göster
  }

  if (!user()) {
    // Kullanıcı oturum açmamışsa giriş sayfasına yönlendir
    return ;
  }

  // Kullanıcı oturum açmışsa, çocuk bileşenleri render et
  return <>{props.children}>;
}

export default PrivateRoute;

Şimdi App.jsx dosyamızı güncelleyerek yönlendirmeyi ve korunan rotaları ekleyelim:

// src/App.jsx
import { AuthProvider, useAuth } from './AuthContext';
import { Router, Routes, Route, A } from '@solidjs/router';
import Auth from './components/Auth';
import Account from './components/Account';
import Home from './components/Home'; // Yeni Home bileşeni
import PrivateRoute from './components/PrivateRoute';

function AppRoutes() {
  const { user, loading, session } = useAuth(); // AuthContext'ten user ve loading al

  return (
    <>
      
      

        
          
          
          
                
              
            }
          />
          {/ Diğer rotalar /}
        
      
    >
  );
}

function App() {
  return (
    
      
        
      
    
  );
}

export default App;

// src/components/Home.jsx
function Home() {
  return 
Ana Sayfa
;
}

Bu yapılandırma ile /account rotasına erişmek isteyen bir kullanıcı, eğer oturum açmamışsa otomatik olarak /login sayfasına yönlendirilecektir.

Kullanıcı Verilerine Erişim ve Yönetim

Supabase Auth, temel kullanıcı bilgilerini (UUID, e-posta, oluşturma tarihi vb.) auth.users tablosunda saklar. Ancak, kullanıcıların profil resimleri, kullanıcı adları veya diğer özel bilgileri gibi ek verileri genellikle ayrı bir veritabanı tablosunda saklamak istenir.

profiles Tablosu Oluşturma

Supabase kontrol panelinizdeki “Table Editor” (Tablo Düzenleyici) bölümüne giderek yeni bir tablo oluşturalım:

* Table name: profiles
* Columns:
* id: uuid tipinde, Primary Key ve is unique olarak işaretleyin. Varsayılan değer olarak auth.uid() fonksiyonunu ayarlayın. Bu, yeni bir kullanıcı kaydolduğunda profiles tablosuna otomatik olarak bir giriş eklenmesini sağlar ve id‘yi kullanıcının Supabase Auth UUID’si ile eşleştirir.
* username: text tipinde, is unique olabilir.
* avatar_url: text tipinde.
* updated_at: timestampz tipinde, varsayılan olarak now().

Row Level Security (RLS) Politikaları

profiles tablosundaki verilere güvenli bir şekilde erişmek ve bunları yönetmek için RLS (Satır Seviyesi Güvenliği) politikalarını etkinleştirmemiz ve yapılandırmamız gerekir. Supabase, yeni bir tablo oluşturduğunuzda RLS’yi varsayılan olarak kapalı tutar. profiles tablonuzun ayarlarından “Enable Row Level Security” seçeneğini etkinleştirin.

Ardından, aşağıdaki politikaları ekleyin:

1. Select Policy (Okuma): Herkes kendi profilini okuyabilir.
* Name: Enable read access for all users
* For operations: SELECT
* Using expression: auth.uid() = id
* Bu politika, yalnızca oturum açmış bir kullanıcının kendi profil verilerini okumasına izin verir. Anonim kullanıcılar profil verilerini okuyamaz.

2. Insert Policy (Ekleme): Kullanıcılar kendi profillerini oluşturabilir.
* Name: Enable insert for authenticated users only
* For operations: INSERT
* With check expression: auth.uid() = id
* Bu politika, yeni bir kullanıcı kaydolduğunda ve profiles tablosuna otomatik olarak bir giriş eklendiğinde (id alanı auth.uid() ile varsayılan olarak ayarlandığı için) veya kullanıcı istemci tarafında kendi profilini oluşturmaya çalıştığında çalışır.

3. Update Policy (Güncelleme): Kullanıcılar kendi profillerini güncelleyebilir.
* Name: Enable update for users based on id
* For operations: UPDATE
* Using expression: auth.uid() = id
* Bu politika, bir kullanıcının yalnızca kendi profil verilerini güncellemesine izin verir.

Bu politikalar, kullanıcıların yalnızca kendi verileri üzerinde işlem yapabilmesini sağlayarak uygulamanızın güvenliğini artırır.

Profil Verilerini Yönetme

Account bileşenimizde kullanıcı profil bilgilerini gösterebilir ve güncelleyebiliriz:

// src/components/Account.jsx içinde devam
import { createSignal, onMount, createEffect } from 'solid-js';
import { supabase } from '../supabaseClient';
import { useAuth } from '../AuthContext';

function Account() {
  const { user, session } = useAuth(); // AuthContext'ten user ve session al
  const [loading, setLoading] = createSignal(true);
  const [username, setUsername] = createSignal(null);
  const [website, setWebsite] = createSignal(null);
  const [avatarUrl, setAvatarUrl] = createSignal(null);
  const [message, setMessage] = createSignal('');

  // user sinyali değiştiğinde profili getir
  createEffect(async () => {
    if (user()) {
      await getProfile();
    } else {
      // Kullanıcı çıkış yaptığında veya oturum yoksa formu temizle
      setUsername(null);
      setWebsite(null);
      setAvatarUrl(null);
      setLoading(false);
    }
  });

  const getProfile = async () => {
    try {
      setLoading(true);
      setMessage('');
      if (!user()) throw new Error('Kullanıcı bulunamadı!');

      let { data, error, status } = await supabase
        .from('profiles')
        .select(username, website, avatar_url)
        .eq('id', user().id)
        .single();

      if (error && status !== 406) {
        throw error;
      }

      if (data) {
        setUsername(data.username);
        setWebsite(data.website);
        setAvatarUrl(data.avatar_url);
      }
    } catch (error) {
      setMessage(Profil bilgileri alınırken hata oluştu: ${error.message});
    } finally {
      setLoading(false);
    }
  };

  const updateProfile = async (e) => {
    e.preventDefault();
    setLoading(true);
    setMessage('');

    try {
      if (!user()) throw new Error('Kullanıcı bulunamadı!');

      const updates = {
        id: user().id,
        username: username(),
        website: website(),
        avatar_url: avatarUrl(),
        updated_at: new Date().toISOString(),
      };

      let { error } = await supabase.from('profiles').upsert(updates);
      if (error) throw error;
      setMessage('Profil başarıyla güncellendi!');
    } catch (error) {
      setMessage(Profil güncellenirken hata oluştu: ${error.message});
    } finally {
      setLoading(false);
    }
  };

  const handleSignOut = async () => {
    setLoading(true);
    try {
      const { error } = await supabase.auth.signOut();
      if (error) throw error;
      setMessage('Çıkış başarılı!');
    } catch (error) {
      setMessage(Çıkış yaparken hata oluştu: ${error.message});
    } finally {
      setLoading(false);
    }
  };

  return (
    

      
Hesabım
      {loading() ? (
        
Yükleniyor...
      ) : user() ? (
        

          

            E-posta
            
          
          

            Kullanıcı Adı
             setUsername(e.target.value)}
            />
          
          

            Web Sitesi
             setWebsite(e.target.value)}
            />
          
          
            {loading() ? 'Güncelleniyor...' : 'Profili Güncelle'}
          
          
            Çıkış Yap
          
          {message() && 
{message()}
}
        
      ) : (
        
Lütfen giriş yapın.
      )}
    
  );
}

export default Account;

Bu Account bileşeni, useAuth hook’unu kullanarak mevcut kullanıcıyı alır. createEffect ile kullanıcı değiştiğinde veya bileşen yüklendiğinde profil verilerini Supabase’den getirir. Kullanıcı adını ve web sitesini güncellemek için bir form sunar ve supabase.from('profiles').upsert metodunu kullanarak veritabanındaki profiles tablosunu günceller.

Sosyal Medya ile Kimlik Doğrulama

Supabase, Google, GitHub, Facebook gibi birçok OAuth sağlayıcısı ile kimlik doğrulamayı destekler. Bu, kullanıcılar için daha hızlı ve kolay bir giriş deneyimi sunar.

Supabase Ayarlarında Sağlayıcıları Etkinleştirme

Supabase kontrol panelinizdeki “Authentication” -> “Providers” bölümüne gidin. Burada etkinleştirmek istediğiniz sağlayıcıyı seçin (örneğin Google). Sağlayıcının ayarlarında, genellikle bir Client ID ve Client Secret girmeniz istenir. Bu bilgileri, ilgili sağlayıcının geliştirici konsolundan (örneğin Google Cloud Console) bir proje veya uygulama oluşturarak almanız gerekir.

Ayrıca, sağlayıcının geri arama (callback) URL’sini Supabase projenizin “Authentication” -> “Settings” bölümündeki Site URL ile veya “Providers” bölümündeki sağlayıcının kendi ayarlarındaki Callback URL ile eşleştirdiğinizden emin olun. Genellikle bu URL, Supabase projenizin URL’si ile otomatik olarak yapılandırılır.

supabase.auth.signInWithOAuth Kullanımı

Sosyal medya ile giriş yapmak için supabase.auth.signInWithOAuth metodunu kullanırız:

// src/components/Auth.jsx içinde devam
// ... (Auth bileşeninin üst kısmı)

  const handleOAuthSignIn = async (provider) => {
    setLoading(true);
    setMessage('');

    try {
      const { error } = await supabase.auth.signInWithOAuth({
        provider: provider,
        options: {
          redirectTo: window.location.origin + '/account', // Giriş sonrası yönlendirilecek URL
        },
      });

      if (error) throw error;
      // Yönlendirme Supabase tarafından otomatik olarak yapılır
    } catch (error) {
      setMessage(Hata: ${error.message});
    } finally {
      setLoading(false);
    }
  };

  return (
    

      {/ Kayıt Ol ve Giriş Yap formları /}

      
Sosyal Medya ile Giriş
       handleOAuthSignIn('google')} disabled={loading()}>
        Google ile Giriş Yap
      
       handleOAuthSignIn('github')} disabled={loading()}>
        GitHub ile Giriş Yap
      
      {message() && 
{message()}
}
    
  );
}

Bu kod parçası, Google ve GitHub ile giriş yapmak için iki düğme ekler. handleOAuthSignIn fonksiyonu, signInWithOAuth metodunu çağırarak kullanıcıyı seçilen sağlayıcının kimlik doğrulama sayfasına yönlendirir. Başarılı kimlik doğrulamasından sonra, kullanıcı redirectTo seçeneğinde belirtilen URL’ye geri yönlendirilir ve Supabase oturumunu otomatik olarak yönetir.

Hata Yönetimi ve Kullanıcı Deneyimi

Sağlam bir uygulama geliştirmek için hata yönetimi ve kullanıcıya geri bildirim sağlamak çok önemlidir.

* try-catch Blokları: Tüm asenkron Supabase işlemlerini try-catch blokları içine alın. Bu, ağ hatalarını veya API’den dönen hataları yakalamanızı sağlar.
* Kullanıcıya Geri Bildirim: Hata mesajlarını veya başarı bildirimlerini (örneğin, bir toast mesajı kütüphanesi kullanarak) kullanıcıya anlaşılır bir şekilde gösterin. Makaledeki örneklerde message sinyali bu amaçla kullanılmıştır.
* Yükleme Durumları: Uzun sürebilecek işlemler sırasında (API çağrıları gibi) kullanıcıya bir yükleme göstergesi (spinner, “Yükleniyor…” metni) sunun. Bu, kullanıcının uygulamanın donmadığını anlamasını sağlar. loading sinyali bu amaçla kullanılmıştır.
* Form Doğrulama: Form alanlarının geçerliliğini istemci tarafında doğrulayın (örn. e-posta formatı, şifre uzunluğu).

Güvenlik İpuçları

Supabase ile çalışırken güvenliği göz önünde bulundurmanız gereken birkaç önemli nokta vardır:

* Ortam Değişkenleri: API anahtarlarınızı ve diğer hassas bilgileri asla doğrudan kod içine yazmayın. Her zaman ortam değişkenleri kullanın (.env dosyaları gibi).
* Row Level Security (RLS): Veritabanı tablolarınızda RLS’yi her zaman etkinleştirin ve uygun politikaları uygulayın. Bu, yetkisiz kullanıcıların verilere erişmesini veya değiştirmesini engeller.
* anon public Anahtarı: Bu anahtar istemci tarafında güvenle kullanılabilir, ancak yalnızca genel erişilebilir veriler veya oturum açma/kayıt gibi kimlik doğrulama işlemleri için kullanılmalıdır.
* service_role Anahtarı: Bu anahtarın asla istemci tarafında (SolidJS uygulamanızda) kullanılmadığından emin olun. Bu anahtar, tüm RLS politikalarını atlayabilir ve tam veritabanı erişimi sağlar. Yalnızca güvenli sunucu ortamlarında veya Supabase fonksiyonlarında kullanılmalıdır.
* Şifre Politikaları: Supabase Auth, şifre karmaşıklığı gereksinimlerini yapılandırmanıza olanak tanır. Kullanıcılarınızın güçlü şifreler kullanmasını teşvik edin.
* E-posta Onayı: Yeni kayıt olan kullanıcıların e-posta adreslerini doğrulamalarını isteyerek sahte hesapları ve spam’ı azaltabilirsiniz.

Sonuç

Bu makalede, SolidJS’in reaktif yapısı ile Supabase’in güçlü backend hizmetlerini birleştirerek modern bir web uygulamasında kullanıcı kimlik doğrulamasını nasıl entegre edeceğimizi ayrıntılı bir şekilde inceledik. Supabase’in sunduğu basit API’ler sayesinde, kayıt, giriş, çıkış, oturum yönetimi, korunan rotalar ve hatta sosyal medya ile kimlik doğrulama gibi karmaşık görünen özellikleri SolidJS uygulamamıza hızla ekleyebildik.

SolidJS’in ince taneli reaktivitesi, Supabase’in onAuthStateChange dinleyicisi ile birleştiğinde, kullanıcı oturum durumundaki değişikliklere anında tepki veren ve UI’ı sorunsuz bir şekilde güncelleyen son derece performanslı uygulamalar oluşturmamızı sağlar. Ayrıca, RLS politikaları ve ortam değişkenleri gibi güvenlik uygulamalarını benimseyerek, kullanıcı verilerini koruma altına almanın önemini vurguladık.

Bu entegrasyon, geliştiricilere hem frontend hem de backend tarafında hızlı geliştirme ve yüksek performans sunan güçlü bir kombinasyon sağlar. Supabase’in sunduğu depolama, gerçek zamanlı abonelikler ve Edge Fonksiyonları gibi diğer özelliklerini keşfederek SolidJS uygulamanızın yeteneklerini daha da genişletebilirsiniz. Bu rehberin, SolidJS ve Supabase ile kimlik doğrulama sistemleri oluşturmak isteyen geliştiriciler için sağlam bir başlangıç noktası olmasını umuyoruz.