{"id":37713,"date":"2026-01-13T12:41:17","date_gmt":"2026-01-13T09:41:17","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=37713"},"modified":"2026-01-13T12:41:17","modified_gmt":"2026-01-13T09:41:17","slug":"solidjs-uygulamasinda-supabase-ile-kullanici-kimlik-dogrulama-entegrasyonu","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/solidjs-uygulamasinda-supabase-ile-kullanici-kimlik-dogrulama-entegrasyonu\/","title":{"rendered":"SolidJS Uygulamas\u0131nda Supabase ile Kullan\u0131c\u0131 Kimlik Do\u011frulama Entegrasyonu"},"content":{"rendered":"

<\/p>\n

SolidJS Uygulamas\u0131nda Supabase ile Kullan\u0131c\u0131 Kimlik Do\u011frulama Entegrasyonu<\/h2>\n

SolidJS, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in performansl\u0131 ve reaktif bir JavaScript k\u00fct\u00fcphanesidir. Bile\u015fen tabanl\u0131 yap\u0131s\u0131 ve ince taneli reaktivite modeli sayesinde, \u00f6zellikle y\u00fcksek performans gerektiren uygulamalarda tercih edilmektedir. Di\u011fer yandan Supabase, a\u00e7\u0131k kaynakl\u0131 bir Firebase alternatifi olarak ortaya \u00e7\u0131km\u0131\u015f, geli\u015ftiricilere veritaban\u0131, kimlik do\u011frulama, depolama ve ger\u00e7ek zamanl\u0131 abonelikler gibi backend hizmetlerini kolayca sunan bir “Backend-as-a-Service” (BaaS) platformudur. Bir SolidJS uygulamas\u0131na kullan\u0131c\u0131 kimlik do\u011frulama \u00f6zelli\u011fi eklemek istedi\u011fimizde, Supabase sundu\u011fu zengin API’ler ve kullan\u0131m kolayl\u0131\u011f\u0131 ile m\u00fckemmel bir \u00e7\u00f6z\u00fcm orta\u011f\u0131 olabilir.<\/p>\n

Bu makalede, SolidJS tabanl\u0131 bir uygulamada Supabase’i kullanarak kullan\u0131c\u0131 kayd\u0131, giri\u015fi, \u00e7\u0131k\u0131\u015f\u0131, oturum y\u00f6netimi ve korunan rotalar gibi temel kimlik do\u011frulama ak\u0131\u015flar\u0131n\u0131 nas\u0131l entegre edece\u011fimizi ad\u0131m ad\u0131m ele alaca\u011f\u0131z. Amac\u0131m\u0131z, geli\u015ftiricilere bu iki g\u00fc\u00e7l\u00fc teknolojiyi bir araya getirerek h\u0131zl\u0131 ve g\u00fcvenli bir \u015fekilde kullan\u0131c\u0131 kimlik do\u011frulama sistemleri olu\u015fturma konusunda kapsaml\u0131 bir rehber sunmakt\u0131r.<\/p>\n

\u00d6n Ko\u015fullar<\/h3>\n

Bu makaledeki ad\u0131mlar\u0131 takip edebilmek i\u00e7in a\u015fa\u011f\u0131daki temel bilgilere ve ara\u00e7lara sahip olman\u0131z gerekmektedir:<\/p>\n

* Temel JavaScript Bilgisi:<\/strong> ES6+ sentaks\u0131na ve asenkron programlamaya a\u015fina olmak.
\n* SolidJS Temelleri:<\/strong> SolidJS’in reaktif primitifleri (createSignal, createEffect vb.) ve bile\u015fen yap\u0131s\u0131 hakk\u0131nda bilgi sahibi olmak.
\n* Node.js ve npm\/yarn:<\/strong> Geli\u015ftirme ortam\u0131n\u0131zda kurulu olmas\u0131.
\n* Git:<\/strong> Versiyon kontrol sistemi.
\n* Supabase Hesab\u0131:<\/strong> \u00dccretsiz bir Supabase hesab\u0131 olu\u015fturmu\u015f olman\u0131z gerekmektedir.<\/p>\n

Supabase Projesi Olu\u015fturma ve Yap\u0131land\u0131rma<\/h3>\n

SolidJS uygulamam\u0131zla etkile\u015fime ge\u00e7ecek bir Supabase backend’ine ihtiyac\u0131m\u0131z var. Bu b\u00f6l\u00fcmde, Supabase projemizi nas\u0131l olu\u015fturaca\u011f\u0131m\u0131z\u0131 ve kimlik do\u011frulama i\u00e7in gerekli temel yap\u0131land\u0131rmalar\u0131 nas\u0131l yapaca\u011f\u0131m\u0131z\u0131 inceleyece\u011fiz.<\/p>\n

Supabase Hesab\u0131 Olu\u015fturma ve Proje Yaratma<\/h4>\n

\u0130lk ad\u0131m, Supabase web sitesine (supabase.com) giderek \u00fccretsiz bir hesap olu\u015fturmak veya mevcut hesab\u0131n\u0131zla giri\u015f yapmakt\u0131r. Giri\u015f yapt\u0131ktan sonra, kontrol panelinde “New project” butonuna t\u0131klayarak yeni bir proje olu\u015fturabilirsiniz.<\/p>\n

Proje olu\u015fturma a\u015famas\u0131nda a\u015fa\u011f\u0131daki bilgileri girmeniz istenecektir:<\/p>\n

* Organization:<\/strong> Projenizin ait olaca\u011f\u0131 organizasyonu se\u00e7in veya yeni bir tane olu\u015fturun.
\n* Project name:<\/strong> Projenize a\u00e7\u0131klay\u0131c\u0131 bir isim verin (\u00f6rn. solid-auth-app<\/code>).
\n* Database Password:<\/strong> Veritaban\u0131n\u0131z i\u00e7in g\u00fc\u00e7l\u00fc bir \u015fifre belirleyin ve g\u00fcvenli bir yerde saklay\u0131n.
\n* Region:<\/strong> Uygulaman\u0131z\u0131n kullan\u0131c\u0131lar\u0131na co\u011frafi olarak en yak\u0131n b\u00f6lgeyi se\u00e7erek gecikmeyi azaltabilirsiniz.<\/p>\n

Bu ad\u0131mlar\u0131 tamamlad\u0131\u011f\u0131n\u0131zda Supabase, sizin i\u00e7in bir PostgreSQL veritaban\u0131, kimlik do\u011frulama hizmetleri, depolama ve daha fazlas\u0131n\u0131 i\u00e7eren bir backend provizyonu yapacakt\u0131r. Bu i\u015flem birka\u00e7 dakika s\u00fcrebilir.<\/p>\n

API Anahtarlar\u0131n\u0131 ve URL’yi Alma<\/h4>\n

Projeniz haz\u0131r oldu\u011funda, Supabase kontrol panelinizdeki “Project Settings” (Proje Ayarlar\u0131) b\u00f6l\u00fcm\u00fcne ve ard\u0131ndan “API” sekmesine gidin. Burada, SolidJS uygulaman\u0131z\u0131n Supabase ile ileti\u015fim kurmas\u0131 i\u00e7in gerekli olan Project URL<\/code> ve anon public<\/code> anahtar\u0131n\u0131 bulacaks\u0131n\u0131z.<\/p>\n

* Project URL:<\/strong> Supabase hizmetinize yap\u0131lan t\u00fcm isteklerin g\u00f6nderilece\u011fi URL’dir.
\n* anon public (Public Anon Key):<\/strong> Bu anahtar, istemci taraf\u0131nda g\u00fcvenle kullan\u0131labilir. Kullan\u0131c\u0131 kimlik do\u011frulamas\u0131 gerektirmeyen veya genel olarak eri\u015filebilir veriler i\u00e7in kullan\u0131l\u0131r. Kullan\u0131c\u0131 oturum a\u00e7t\u0131\u011f\u0131nda, bu anahtar kullan\u0131larak yap\u0131lan istekler kullan\u0131c\u0131n\u0131n kimli\u011fiyle ili\u015fkilendirilir.<\/p>\n

service_role<\/code> anahtar\u0131 ise yaln\u0131zca sunucu taraf\u0131nda kullan\u0131lmas\u0131 gereken, y\u00fcksek ayr\u0131cal\u0131kl\u0131 bir anahtard\u0131r. Asla istemci taraf\u0131nda (SolidJS uygulaman\u0131zda) kullanmamal\u0131s\u0131n\u0131z.<\/p>\n

Kimlik Do\u011frulama Sa\u011flay\u0131c\u0131lar\u0131n\u0131 Yap\u0131land\u0131rma<\/h4>\n

Supabase, e-posta\/\u015fifre tabanl\u0131 kimlik do\u011frulaman\u0131n yan\u0131 s\u0131ra bir\u00e7ok sosyal medya ve OAuth sa\u011flay\u0131c\u0131s\u0131n\u0131 da destekler. Kimlik do\u011frulama ayarlar\u0131n\u0131 yap\u0131land\u0131rmak i\u00e7in Supabase kontrol panelinizdeki “Authentication” (Kimlik Do\u011frulama) b\u00f6l\u00fcm\u00fcne ve ard\u0131ndan “Providers” (Sa\u011flay\u0131c\u0131lar) sekmesine gidin.<\/p>\n

Varsay\u0131lan olarak, e-posta\/\u015fifre tabanl\u0131 kimlik do\u011frulama etkindir. E\u011fer kullan\u0131c\u0131lar\u0131n\u0131z\u0131n e-posta onay\u0131 yapmas\u0131n\u0131 istiyorsan\u0131z, “Email” sa\u011flay\u0131c\u0131s\u0131n\u0131n ayarlar\u0131ndan “Confirm email” se\u00e7ene\u011fini etkinle\u015ftirebilirsiniz. Bu, kullan\u0131c\u0131lar kaydolduktan sonra e-posta adreslerini do\u011frulamalar\u0131n\u0131 gerektirir.<\/p>\n

Sosyal medya ile giri\u015f yapmak istiyorsan\u0131z (\u00f6rn. Google, GitHub), ilgili sa\u011flay\u0131c\u0131y\u0131 etkinle\u015ftirip gerekli API anahtarlar\u0131n\u0131 ve geri arama (callback) URL’lerini yap\u0131land\u0131rman\u0131z gerekir. Bu i\u015flem, genellikle ilgili sa\u011flay\u0131c\u0131n\u0131n geli\u015ftirici konsolundan bir uygulama olu\u015fturmay\u0131 ve Supabase’e Client ID ile Client Secret’\u0131 sa\u011flamay\u0131 i\u00e7erir.<\/p>\n

SolidJS Uygulamas\u0131 Olu\u015fturma ve Supabase Entegrasyonu<\/h3>\n

Supabase projemizi haz\u0131rlad\u0131\u011f\u0131m\u0131za g\u00f6re, \u015fimdi SolidJS uygulamam\u0131z\u0131 olu\u015ftural\u0131m ve Supabase istemcisini entegre edelim.<\/p>\n

Yeni SolidJS Uygulamas\u0131 Olu\u015fturma<\/h4>\n

Vite kullanarak h\u0131zl\u0131ca yeni bir SolidJS projesi olu\u015fturabiliriz. Terminalinizde a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n

npm create vite@latest my-solid-auth-app -- --template solid\ncd my-solid-auth-app\nnpm install<\/code><\/pre>\n
Bu komut, my-solid-auth-app<\/code> ad\u0131nda yeni bir SolidJS projesi olu\u015fturacak ve gerekli ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fckleyecektir.<\/p>\n
Gerekli Paketleri Y\u00fckleme<\/h4>\n
Supabase ile etkile\u015fim kurmak i\u00e7in @supabase\/supabase-js<\/code> paketini y\u00fcklememiz gerekiyor:<\/p>\n
npm install @supabase\/supabase-js<\/code><\/pre>\n
Supabase \u0130stemcisini Yap\u0131land\u0131rma<\/h4>\n
Uygulamam\u0131z\u0131n herhangi bir yerinden Supabase’e kolayca eri\u015febilmek i\u00e7in Supabase istemcisini merkezi bir yerde ba\u015flatmal\u0131 ve yap\u0131land\u0131rmal\u0131y\u0131z. Genellikle bu i\u015flem, projenizin k\u00f6k dizininde veya bir src\/lib<\/code> klas\u00f6r\u00fc i\u00e7inde supabaseClient.js<\/code> veya supabase.js<\/code> gibi bir dosyada yap\u0131l\u0131r.<\/p>\n
Supabase API anahtarlar\u0131m\u0131z\u0131 do\u011frudan kod i\u00e7ine yazmak yerine, g\u00fcvenlik amac\u0131yla ortam de\u011fi\u015fkenleri (environment variables) kullanmak en iyi y\u00f6ntemdir. Bunun i\u00e7in projenizin k\u00f6k dizininde .env<\/code> ad\u0131nda bir dosya olu\u015fturun ve Supabase URL’nizi ve anon public anahtar\u0131n\u0131z\u0131 buraya ekleyin:<\/p>\n
VITE_SUPABASE_URL=\"https:\/\/your-project-ref.supabase.co\"\nVITE_SUPABASE_ANON_KEY=\"your-anon-public-key\"<\/code><\/pre>\n
Vite, ortam de\u011fi\u015fkenlerini VITE_<\/code> \u00f6nekiyle ba\u015flayan de\u011fi\u015fkenler olarak otomatik olarak y\u00fckler ve istemci taraf\u0131nda eri\u015filebilir hale getirir. \u015eimdi, src\/supabaseClient.js<\/code> (veya benzeri) dosyas\u0131n\u0131 olu\u015ftural\u0131m:<\/p>\n
import { createClient } from '@supabase\/supabase-js';\n\nconst supabaseUrl = import.meta.env.VITE_SUPABASE_URL;\nconst supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;\n\nexport const supabase = createClient(supabaseUrl, supabaseAnonKey);<\/code><\/pre>\n
Art\u0131k supabase<\/code> nesnesini uygulaman\u0131z\u0131n herhangi bir yerinde i\u00e7e aktararak Supabase API’sine eri\u015febilirsiniz.<\/p>\n
Temel Kimlik Do\u011frulama Ak\u0131\u015f\u0131<\/h3>\n
\u015eimdi s\u0131ra geldi kullan\u0131c\u0131lar\u0131n uygulamam\u0131zda kay\u0131t olmas\u0131na, giri\u015f yapmas\u0131na ve \u00e7\u0131k\u0131\u015f yapmas\u0131na olanak tan\u0131yan temel kimlik do\u011frulama ak\u0131\u015flar\u0131n\u0131 uygulamaya.<\/p>\n
Kay\u0131t Olma (Sign Up)<\/h4>\n
Kullan\u0131c\u0131lar\u0131n e-posta ve \u015fifre ile kaydolmas\u0131n\u0131 sa\u011flamak i\u00e7in bir kay\u0131t formu olu\u015ftural\u0131m.<\/p>\n
\/\/ src\/components\/Auth.jsx\nimport { createSignal } from 'solid-js';\nimport { supabase } from '..\/supabaseClient';\n\nfunction Auth() {\n  const [loading, setLoading] = createSignal(false);\n  const [email, setEmail] = createSignal('');\n  const [password, setPassword] = createSignal('');\n  const [message, setMessage] = createSignal('');\n\n  const handleSignUp = async (e) => {\n    e.preventDefault();\n    setLoading(true);\n    setMessage('');\n\n    try {\n      const { error } = await supabase.auth.signUp({\n        email: email(),\n        password: password(),\n      });\n\n      if (error) throw error;\n      setMessage('Kay\u0131t ba\u015far\u0131l\u0131! L\u00fctfen e-postan\u0131z\u0131 kontrol edin ve onaylay\u0131n.');\n    } catch (error) {\n      setMessage(Hata: ${error.message}<\/code>);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    
\n      
Kay\u0131t Ol<\/h2>\n      
\n        
\n