Next.js Authentication: Login Multi Role dengan Next.js 14 (Auth.js V5)

Рет қаралды 4,388

Coder Media

Күн бұрын

Пікірлер: 43

@NurSyamsu86 Ай бұрын

Thanks Bang atas video tutorial auth nya bermanfaat

@CoderMediax Ай бұрын

Terima kasih atas super thanks-nya mas.

@kangroasting8933 21 күн бұрын

@@CoderMediax bang ada tutorial bikin pagination di nextjs tak hehe

@CoderMediax 21 күн бұрын

@@kangroasting8933 udah ada ini: kzbin.info/www/bejne/ipzFp6V5gdKhidE

@kangroasting8933 21 күн бұрын

@@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

@ndarucompiler Ай бұрын

Akhirnya upload juga, setelah CRUD Next JS lalu bisa diterapkan autentikasinya juga. Many thanks! Sangat membantu

@alhifnywahid9074 Ай бұрын

Sumpah kirain ni yt dah ga bakal up lagi bg, keren pembahasannya gampang di mengerti, next bahas custom server nextjs bg

@kodokpink6169 Ай бұрын

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!

@kadalio300 Ай бұрын

Terimakasih Tutorialnya cukup membantu, dulu gunain tutorial yang jwt auth buat diterapin di prisma.

@hildanmalaya Ай бұрын

Nice upload bang fikri. Walau skrg belum mau masuk ke next, msh stay belajar express, semoga kedepan nya bisa gas materi next❤

@CoderMediax Ай бұрын

Tutorial selanjutnya akan banyak membahas next.js

@hildanmalaya Ай бұрын

@@CoderMediax siap bang fikri, semangat terus berkarya

@HenokGebresenbet Ай бұрын

idk what language you speaking but this tutorial help me alot thanks bro

@CoderMediax Ай бұрын

Indonesia

@HenokGebresenbet 24 күн бұрын

@@CoderMediaxalso do tutorial on drizzle

@AlimAlim-p5l2t 25 күн бұрын

makasih mas, next tutorial reporting dong mas, seperti generate to excel

@MrSANS 29 күн бұрын

Terima kasih tutorial nya bang👋

@adrianaji4551 Ай бұрын

yang ditunggu tunggu terimakasih bang

@fahmikocak6775 9 күн бұрын

permisi kak, ini kalau kita mau pengen memberi class active untuk navbar bagaimana ya? soalnya ini kan use server?

@teguhbagasmardiansyah Ай бұрын

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

@CoderMediax Ай бұрын

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

@ZephyrionToram 23 күн бұрын

bang bahas yuga byte dan implementasinya dong

@ariasaputra788 Ай бұрын

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

@CoderMediax Ай бұрын

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.

@MuhamadJajuni 4 күн бұрын

Tampilan label nya gak muncul border kenapa ya bang? 🙏🏼

@shafaasyari9856 Ай бұрын

bang buat handle token dari backend pake auth.js itu gimana ya?

@heruuu6114 Ай бұрын

kalo frontend nya nextjs backendnya expressjs auth pakai apa bang?

@CoderMediax Ай бұрын

Bisa juga pake auth.js, tapi saat ini auth.js untuk express masih versi experimental.

@syalwacode Ай бұрын

kenapa route managementnya ga di middleware bang?

@CoderMediax Ай бұрын

Saya sudah jelaskan didalam video kenapa. Jika mau coba, silahkan pindahkan kode yang ada di authorize callaback ke middleware dan lihat apa yang terjadi.!

@alfiaditya8084 20 күн бұрын

bang bikin video laravel

@iqbalali3341 Ай бұрын

Hosting Next js mahal,,, kudu hosting yg support edge runtime 💀 Klo gk ntar fitur kek middleware dll kagak work di app nextjs nya :'

@CoderMediax Ай бұрын

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.

@logikasehat2745 Ай бұрын

bang , saya pake exprees.js dan enxt.js berarti aunth.js nya di isntall di mana ya

@CoderMediax Ай бұрын

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.

@jossesuryapinem42 Ай бұрын

reset forget password gada kah bg?

@CoderMediax Ай бұрын

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.