Videoyu uzatmamak adına token’ın clientta üretildiğini düşünüyorum. Token’ı üreten serverside olmalı ve her requestte bu token gönderilmeli. Kişinin verify bir token’a sahip olup olmadığını backend kontrol etmeli. Aksi durumda Developer dashboard kullanmasını bilen herkes secret key’e ulaşabilir.
Bir rivayete göre Mehmet Pekcan, juniour'ların bilgisayarına Pegasus yazılımı ile sızmış ve her karşılaştıkları zorlukları not edip videosunu yayınlıyormuş!
next v13 experimental app versiyonunda multilang videosu çekebilirmisin hocam. Bu aralar internette çok aratılıyor benimde ihtiyacım olmuştu. Kolay gelsin hocam harikasın
Selamlar, multilang/i18n konusuna batım bayağı fakat henüz 100% support eden bir paket yok. Next.js'in kendi dökümanında bir yöntem var fakat gereksiz uzatıyor akışları. Şu an için biraz beklemedeyim. Daha solid bir çözüm bulduğumda videolaştıracağım
Merhabalar nasılsınız Next.js 13 videonuzu gördüm çok güzel olmuş mümkünse Nuxt.js 3 biliyorsanız bununla ilgili video eğitimi de yapar mısınız teşekkürler
Elimde .netten yazdığım backendde bana jtw ve user döndüren bir servis var, bunu nextAuth kullanarak ön yüzde nasıl handle ederim? Rol sistemini backendde ayarladım.
Çok başarılı bir video daha. Emeğinize sağlık, teşekkür ederim. Bir sorum var. Authentication işlemlerini NextAuth ile mi yapmak daha iyi yoksa sizin gösterdiğiniz şekilde mi?
Bu çözüm biraz daha kendi backend'i olan ve büyük projeler için granül seviye de kontrole sahip olmak isteyen takımlar için geçerli. Onun dışında next-auth daha makul olacaktır.
Hocam selamlar, TH-cam'daki en detaylı next js 13 eğitimi sizinki.Next js 14 versiyonuyla bazı değişiklikler olmuş acaba onun da eğitim videoları gelir mi? :)
arkadaslar burda useAuth() sadece sayfa refresh durumunda kontrol edıyor bır logout ıslemı sonrasında o method aktıf olmayacagından dolayı bır guncellenmede olmuyor authda nasıl bu durumu cozdunuz
hocam teşekkürler. bir sorum var size, backend'i laravel ve token için 24 saat süre verilmiş. biz frontend tarafında bir daha süre vermezsek de işler mi, yoksa 24 saat olarak burada da vermek gerekiyor mu?
@@pekcanmehmet Hocam Sizin websitenizdeki nextjs i ile multilanguage yapimi prjenizi yapmaya calsdm ama olmadi. Birtane real proje yaparmisiniz 3 4 tane dil olan Lutfennn
Hocam rol ü jwt ile almak ne kadar doğru? Yani databaseden user bilgilierini alırken rol diye bir key eklesek ve direk databaseden alsak daha doğru bir yaklaşım değil mi
Genel olarak bu tarz bir dezavantaj ile karşılaşmadım şu ana kadar production grade'inde ve projeler AWS'de deploy oluyordu. Fakat illa ki çok edge senaryolarda haklı olabilirsin
Anlamadığım şekilde bir problem ile karşı karşıyayım , Mesela Jwt token backend tarafında oluşturulup yollandığı bir senaryoda (session'a kaydedilmeden) jwtverify fonksiyonu çalışmıyor daha önce böyle bir durumla karşılaştınız mı acaba. ?
Bu anlattığım akışla bu tarz bir problemin olmaması gerekiyor. Bir şekilde Verify function'ını conditional bağlamış olabilir misiniz? Kod var mı örnek?
Merhaba Hocam . Ben JS ile scraping yapan bot yapiyorum amma sitedeki bazi veriler [protected content] seklinde geliyor cheerio ve request kullaniyorum selenium ve puppeteer kullanmamanin sebebi 7/24 server calisacak selenium ve puppeteer sorun cikartiyor ne yapa bilirim
Token'in login işleminden sonra backendden elimize ulaştığı senaryoda JWT verify işlemini nasıl yapmamız gerekiyor? JWT backendde oluştuğu ve secret key orada tutulduğu için frontend tarafında onun doğruluğunu kontrol edemem sanırım. O yüzden nasıl ilerlemek gerekir?
Secret backend'de tutuluyorsa her istekte token'ı backend yollayıp o verification'ı backend'in yapması daha sağlıklı. Yani bu durumda direkt aslında backend oriented bir auth akışı olucaktır bu durumda. Bir diğer türlü şu olabilir; Redis tarzı bir cache ile her verification ihtiyacı olduğunda backend'e istek atılıp secret alınır ve kontroller yapılır aynı videoda ki akış gibi.
@@pekcanmehmet videodaki gibi bir middleware yazdım orada sadece verifyToken fonksiyonunda jwt çözmek yerine GET user endpointine headers içerisinden tokenimi gönderiyorum. Backend arka tarafta zaten onun kontrolünü yapıp bana 200 veya 401 döndürüyor. Fakat nedenini anlayamadığım bir şekilde ne yaparsam yapayım sürekli fonksiyondan catch'e girip bana null atıyor. Middleware içerisinden axios ile istek atılamıyor mu?
@@pekcanmehmet Arkadaşın bahsettiği senaryoda axios ile değil de fetch ile token gönderip gelen yanıta göre auth kontrol yapılabilir mi? yoksa illaki bu kontrol backend'de mi yapılmalı? video için çok teşekkürler
@@elifrumeysa Tabii ki de yapılabilir. JWT sadece frontend oriented bir auth yapısı sunuyor bize. Fakat birde her istek ile birlikte backend'e o token'ı yollatıp verify ettirmek kesinlikle çok büyük bir best practice. Çoğu firma bu şekilde ilerler.
Hızlı aksiyon alınacak projelerde veya indie projelerde `next-auth` kesinlikle çok mantıklı fakat büyük ekipli projelerde; bu süreci end-to-end ekibin yönetmesi bence daha doğru bir seçim olur. `next-auth` çok fazla kolda yeteneklere sahip olduğu için çok generic seviyede çözüm sunuyor buda gereksiz yük ve abstraction'a maruz bırakabiliyor. Bu sebepten dolayı büyük takımların auth akışlarını kendilerinin yönetmesini daha doğru buluyorum -- buda tabii paralelinde auth akışlarının yükünü ekibe yüklemiş oluyor ama bug genelde uzun solukta ekibin karına oluyor.
Layout seviyesinde Auth bilgilerini alıp istediğiniz koşula göre gizleyeceksiniz. Videonun sonunda Auth bilgilerini hem server da hem client'ta nasıl alabilirizi gösterdim o yol ile yapılabilir.
işlem autha göre yapılmıycak hocam . Tam anlatamadım şöyle söyliyim layout sayfasında pathname i alıp eğer pathname de login ya da register varsa headerı gösterme şeklinde bir şart yazıcam fakat layout sayfasında pathname e ulaşamadım
@@enesdemirci7963 Nested layout yapısından kaynaklı genel olarak layout'larda pathname erişimi yok. Bir kaç çözüm önerim var. Birincisi bir client component yazıp içerisinde usePathname tarzı bir hook ile istediğin veriyi bir server component'e pass etmen. Bu sayede istediğin çıktıyı alabilirsin. Ya da her şey server seviyesinde olsun istiyorsan. Routing akışında /auth/* page'lerinin olduğu layout ile normal public layout'u ayırıp direkt condition vs. olmadan direkt istediklerini render edebilirsin.
@@enesdemirci7963 Bir başka çözüm olarak middleware içerisinde pathname header'i set edip, server component'te headers util'ini kullanıp okuyabilirsin. En garantisi bu görünüyor
@@pekcanmehmet bu yöntemi kullandım çalıştı hocam. Bir sorum daha olucak bu header' i set etme işlemini middleware sayfasında yaptım auth işleminide aynı middleware sayfasında mı yapıcam yoksa 2. bi middleware sayfası kullanabiliyor muyuz .
thanks very very
Senin gibi akıcı seri ve profesyonel anlatan yok Mehmet hocam. React eğitimi çeksen tarih yazarsın geri dön..
jwt konusunda izlediğim en iyi video diyebilirim. next-auth kullanıyordum. jwt ye dönmek daha rahat olacak. sanırım. emeğinize sağlık.
Hızlı akıcı ve anlaşılır bence mükemmel içerik sağol.
Aradığım kanalı buldum❤ ağzınıza emeğinize sağlık hocam çok iyi video olmuş.
Teşekkürler, şu an kısa bir iş seyahatine geldim. Çok yakında yeni videolar gelmeye devam edicek 💫
Çok iyi video olmuş, ufak detayları da anlatman daha da güzel
bu kadar kıymetli bir dersi neden az kişi dinledi. ?
jwt ile ilgili onemli konulari iyi bir shekilde anlatan bir video olmush. teshekkurler abi, ellerine saghlik
süpersin Bilen adamı bile dinletiyosun. Çok güzel bilgiler veriyorsun eline emeğine saglık 👍
Şimdiden yerimizi alalım gece izleriz🙌🏻 Elinize sağlık.
İyi seyirler şimdiden 💫
Videoyu uzatmamak adına token’ın clientta üretildiğini düşünüyorum. Token’ı üreten serverside olmalı ve her requestte bu token gönderilmeli. Kişinin verify bir token’a sahip olup olmadığını backend kontrol etmeli. Aksi durumda Developer dashboard kullanmasını bilen herkes secret key’e ulaşabilir.
Hocam cok iyi anlatmıssınız cok tesekkur ederiz
Çok güzel anlatım 👏 Teşekkürler!
Harika bir içerik daha geldi. Ellerine sağlık hocam. 👏🏻
Teşekkürler, iyi çalışmalar 🙏🏼
örnek junior front-end mülakat videosu gelse çok iyi olur bu tarz içerikler pek yapılmıyor
Listeme ekledim fırsat bulursam bunuda çekeceğim birisiyle :)
Müthiş bir içerik yine, süpersin hocam🚀
Teşekkürler 🙏🏼
çok güzel video olmuş. Redux toolkit eğitimi de gelse çok iyi olur
En yakın listemde o var. Gelicek :)
elinize emeğinize sağlık yine harika güncel içerikler 💪
Teşekkür ederim 🙏🏼
Ağzınıza yüreğinize sağlık hocam sağolun var olun
Haaarika teşekkürler
Ellerine yüreğine sağlık hocam 🤩
Teşekkürler 🙏🏼
Hocam ne kadar teşekkür etsek az gerçekten
Teşekkür ederim ne demek 🙏🏼
Bir rivayete göre Mehmet Pekcan, juniour'ların bilgisayarına Pegasus yazılımı ile sızmış ve her karşılaştıkları zorlukları not edip videosunu yayınlıyormuş!
Ahaha elimden geldiğince 🙏🏼
Yine harika bir video :)
Teşekkürlerr 🙏🏼
Çok güzel video hocam❤
Teşekkürler, eksik olma 🙏🏼
Harikasınız hocam
Teşekkürler 💫
@@pekcanmehmet superpeere hesabınız kapalımı hocam
@@cuneytdonmez214 Hayıır, aktif kullanıyorum
@@pekcanmehmet bulamadım hocam sizi
ema,l adresiniz verirmisiniz, danışmanlık almak istiyorum sizden
Teşekkürler hocam...
hocam next js 14 dersleri gelse ve fullstack projeler olsa super olurdu
Hocam 22:16'da ki yazdığınız check fonksiyonunu kesinlikle dışarda tutmak gerekiyor dediniz sanırım utils tarzı bir klasörde. Peki bunun sebebi nedir?
next v13 experimental app versiyonunda multilang videosu çekebilirmisin hocam. Bu aralar internette çok aratılıyor benimde ihtiyacım olmuştu. Kolay gelsin hocam harikasın
Selamlar, multilang/i18n konusuna batım bayağı fakat henüz 100% support eden bir paket yok. Next.js'in kendi dökümanında bir yöntem var fakat gereksiz uzatıyor akışları. Şu an için biraz beklemedeyim. Daha solid bir çözüm bulduğumda videolaştıracağım
great tutorial, thanks ❤
Merhabalar nasılsınız Next.js 13 videonuzu gördüm çok güzel olmuş mümkünse Nuxt.js 3 biliyorsanız bununla ilgili video eğitimi de yapar mısınız teşekkürler
Elimde .netten yazdığım backendde bana jtw ve user döndüren bir servis var, bunu nextAuth kullanarak ön yüzde nasıl handle ederim? Rol sistemini backendde ayarladım.
Çok başarılı bir video daha. Emeğinize sağlık, teşekkür ederim.
Bir sorum var.
Authentication işlemlerini NextAuth ile mi yapmak daha iyi yoksa sizin gösterdiğiniz şekilde mi?
Bu çözüm biraz daha kendi backend'i olan ve büyük projeler için granül seviye de kontrole sahip olmak isteyen takımlar için geçerli. Onun dışında next-auth daha makul olacaktır.
chox guzel video olmush eline saglik)
Teşekkürlerr 💫
React kullanarak Wordpress teması oluşturma ile ilgili bir bilgilendirme videosu gelirse çok güzel olur hocam :D
Umarım ileride diyeyim, Wordpress dünyası React'ı kucaklamaya başladı bu yüzden değerli bir alan
Hocam selamlar,
TH-cam'daki en detaylı next js 13 eğitimi sizinki.Next js 14 versiyonuyla bazı değişiklikler olmuş acaba onun da eğitim videoları gelir mi? :)
gelse super olurdu cunki next js i turkiyede ceken yok
arkadaslar burda useAuth() sadece sayfa refresh durumunda kontrol edıyor bır logout ıslemı sonrasında o method aktıf olmayacagından dolayı bır guncellenmede olmuyor authda nasıl bu durumu cozdunuz
Hocam selamlar, Next.js 15'i de sizden dinlemeyi çok isterim.
Cookie set etmeme rağmen tarayıcıda göremiyorum sebebi ne olabilir? Aynı sorunla karşılaşan varmı?
Teşekkürler bir sorum olacak imlecin olduğu yerlerde o satırdaki kodun, sanırım ne zaman yazıldığı görülüyor bu hangi extension
hocam teşekkürler. bir sorum var size, backend'i laravel ve token için 24 saat süre verilmiş. biz frontend tarafında bir daha süre vermezsek de işler mi, yoksa 24 saat olarak burada da vermek gerekiyor mu?
Hocam Next js Typescript Ve Redux kullanarak bir tane proje yaparsaniz Mutesekkil kaliriz Saygilar
Next.js ve Redux videosu kanalımda mevcut -- TypeScript kısmında Next.js'e özel çok bir şey yok o yüzden onu videolarıma dahil etmiyorum şu an için
@@pekcanmehmet Hocam Sizin websitenizdeki nextjs i ile multilanguage yapimi prjenizi yapmaya calsdm ama olmadi. Birtane real proje yaparmisiniz 3 4 tane dil olan Lutfennn
Next.js 15 çıkıyor, yeni seri gelir mi?
💯
Devamı Refresh Token ile gelmeli.
O kısma ithafen ufak bir aktarım yaptım çok uzatmamak adına ama onuda ele aldığım bir video çekeceğim ileride 💫
@@pekcanmehmet bu video geldi mi?
Ustad v12 de bu işlemler için bir kaynak var mı acaba
Hocam rol ü jwt ile almak ne kadar doğru? Yani databaseden user bilgilierini alırken rol diye bir key eklesek ve direk databaseden alsak daha doğru bir yaklaşım değil mi
🎉
Eline ağzına sağlık hocam.
Gelir mi bi react native eğitimi?
Teşekkürler :) Maalesef, belki çok ileride
videonun sonunda JWT Secret Key i neden client a açık ettiniz, bana çok yanlış geldi.
Bunun doğru olmadığını, sadece bize göstermek için yaptığını söyledi. Altını çizerekte API Kullanın dedi.
Nextjs 'in en büyük handikapı gelen güzel özelliklerini sadece Vercel üzerinden veriyor olması galiba. Bu konuda sen ne düşünüyorsun?
Genel olarak bu tarz bir dezavantaj ile karşılaşmadım şu ana kadar production grade'inde ve projeler AWS'de deploy oluyordu. Fakat illa ki çok edge senaryolarda haklı olabilirsin
Anlamadığım şekilde bir problem ile karşı karşıyayım ,
Mesela Jwt token backend tarafında oluşturulup yollandığı bir senaryoda (session'a kaydedilmeden) jwtverify fonksiyonu çalışmıyor daha önce böyle bir durumla karşılaştınız mı acaba. ?
Bu anlattığım akışla bu tarz bir problemin olmaması gerekiyor. Bir şekilde Verify function'ını conditional bağlamış olabilir misiniz? Kod var mı örnek?
middleware video linkini paylaşır mısınız
Merhaba Hocam . Ben JS ile scraping yapan bot yapiyorum amma sitedeki bazi veriler [protected content] seklinde geliyor cheerio ve request kullaniyorum selenium ve puppeteer kullanmamanin sebebi 7/24 server calisacak selenium ve puppeteer sorun cikartiyor ne yapa bilirim
Maalesef, emin değilim. Üstüne çalışmak gerek
@@pekcanmehmet Yinede Tesekkur ederim hocam
App dir, prisma ve nextauth kullanarak bir eğitim gelecek mi? Teşekkürler
- next-auth
- Prisma, Supabase
şeklinde iki farklı proje gelicek
Arkadaslar bu kullanilan browserin adini bilen var mi ya da eklenti mi ?
Token'in login işleminden sonra backendden elimize ulaştığı senaryoda JWT verify işlemini nasıl yapmamız gerekiyor? JWT backendde oluştuğu ve secret key orada tutulduğu için frontend tarafında onun doğruluğunu kontrol edemem sanırım. O yüzden nasıl ilerlemek gerekir?
Secret backend'de tutuluyorsa her istekte token'ı backend yollayıp o verification'ı backend'in yapması daha sağlıklı. Yani bu durumda direkt aslında backend oriented bir auth akışı olucaktır bu durumda.
Bir diğer türlü şu olabilir; Redis tarzı bir cache ile her verification ihtiyacı olduğunda backend'e istek atılıp secret alınır ve kontroller yapılır aynı videoda ki akış gibi.
@@pekcanmehmet videodaki gibi bir middleware yazdım orada sadece verifyToken fonksiyonunda jwt çözmek yerine GET user endpointine headers içerisinden tokenimi gönderiyorum. Backend arka tarafta zaten onun kontrolünü yapıp bana 200 veya 401 döndürüyor. Fakat nedenini anlayamadığım bir şekilde ne yaparsam yapayım sürekli fonksiyondan catch'e girip bana null atıyor. Middleware içerisinden axios ile istek atılamıyor mu?
@@berkinoktay Request atabilirsin fakat middleware edge server'da çalıştığı için Axios kullanamazsın.
@@pekcanmehmet Arkadaşın bahsettiği senaryoda axios ile değil de fetch ile token gönderip gelen yanıta göre auth kontrol yapılabilir mi? yoksa illaki bu kontrol backend'de mi yapılmalı? video için çok teşekkürler
@@elifrumeysa Tabii ki de yapılabilir. JWT sadece frontend oriented bir auth yapısı sunuyor bize. Fakat birde her istek ile birlikte backend'e o token'ı yollatıp verify ettirmek kesinlikle çok büyük bir best practice. Çoğu firma bu şekilde ilerler.
Hocam büyük projelerde next auth gibi paketlerin kullanımını önerir misiniz?
Hızlı aksiyon alınacak projelerde veya indie projelerde `next-auth` kesinlikle çok mantıklı fakat büyük ekipli projelerde; bu süreci end-to-end ekibin yönetmesi bence daha doğru bir seçim olur. `next-auth` çok fazla kolda yeteneklere sahip olduğu için çok generic seviyede çözüm sunuyor buda gereksiz yük ve abstraction'a maruz bırakabiliyor. Bu sebepten dolayı büyük takımların auth akışlarını kendilerinin yönetmesini daha doğru buluyorum -- buda tabii paralelinde auth akışlarının yükünü ekibe yüklemiş oluyor ama bug genelde uzun solukta ekibin karına oluyor.
Hocam spotify clone yapiyorum nextjs ile bu header sidebar componentlerini login sayfasinda gozukmesin istiyorum nasil yapabilirim
Layout seviyesinde Auth bilgilerini alıp istediğiniz koşula göre gizleyeceksiniz. Videonun sonunda Auth bilgilerini hem server da hem client'ta nasıl alabilirizi gösterdim o yol ile yapılabilir.
işlem autha göre yapılmıycak hocam . Tam anlatamadım şöyle söyliyim layout sayfasında pathname i alıp eğer pathname de login ya da register varsa headerı gösterme şeklinde bir şart yazıcam fakat layout sayfasında pathname e ulaşamadım
@@enesdemirci7963 Nested layout yapısından kaynaklı genel olarak layout'larda pathname erişimi yok. Bir kaç çözüm önerim var. Birincisi bir client component yazıp içerisinde usePathname tarzı bir hook ile istediğin veriyi bir server component'e pass etmen. Bu sayede istediğin çıktıyı alabilirsin. Ya da her şey server seviyesinde olsun istiyorsan. Routing akışında /auth/* page'lerinin olduğu layout ile normal public layout'u ayırıp direkt condition vs. olmadan direkt istediklerini render edebilirsin.
@@enesdemirci7963 Bir başka çözüm olarak middleware içerisinde pathname header'i set edip, server component'te headers util'ini kullanıp okuyabilirsin. En garantisi bu görünüyor
@@pekcanmehmet bu yöntemi kullandım çalıştı hocam. Bir sorum daha olucak bu header' i set etme işlemini middleware sayfasında yaptım auth işleminide aynı middleware sayfasında mı yapıcam yoksa 2. bi middleware sayfası kullanabiliyor muyuz .
Hocam temanın adı nedir