@@CoderMediax iya bang tadi saya liat liat ada ternyata gokil makasih bang gampang banget dipahami..btw kalo belajar css dimana ya apa lagi responsive lumayan susah
Saya selalu pusing bagaimana mengcustomize session di next-auth, tapi di video ini membuatnya menjadi lebih sederhana dengan type safety. bang fikri emang terbaik.! Lanjutkan bang!
Great video! I was able to follow some parts even without listening to the explanations since I don't understand the language. However, I encountered several errors related to connecting to Supabase and also with Neon / Vercel. The error is related to middleware not accepting edge computing. Anyway, great tutorial! Thank you!
thanks bgtt bang sangat bermanfaat, kalo udah di deploy gabisa login with google di local server bang? kenapa waktu saya benerin responsive nya akses diblokir ya bang waktu login with google/github
Jika udah di deploy memang gak bisa login dari local, karena kita udah setting di google cloud console. Jika mau bisa di production dan juga bisa di lokal, bikin 2 client id an client secret. satu khusus untuk production, dimana redirectUrl NamaDomain/api/auth/callback/google satu lagi khusus untuk development, dimana redirectUrl localhost:3000/api/auth/callback/google
Saya sudah jelaskan didalam video kenapa. Jika mau coba, silahkan pindahkan kode yang ada di authorize callaback ke middleware dan lihat apa yang terjadi.!
bang coba buat authentication pakai shadcn form soalnya untuk form saya biasa pakai itu di next, jadi untuk validasinya caranya beda, nah itu yang bikin saya gak ngerti hehe
Ini cara paling sederhana untuk validasi, sementara pakai shadcn kita juga perlu pakai react hook form dan kita tidak bisa panggil action langsung dari form, pada akhirnya terpaksa menggunakan onSubmit. Aneh memang ngerti shadcn tapi bingung cara validasi seperti di video ini yang jauh lebih basic.
Jika mau menggunakan express sebagai backend dan next.js di frontend. Berarti auth.js di install di express.js. Perlu di ketahui auth.js untuk express masih versi experimental belum ready untuk production. Menurut saya sangat di sayangkan menggunakan next.js hanya untuk frontend. Ada baiknya bikin fullstack langsung di next.js. Kalau pun kita butuh api untuk di consume di mobile app, next.js punya route handler yang bisa menghandle itu lengkap dengan type safety dan kemampuan cache yang optimal dan support edge runtime. Jika menggunakan express sebagai backend, berarti kita kehilangan kemampuan next.js middleware yang secara default running di edge runtime. edge runtime, cache, revalidated, benar-benar dapat meningkat performa website. sementara express masih mengandalkan node.js runtime. dulu saya juga pikir seperti itu, express di backend dan next.js di frontend sampai akhir saya menyadari itu mubazir dan terlalu banyak kode yang di tulis di backend, belum lagi memikirkan frontend. Paling melelahkan lagi, kita harus memikirkan type safety, dan security di backend karena kita cross-origin request. Itulah kenapa saya beralih ke next.js total. Semoga itu menjawab.
Semakin canggih teknologi memang ada harga yang harus dibayar. Jika kita bandingkan dengan VPS hosting banyak juga yang jual diatas 200k / perbulan. Dimana kita harus setup semuanya sendiri. Gak jauh beda di vercel sekitar $20 / perbulan dan kita tidak perlu setup apa2. Dan bahkan gratis sampai data kita mencapai 250mb. Jadi kita hanya perlu bayar saat aplikasi kita berkembang.
Untuk reset password, konsepnya sederhana yaitu "send email". Untuk send email bisa menggunakan layaran seperti Resend. Sejujurnya: Auth.js tidak merekomendasikan kita menggunakan credentials provider karena alasan security dan tidak efisien. Ini masuk akal, karena jika kita login menggunakan email dan password: 1. Kita perlu memastikan apakah email yang di input user benar-benar aktif atau tidak. dan untuk memastikan emailnya aktif, kita perlu send email verifikasi ke user. 2. Kita juga perlu mengirimkan email ke user untuk reset password jika user lupa password. 3. Kita juga perlu meningkatkan security dengan mengirimkan kode OTP ke user via SMS, email, atau WA. Dari 3 point diatas saja, jelas tidak secure dan tidak efisien. Kita perlu bayar layanan tambahan untuk send email dan bayar layanan sms gateway untuk send kode OTP. Itulah kenapa Auth.js lebih merekomendasikan menggunakan oAuth Provider. Jika menggunakan oAuth, kita tidak perlu khawatir emailnya aktif atau tidak (karena sudah pasti aktif), selain itu kita tidak perlu mengirimkan kode OTP karena kode OTP telah di handle oleh perusahaan penyedia oAuth. Akan tetapi, kita sebagai web developer perlu mengetahui bagaimana setup login menggunakan email dan password. Itulah kenapa saya membuat tutorial ini. Tapi, ketika saya mengerjakan project untuk client, saya tidak pernah lagi menggunakan credential provider dan selalu menggunakan oAuth provider (khususnya google) karena dapat meningkatkan user experience dan semua orang telah punya akun google.
Thanks Bang atas video tutorial auth nya bermanfaat
Terima kasih atas super thanks-nya mas.
@@CoderMediax bang ada tutorial bikin pagination di nextjs tak hehe
@@kangroasting8933 udah ada ini: ua-cam.com/video/TkbvrCLmnSo/v-deo.html
@@CoderMediax iya bang tadi saya liat liat ada ternyata gokil makasih bang gampang banget dipahami..btw kalo belajar css dimana ya apa lagi responsive lumayan susah
Akhirnya upload juga, setelah CRUD Next JS lalu bisa diterapkan autentikasinya juga.
Many thanks! Sangat membantu
Sumpah kirain ni yt dah ga bakal up lagi bg, keren pembahasannya gampang di mengerti, next bahas custom server nextjs bg
Terimakasih Tutorialnya cukup membantu, dulu gunain tutorial yang jwt auth buat diterapin di prisma.
Saya selalu pusing bagaimana mengcustomize session di next-auth, tapi di video ini membuatnya menjadi lebih sederhana dengan type safety. bang fikri emang terbaik.!
Lanjutkan bang!
Nice upload bang fikri. Walau skrg belum mau masuk ke next, msh stay belajar express, semoga kedepan nya bisa gas materi next❤
Tutorial selanjutnya akan banyak membahas next.js
@@CoderMediax siap bang fikri, semangat terus berkarya
idk what language you speaking but this tutorial help me alot thanks bro
Indonesia
@@CoderMediaxalso do tutorial on drizzle
Great video! I was able to follow some parts even without listening to the explanations since I don't understand the language. However, I encountered several errors related to connecting to Supabase and also with Neon / Vercel. The error is related to middleware not accepting edge computing. Anyway, great tutorial! Thank you!
do you know how to fix it? I'm having trouble running the build code and run start, the session, ui and middleware are not working
makasih mas, next tutorial reporting dong mas, seperti generate to excel
yang ditunggu tunggu terimakasih bang
thanks you for your tutorial boss
Terima kasih tutorial nya bang👋
thanks bgtt bang sangat bermanfaat, kalo udah di deploy gabisa login with google di local server bang? kenapa waktu saya benerin responsive nya akses diblokir ya bang waktu login with google/github
Jika udah di deploy memang gak bisa login dari local, karena kita udah setting di google cloud console.
Jika mau bisa di production dan juga bisa di lokal, bikin 2 client id an client secret.
satu khusus untuk production, dimana redirectUrl NamaDomain/api/auth/callback/google
satu lagi khusus untuk development, dimana redirectUrl localhost:3000/api/auth/callback/google
permisi kak, ini kalau kita mau pengen memberi class active untuk navbar bagaimana ya? soalnya ini kan use server?
kalo frontend nya nextjs backendnya expressjs auth pakai apa bang?
Bisa juga pake auth.js, tapi saat ini auth.js untuk express masih versi experimental.
bang bahas yuga byte dan implementasinya dong
kenapa route managementnya ga di middleware bang?
Saya sudah jelaskan didalam video kenapa.
Jika mau coba, silahkan pindahkan kode yang ada di authorize callaback ke middleware dan lihat apa yang terjadi.!
register pakai email dan register menggunakan google auth, akunnya terdaftar sama atau jadi beda?
jika email yang sama, akan muncul pesan. Account already use by other provider.
bang coba buat authentication pakai shadcn form soalnya untuk form saya biasa pakai itu di next, jadi untuk validasinya caranya beda, nah itu yang bikin saya gak ngerti hehe
Ini cara paling sederhana untuk validasi, sementara pakai shadcn kita juga perlu pakai react hook form dan kita tidak bisa panggil action langsung dari form, pada akhirnya terpaksa menggunakan onSubmit.
Aneh memang ngerti shadcn tapi bingung cara validasi seperti di video ini yang jauh lebih basic.
Tampilan label nya gak muncul border kenapa ya bang? 🙏🏼
bang buat handle token dari backend pake auth.js itu gimana ya?
bang bikin video laravel
bang , saya pake exprees.js dan enxt.js
berarti aunth.js nya di isntall di mana ya
Jika mau menggunakan express sebagai backend dan next.js di frontend.
Berarti auth.js di install di express.js.
Perlu di ketahui auth.js untuk express masih versi experimental belum ready untuk production.
Menurut saya sangat di sayangkan menggunakan next.js hanya untuk frontend.
Ada baiknya bikin fullstack langsung di next.js.
Kalau pun kita butuh api untuk di consume di mobile app, next.js punya route handler yang bisa menghandle itu lengkap dengan type safety dan kemampuan cache yang optimal dan support edge runtime.
Jika menggunakan express sebagai backend, berarti kita kehilangan kemampuan next.js middleware yang secara default running di edge runtime.
edge runtime, cache, revalidated, benar-benar dapat meningkat performa website.
sementara express masih mengandalkan node.js runtime.
dulu saya juga pikir seperti itu, express di backend dan next.js di frontend sampai akhir saya menyadari itu mubazir dan terlalu banyak kode yang di tulis di backend, belum lagi memikirkan frontend.
Paling melelahkan lagi, kita harus memikirkan type safety, dan security di backend karena kita cross-origin request.
Itulah kenapa saya beralih ke next.js total.
Semoga itu menjawab.
Hosting Next js mahal,,, kudu hosting yg support edge runtime 💀
Klo gk ntar fitur kek middleware dll kagak work di app nextjs nya :'
Semakin canggih teknologi memang ada harga yang harus dibayar.
Jika kita bandingkan dengan VPS hosting banyak juga yang jual diatas 200k / perbulan. Dimana kita harus setup semuanya sendiri.
Gak jauh beda di vercel sekitar $20 / perbulan dan kita tidak perlu setup apa2.
Dan bahkan gratis sampai data kita mencapai 250mb.
Jadi kita hanya perlu bayar saat aplikasi kita berkembang.
reset forget password gada kah bg?
Untuk reset password, konsepnya sederhana yaitu "send email". Untuk send email bisa menggunakan layaran seperti Resend.
Sejujurnya: Auth.js tidak merekomendasikan kita menggunakan credentials provider karena alasan security dan tidak efisien.
Ini masuk akal, karena jika kita login menggunakan email dan password:
1. Kita perlu memastikan apakah email yang di input user benar-benar aktif atau tidak. dan untuk memastikan emailnya aktif, kita perlu send email verifikasi ke user.
2. Kita juga perlu mengirimkan email ke user untuk reset password jika user lupa password.
3. Kita juga perlu meningkatkan security dengan mengirimkan kode OTP ke user via SMS, email, atau WA.
Dari 3 point diatas saja, jelas tidak secure dan tidak efisien.
Kita perlu bayar layanan tambahan untuk send email dan bayar layanan sms gateway untuk send kode OTP.
Itulah kenapa Auth.js lebih merekomendasikan menggunakan oAuth Provider.
Jika menggunakan oAuth, kita tidak perlu khawatir emailnya aktif atau tidak (karena sudah pasti aktif), selain itu kita tidak perlu mengirimkan kode OTP karena kode OTP telah di handle oleh perusahaan penyedia oAuth.
Akan tetapi, kita sebagai web developer perlu mengetahui bagaimana setup login menggunakan email dan password. Itulah kenapa saya membuat tutorial ini.
Tapi, ketika saya mengerjakan project untuk client, saya tidak pernah lagi menggunakan credential provider dan selalu menggunakan oAuth provider (khususnya google) karena dapat meningkatkan user experience dan semua orang telah punya akun google.
2,5 jam😂
Refresh token bang
Refresh token di handle otomatis oleh auth.js di next.js middleware.
@@CoderMediax apa di video ini di jelaskan?
Atau ada di video lain di channel ini?
@@ramaalfinbaehaqi7872 Ada di video ini, hanya dengan satu baris kode di middleware, maka refresh token terhandle secara otomatis.