{"id":9001,"date":"2025-01-08T18:00:14","date_gmt":"2025-01-08T15:00:14","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/next-jsde-supabase-auth-ile-github-oauth-entegrasyonu-github-ile-giris-yapin\/"},"modified":"2025-01-08T18:00:14","modified_gmt":"2025-01-08T15:00:14","slug":"next-jsde-supabase-auth-ile-github-oauth-entegrasyonu-github-ile-giris-yapin","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/next-jsde-supabase-auth-ile-github-oauth-entegrasyonu-github-ile-giris-yapin\/","title":{"rendered":"Next.js’de Supabase Auth ile GitHub OAuth Entegrasyonu: GitHub ile Giri\u015f Yap\u0131n"},"content":{"rendered":"

<\/p>\n

Next.js’de Supabase Auth ile GitHub OAuth Entegrasyonu: GitHub ile Giri\u015f Yap\u0131n<\/p>\n

Merhaba! Bu makalede, Next.js uygulaman\u0131zda Supabase Auth kullanarak GitHub OAuth entegrasyonunu nas\u0131l kolayca kurabilece\u011finizi ad\u0131m ad\u0131m anlataca\u011f\u0131m. Bu sayede kullan\u0131c\u0131lar\u0131n\u0131z, g\u00fcvenli ve sorunsuz bir \u015fekilde GitHub hesaplar\u0131yla uygulaman\u0131za giri\u015f yapabilecekler. \u00d6ncelikle, gerekli paketleri kurarak ba\u015flayal\u0131m. Ard\u0131ndan, Supabase projenizi ayarlayaca\u011f\u0131z ve entegrasyonu ger\u00e7ekle\u015ftirece\u011fiz. Haz\u0131rsan\u0131z, ba\u015flayal\u0131m!<\/p>\n

Gerekli Paketlerin Kurulumu<\/h2>\n

\u00d6ncelikle, projenize gerekli paketleri npm veya yarn kullanarak kurman\u0131z gerekmektedir. Bu paketler, GitHub OAuth entegrasyonunu sa\u011flamak i\u00e7in olmazsa olmazd\u0131r. \u0130\u015fte kurman\u0131z gereken paketler:<\/p>\n

\nnpm install @supabase\/supabase-js next-auth\n<\/code><\/pre>\n
Bu ad\u0131mdan sonra, Supabase projenizi haz\u0131rlaman\u0131z gerekiyor.  Supabase hesab\u0131n\u0131z yoksa, Supabase<\/a> sitesinden \u00fccretsiz bir hesap olu\u015fturabilirsiniz.<\/p>\n
Supabase Projesinin Ayarlanmas\u0131<\/h2>\n
Supabase projenizi olu\u015fturduktan sonra,  “Authentication” sekmesine gidin ve “GitHub” sa\u011flay\u0131c\u0131s\u0131n\u0131 etkinle\u015ftirin.  GitHub uygulamas\u0131 olu\u015fturman\u0131z ve gerekli kimlik bilgilerini Supabase’e eklemeniz gerekecektir.  Bu ad\u0131mlar, GitHub geli\u015ftirici portal\u0131nda detayl\u0131 bir \u015fekilde a\u00e7\u0131klanm\u0131\u015ft\u0131r.  Detayl\u0131 bilgi i\u00e7in GitHub Developer Portal<\/a> adresini ziyaret edebilirsiniz.  Bu a\u015famada dikkat etmeniz gereken en \u00f6nemli \u015fey,  GitHub\u2019tan alaca\u011f\u0131n\u0131z Client ID ve Client Secret bilgilerini do\u011fru bir \u015fekilde Supabase paneline eklemektir. Yanl\u0131\u015f bilgiler, entegrasyonun ba\u015far\u0131s\u0131z olmas\u0131na neden olabilir.<\/p>\n
Next.js Uygulaman\u0131zda Entegrasyon<\/h2>\n
\u015eimdi, Next.js uygulaman\u0131zda Supabase Auth’u kullanarak GitHub OAuth entegrasyonunu olu\u015ftural\u0131m.  \u00d6ncelikle, Supabase istemcisini olu\u015fturman\u0131z gerekir.  Sonras\u0131nda,  signIn fonksiyonunu kullanarak GitHub ile giri\u015f i\u015flemini ba\u015flatabilirsiniz.<\/p>\n
\nimport { createClient } from '@supabase\/supabase-js'\n\nconst supabase = createClient(\n  'YOUR_SUPABASE_URL',\n  'YOUR_SUPABASE_ANON_KEY'\n)\n\nconst signInWithGithub = async () => {\n  try {\n    const { error } = await supabase.auth.signInWithOAuth({\n      provider: 'github',\n    })\n    if (error) throw error\n    \/\/ Giri\u015f ba\u015far\u0131l\u0131\n  } catch (error) {\n    console.error('Giri\u015f ba\u015far\u0131s\u0131z:', error)\n  }\n}\n<\/code><\/pre>\n
Bu kod blo\u011funda, YOUR_SUPABASE_URL ve YOUR_SUPABASE_ANON_KEY de\u011ferlerini kendi Supabase projenizdeki bilgilerle de\u011fi\u015ftirmeniz \u00f6nemlidir. Bu kod par\u00e7as\u0131n\u0131, GitHub giri\u015f butonunu olu\u015fturdu\u011funuz bile\u015fenin i\u00e7ine yerle\u015ftirebilirsiniz.  \u00d6rne\u011fin, bir butona t\u0131kland\u0131\u011f\u0131nda bu fonksiyonu \u00e7al\u0131\u015ft\u0131rabilirsiniz.   Bu, kullan\u0131c\u0131n\u0131n GitHub hesab\u0131yla giri\u015f yapmas\u0131n\u0131 sa\u011flayacakt\u0131r.<\/p>\n
Son olarak,  kullan\u0131c\u0131n\u0131n giri\u015f durumunu kontrol etmeniz ve  uygulaman\u0131n farkl\u0131 b\u00f6l\u00fcmlerine eri\u015fimini bu duruma g\u00f6re ayarlaman\u0131z gerekmektedir. Bu,  oturum a\u00e7m\u0131\u015f kullan\u0131c\u0131lar\u0131n \u00f6zel i\u00e7eri\u011fe eri\u015fimini sa\u011flarken,  oturum a\u00e7mam\u0131\u015f kullan\u0131c\u0131lar\u0131n giri\u015f yapmalar\u0131n\u0131 gerektirecek \u015fekilde uygulaman\u0131z\u0131 yap\u0131land\u0131rman\u0131z\u0131 sa\u011flar.<\/p>\n
Ek Kaynaklar ve \u0130pu\u00e7lar\u0131<\/h2>\n
Bu makalede,  temel GitHub OAuth entegrasyonunu ele ald\u0131k. Daha geli\u015fmi\u015f \u00f6zelliklere ihtiyac\u0131n\u0131z varsa, Supabase ve Next.js dok\u00fcmantasyonlar\u0131n\u0131 inceleyebilirsiniz. Ayr\u0131ca, kendi deneyimlerime ve ara\u015ft\u0131rmalar\u0131ma dayanarak a\u015fa\u011f\u0131daki ipu\u00e7lar\u0131n\u0131 payla\u015fmak istiyorum:<\/p>\n