Next.js App Router’da Auth.js ile Kullan\u0131c\u0131 Kimlik Do\u011frulamas\u0131<\/p>\n
Next.js, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in pop\u00fcler bir \u00e7er\u00e7evedir. App Router ile birlikte, sunucu taraf\u0131nda i\u015fleme, statik ve dinamik i\u00e7erik olu\u015fturma gibi bir\u00e7ok avantaj sunar. Kullan\u0131c\u0131 kimlik do\u011frulamas\u0131, web uygulamalar\u0131 i\u00e7in olmazsa olmaz bir unsurdur. Auth.js, Next.js uygulamalar\u0131n\u0131zda kullan\u0131c\u0131 kimlik do\u011frulamas\u0131 i\u00e7in kullanabilece\u011finiz g\u00fc\u00e7l\u00fc bir k\u00fct\u00fcphanedir.<\/p>\n
Auth.js, Next.js uygulamalar\u0131nda kullan\u0131c\u0131 kimlik do\u011frulamas\u0131 i\u00e7in kullanabilece\u011finiz bir k\u00fct\u00fcphanedir. Bu k\u00fct\u00fcphane, kullan\u0131c\u0131lar\u0131n giri\u015f yapmas\u0131n\u0131, kaydolmas\u0131n\u0131, oturumlar\u0131n\u0131 kapatmas\u0131n\u0131 ve hesaplar\u0131n\u0131 y\u00f6netmesini sa\u011flayan bir dizi \u00f6zellik sunar. Auth.js, Google, Facebook, Twitter, GitHub gibi pop\u00fcler sosyal medya platformlar\u0131n\u0131 kullanarak veya kendi \u00f6zel kimlik do\u011frulama sisteminizi kullanarak oturum a\u00e7ma olana\u011f\u0131 sa\u011flar.<\/p>\n
Auth.js’yi Next.js projenize kurmak i\u00e7in a\u015fa\u011f\u0131daki komutu kullanabilirsiniz:<\/p>\n
“`bash
\nnpm install next-auth
\n“`<\/p>\n
Auth.js’yi projenize kurduktan sonra, “`javascript export default NextAuth({ Bu kod par\u00e7as\u0131, Google ile kimlik do\u011frulama i\u00e7in gerekli yap\u0131land\u0131rmalar\u0131 i\u00e7erir. Kullan\u0131c\u0131lar\u0131n giri\u015f yapmas\u0131n\u0131 ve kaydolmas\u0131n\u0131 sa\u011flamak i\u00e7in Auth.js’nin sundu\u011fu Auth.js, kullan\u0131c\u0131lar\u0131n oturum a\u00e7\u0131p a\u00e7\u0131lmad\u0131\u011f\u0131n\u0131 takip eden bir “`javascript const MyComponent = () => { if (session) { Ho\u015f geldiniz, {session.user.email}!<\/p>\n ; L\u00fctfen giri\u015f yap\u0131n veya kaydolun.<\/p>\n ; Kullan\u0131c\u0131lar\u0131n oturumlar\u0131n\u0131 kapatmas\u0131n\u0131 sa\u011flamak i\u00e7in “`javascript const MyComponent = () => { return app\/api\/auth\/[...nextauth].js<\/code> dosyas\u0131n\u0131 olu\u015fturman\u0131z ve a\u015fa\u011f\u0131daki kodu eklemeniz gerekir:<\/p>\n
\nimport NextAuth from ‘next-auth’;
\nimport GoogleProvider from ‘next-auth\/providers\/google’;<\/p>\n
\n providers: [
\n GoogleProvider({
\n clientId: process.env.GOOGLE_CLIENT_ID,
\n clientSecret: process.env.GOOGLE_CLIENT_SECRET,
\n }),
\n ],
\n});
\n“`<\/p>\nGOOGLE_CLIENT_ID<\/code> ve GOOGLE_CLIENT_SECRET<\/code> de\u011fi\u015fkenlerini Google Cloud Console’dan ald\u0131\u011f\u0131n\u0131z API kimlik bilgilerinizle de\u011fi\u015ftirin.<\/p>\nKullan\u0131c\u0131 Giri\u015f ve Kay\u0131t<\/h3>\n
signIn<\/code> ve signUp<\/code> fonksiyonlar\u0131n\u0131 kullanabilirsiniz. Bu fonksiyonlar, kullan\u0131c\u0131lar\u0131n kimlik bilgilerini girdi\u011fi bir giri\u015f\/kay\u0131t formu sa\u011flamak i\u00e7in kullan\u0131l\u0131r. Kullan\u0131c\u0131lar giri\u015f yaparken veya kaydolurken, Auth.js bu bilgileri sizin i\u00e7in y\u00f6netir ve kullan\u0131c\u0131n\u0131n kimlik bilgilerini do\u011frulayarak bir oturum a\u00e7ma oturumu ba\u015flat\u0131r.<\/p>\nOturum A\u00e7ma Durumu<\/h3>\n
session<\/code> nesnesi sa\u011flar. Bu nesne, oturum a\u00e7an kullan\u0131c\u0131n\u0131n e-posta adresi, ad\u0131 ve di\u011fer bilgileri i\u00e7erir. session<\/code> nesnesine eri\u015fmek i\u00e7in useSession<\/code> hook’unu kullanabilirsiniz. useSession<\/code> hook’u, kullan\u0131c\u0131 oturum a\u00e7t\u0131\u011f\u0131nda session<\/code> nesnesini d\u00f6nd\u00fcr\u00fcr ve oturum a\u00e7\u0131lmam\u0131\u015fsa null<\/code> d\u00f6nd\u00fcr\u00fcr.<\/p>\n
\nimport { useSession } from ‘next-auth\/react’;<\/p>\n
\n const { data: session } = useSession();<\/p>\n
\n return <\/p>\n
\n } else {
\n return <\/p>\n
\n }
\n};
\n“`<\/p>\nKullan\u0131c\u0131 Oturumunu Kapatma<\/h3>\n
signOut<\/code> fonksiyonunu kullanabilirsiniz. Bu fonksiyon, mevcut oturum a\u00e7ma oturumunu sonland\u0131r\u0131r ve kullan\u0131c\u0131n\u0131n oturumunu kapat\u0131r.<\/p>\n
\nimport { signOut } from ‘next-auth\/react’;<\/p>\n
\n const handleLogout = () => {
\n signOut();
\n };<\/p>\n