Halo semuanya Selamat datang kembali di channel pip code studio bersama saya apib saifulah di video kali ini kita akan melanjutkan seri next JS app router di mana kita akan coba untuk men-set up next out jadi kita akan coba untuk lakukan otentikasi nah yang pertama yang perlu kita siapkan adalah menginstal terlebih dahulu untuk library next out-nya nah untuk menginstalnya kita bisa gunakan npmi di dalam Terminal kemudian masukkan next out Nah mungkin akan saya coba cek dulu untuk untuk versi yang saat ini digunakan supaya nanti versi yang digunakannya sama ya DII kita cari next out nah ini dia ya untuk next out dia versinya ada di 4243 ya kita coba instal yang sama jadi add 4.24.3 ya kita enter tunggu sampai instalasinya selesai Nah jadi yang pertama yang akan kita lakukan adalah membungkus ya layout yang sudah kita buat ya layout utama dengan session provider ya karena kalau misalkan tidak dibungkus ya enggak akan jalan ya Nah mungkin akan saya coba ini untuk rapikan terlebih dahulu ya jadi Akan saya hapus yang ini kemudian juga yang state ini mungkin saya tidak gunakan ya kemudian di sini saya akan coba untuk membungkusnya ya jadi di sini saya akan Panggil session provider jangan lupa import dari next out/react ya nah kemudian ini akan saya pindahkan untuk yang childrenen dan juga nabar-nya saya pindahkan ke dalam Oke jadi kita sudah membungkus ya untuk session providernya kemudian kita akan coba untuk jalankan servernya ya NPM rundef nah kemudian kita akan coba untuk masuk ke dalam dashboard/ dashboard Nah ini kan masih bisa diakses secara publik ya Saya maunya adalah dashboard ini hanya bisa diakses kalau kita sudah login kita akan coba untuk batasi dulu aksesnya di sebelah sini berarti kita akan lakukan pengecekan ya untuk mengeceknya gimana untuk mengeceknya kita bisa gunakan use session ya dari library next out jadi di sini akan saya coba untuk cons ya kemudian data session kemudian ada status ya biasanya kemudian gunakan use session dari next out router Oke kemudian saya akan coba console.log data dulu dan juga kita akan console.log status Ya sorry ini Harusnya bukan data tapi session ya karena kita sudah assign dia sebagai session Oke kalau kita lihat di sini react context is unavailable in server component berarti kita perlu menggunakan use client ya Jadi sebetulnya yang membedakan kli dan server itu itu apa gitu ya jadi komponen klien ya itu direndernya di klien gitu ya kalau misalkan komponen server ya direndernya di server dan biasanya kalau kita mau menggunakan konteks ya react konks ataupun biasanya yaitu adalah berupa hooks ya itu kita harus menggunakan klien ya tidak bisa menggunakan server Oke kemudian kita akan coba buka atau kalau teman-teman menginstal konsol Ninja itu biasanya muncul langsung ya Nah kalau di sini kita lihat session-nya null ya karena kita belum login kemudian juga statusnya katanya unauthenticated nah ini sebetulnya bisa kalau kita mau cek ya pakai use evc aja use evac kemudian di sini kita gunakan status ya sebagai parameternya dan di sini kita tinggal cek if status sama dengan sama dengan sama dengan UN autor tadi ya maka saya akan coba untuk lakukan redirect nah redirect-nya akan saya gunakan use router aja ya J di sini mungkin saya akan bikin cons router sama dengan use router kemudian router op sorry ini harusnya use router nah seperti ini baru kita akan push dipush ke mana Ke slash login ya ya Nah ini status katanya kondisional ya oh sorryi bukan unauthorized harusnya unauthenticate ya kita coba di sini berubah unutenticated Oke kemudian di sini kalau kita lihat ada missing dependencies ya ini tinggal di-update saja ya Ada router harusnya katanya jadi selain status dia juga harus ada router Oke ini was not mounted Ya next router tidak dimounting ini mungkin harusnya menggunakan next navigation ya Nah kita coba sekarang saya refresh Nah ya karena tidak ada session atau kita belum login maka dia diedirect ya Saya coba kembali lagi ke dashboard dashboard ya Nah dia enggak bisa ya kemudian kalau misalkan saya coba balik ke produk kalau di produk bisa ya Jadi kita tunggu ini datanya ke load ya Nah dia bisa kalau kita masuk ke dashboard nah dia enggak bisa gitu ya Oke tapi karena dia dicek di sisi klien Maka kalau kita lihat ya dashboard-nya terbuka dulu gitu ya Nah makanya ada satu fungsi yang pernah kita pelajari yaitu middleware ya tapi kita akan belakangan untuk set up middleware-nya Nah sekarang kita akan coba untuk melakukan set up next out-nya ya jadi next out ini akan kita bikin sekarang di dalam api ya kita sudah punya out sebetulnya ada login juga nah ini walaupun tidak melakukan apa-apa ya karena di sini hanya ngpost tapi ya hanya menampilkan data request-nya saja Kita pernah bikin sebelumnya ya untuk men-handle data yang ada di sini Oke kita akan coba delete aja ya untuk login ini di dalam out kita akan bikin sebuah folder namanya yaitu adalah gunakan kurung siku seperti ini titik3 kemudian next out ya jadi nama foldernya next out kemudian kita akan bikin sebuah file di dalamnya namanya route tsx atau mungkin r.ts cukuplah gak perlu tsx karena tidak akan merrender ya untuk html-nya atau jsx syntax nah yang akan saya coba buat di sini Yang pertama adalah font out options ya out options dan untuk type-nya di sini next out option ya jangan lupa impimport dari next out sama dengan di sini dia berupa objek kemudian di sini kita butuh session pastinya session strategi berupa jwt ya kemudian kita butuh Secret ya Jadi nanti strateginya adalah berbentuk jwt ya untuk otentikasinya Nah untuk secret-nya sementara saya enggak pakai env dulu ya nanti belakangnya kita akan pakai ini sebetulnya string acak aja ya mau avif 1 2 3 boleh gitu ya mau apapun itu ya di sini saya coba seperti ini aja dulu nanti kita akan generate untuk secret-nya ya ya oke kemudian providers nah providers ini kita akan gunakan credensial dulu ya credenials provider ini jangan lupa diimport ya untuk credenial provider ini kita impimport credenal providers dari provider kredensial ya oke kemudian di sini type berupa credenials dan juga name-nya itu berupa credenials Oke wait ini sepertinya ada sedikit kesalahan ya harusnya jangan pakai kurung seperti ini Nah ya kemudian di dalamnya saya akan butuh lagi itu credensials ya di sini mau inputnya apa aja ya misalkan email ya ada label misalnya di sini email tipenya email misalnya ya kemudian password password labelnya password dan juga tipenya password Oke dan terakhir yaitu asyncronous authorized di sini oriz berupa credensials op sori ini harusnya diiluar ya kita pindahkan dulu pindahkan nah seperti ini kemudian akan saya panggil cons menerima email dan password dari credenials di sini S Email adalah string dan juga password itu adalah string juga ya Nah di sini akan saya ngeceknya gini jangan dulu kita koneksi ke database ya koneksinya ke belakangan aja if misalnya ya email itu sama dengan sama dengan sama dengan afifsullah @gmail.com dan password ya password itu sama dengan sama dengan sama dengan 1 2 3 4 5 6 7 Del misalnya saya akan coba untuk return di sini return nah seperti ini ya Jadi ada ID ada name ada email dan juga rool-nya misalnya admin gitu ya nah jadi ini yang akan saya return kemudian setelah saya authorize saya akan lakukan yang namanya callback di sini callback ya jadi setelah kita melakukan authorize yang akan saya lakukan adalah di sini asinkronus jwt ya jadi saya akan generate J wt-nya mungkin di sini akan menerima token account kemudian ada profile dan juga user ya ini biarkan kita gunakan any saja dulu sementara untuk tipenya kemudian di sini if account dot provider Jadi kalau providernya adalah berupa kredensial ya kredensial itu username dan password ya karena nanti bisa menggunakan Google juga untuk loginnya ya di sini akan saya set token.email sama dengan user.email kemudian token.f nameame sama user.f nameame dan terakhir token.rw saya akan set dari user. RW Ya seperti ini Terus tinggal saya return token nah seperti ini ya oke dan terakhir di paling bawah kita akan gunakan asyronus lagi ya untuk apa untuk sekarang generate session-nya nah di session dan juga token ya gunakan any saja Kemudian if di sini kalau misalkan ada email di token ya in token saya akan nge-set session-nya ya session.user.email sama token.email kemudian di sini akan ngecek lagi If full name in token Saya akan cek session. user.ful nameame sama dengan token do full name kemudian if roll ya terhir roll roll in token set session user roll dengan token roll ya di sini tinggal return session Ini ada sedikit error kita lihat cek ya errornya karena apa Oke ini sepertinya ada errornya Kita harusnya return N0 ya di sini return N0 Oke ini sepertinya ada sedikit problem di bagian sini kalau ini saya bikin n Nah ya kan Benar berarti di sini ya kita cek lagi untuk promis-nya number is not assign to user ya oke ya berarti ini Kita bikin kayak gini aja jadi cons user tipenya ni ya kemudian isinya yang ini ya kan nah seperti ini baru di sini saya return user nah seperti ini ya jadi sudah tidak ada problem sekarang Nah kalau sekarang saya coba ya mungkin akan saya masuk sekarang ke bagian napbar ya di Nabar itu kan ada button login ya mungkin saya balik dulu ke halaman produk Nah ini kan ada button login nih di dalam navbarnya ya nah saya akan coba manfaatkan button login ini untuk masuk ke halaman login punyanya si next out ya Nah caranya gimana caranya adalah di sini bukan lagi kita Arahkan ke slash login tapi kita akan Arahkan ke sign in impimport dari next out react ya nah jadi diimpimport dulu sign in-nya dari next out react kemudian kita gunakan di sini gitu ya Oke kita coba refresh kita masuk sekarang ke login op ini ada error ya kita lihat errornya karena apa Oke ini error karena kita belum selesai sebetulnya ya kita baru bikin Out option-nya aja Nah di sini berarti akan saya coba Bikin seperti ini consandler sama dengan next out ya jangan lupa import dari next out next kemudian di sini masukkan out options ya dan terakhir kita akan Export itu adalah handler S Get dan juga handler S po seperti ini ya saya coba balik sekarang saya coba masuk login Nah ya sekarang sudah ada login ya berupa kredensial tapi ui-nya enggak pakai punya kita ya ui-nya sekarang pakainya punyanya si next out-nya ya yang tadi kita define di sini kalau ini saya hapus aja password-nya ya saya refresh nah hilang password-nya jadi ini adalah hasil generate dari credensial providers-nya jadi tadi kita masukkan credensial di sini atau kalau kita masukkan lagi misalkan di sini ada password 2 ya labelnya password 2 tipenya password ya saya Coba refresh Nah ada password 2 ya Jadi ini berdasarkan yang kita masukkan di dalam credensials Oke kita balikin lagi Ya Nah sekarang saya akan coba untuk pgmail.com dengan password 1 2 3 4 5 6 7 8 ya Kita sesuaikan dengan yang tadi ya Yang ini Oke kita coba sekarang sign in Nah kalau kita coba masuk ke halaman dashboard bisa ya kenapa bisa karena kita sudah punya session ya tadi kita ngeceknya di sini nih dan kalau kita coba sekarang konsol ya consolle.log data ya atau session di sini nah sudah ada sekarang ada user name-nya apib seuloh emailnya
[email protected] dan juga rolennya admin ya Terus kalau misalkan saya coba console.log status ya kalau sebelumnya itu unauthenticated sekarang jadi authenticated ya Sehingga di sini tidak lagi di push keluar itu nah sekarang juga bisa saya coba ceknya di sini tambahin lagi misalkan di sini Sion douser.roll not sama dengan sama dengan admin Nah ini mungkin saya tambahkan tanda tanya di sini tambahkan di sini untuk tipenya data ini status stringnya nah sementara seperti ini aja dulu Oke saya akan coba sekarang Oh ini perlu kita update lagi ya kita tambahkan session user rle ya Nah sekarang karena saya rollnya admin bisa ya masuk ke dashb nah gimana kalau kita coba untuk bikin logoutnya dulu ya supaya kita bisa masuk lagi ke halaman loginnya Oke kita coba untuk logoutnya dibagian Nab ini ini sama berarti kita perlu ngceknya di sini ya kita akan coba berarti gunakan new session lagi di sini kita bisa copykan ya dari yang dashboard nah bagian ini kita bisa ambil Oke kita coba untuk copykan ke sini terus session-nya jangan lupa diimport dari next out react dan di sini mungkin kalau misalkan ada session ya atau cukup status juga bisa sebetulnya Kalau status ya di sini mungkin datanya bisa saya hilangkan status auutenticate ya Nah ini jadi saya akan Cut dulu status sama dengan sama dengan sama dengan aenticated gitu ya di sini ngapain Nah di sini saya akan masukkan dulu yang tadi kalau misalkan tidak terotentikasi saya akan masukkan juga yang barusan tapi kalau terotentikasi saya akan ubah di sini jadi S out nah S out-nya jangan lupa diimport dari next out react terus saya ubah yang ininya jadi log out ya tulisannya nah karena saya sekarang sudah login maka tulisannya jadi logout tapi kalau misalkan saya belum login maka tulisannya login Oke kita coba sekarang logout ya Nah sekarang sudah gak bisa lagi masuk ke dashboard karena udah logout ya Terus kalau saya buka juga di produk tulisannya login lagi ya Sekarang saya coba login B sekarang untuk masukkan lagi ya Atau saya ubah dulu deh ya saya ubah responnya dulu di sini bukan admin tapi dia adalah misalkan usernya itu rolnya adalah reguler user gitu ya kita coba sekarang masuk lagi gunakan email yang samaiffulah @gmail.com kemudian password-nya 1 2 3 4 5 6 78 sign in oke masuk ya berhasil tapi kalau saya masuk ke dashboard bisa enggak Oh ternyata bisa nah ini perlu kita cek lagi nih ya kita lihat dulu di dashboard ya kita cek session rw-nya ya console.log session oke ya di sini regular ya Oh ini salah pengecekannya bukan dandan harusnya or Nah ya baru dia diedirect kita kembali ke dashboard Nah Enggak bisa ya kita coba sekarang balik dulu ke produk kita logout kemudian saya akan coba untuk hapus dulu konsolnya saya balikin lagi jadi admin lagi ya Oke kita coba sekarang login ya terus kita gunakan avif shaifulah @gmail.com kemudian password-nya 1 3 4 5678 ya kita coba sign in Oke bisa masuk ke dashboard dashboard op Oh ini ternyata masih salah nih ni pengecekannya ya oke ya Ini tadi masih masuk ke login ya sol.log session douser Ini kita matikan dulu sementara kita balik dulu ke dashboard Oke kita lihat lagi ya kayaknya ada salah nih Oh undevine session nah oke ya ini berarti sempat undevine dulu baru muncul ya Nah ini enggak bisa kayak gini berarti kita akan ceknya di bagian kita coba Cut dulu Cut di sini mungkin else if session not sama sama Divine ya kita akan ngecek lagi If lagi session roll admin ya router push Oke kita refresh nah ini sudah aman ya sekarang tau ini juga kalau mau di lebih dipersingkat lagi Harusnya bisa ya Nah seperti ini ini saya hapus ini saya Hapus yang ini bisa kita benerin Oke ada session-nya sekarang ya Oke saya refresh sudah aman ya untuk session checkernya sudah berhasil Nah sekarang kalau saya logo Nah kan ekspektasi saya adalah menggunakan halaman yang ini ya custom kalau sebelumnya itu kan menggunakan halaman yang bawaan dari next out-nya nah saya enggak mau pakai halaman itu ya saya coba login Nah Enggak mau pakai halaman ini ini ini coba saya hapus dulu konsolnya ya saya sekarang masuk lagi berarti ke next out-nya dan di bagian setelah callback saya akan tambahkan satu lagi out option-nya yaitu adalah berupa pages ya Nah pages ini sign in-nya mau saya Arahkan ke mana ya Saya akan Arahkan ke slash login nah seperti ini jadi kalau saya coba sekarang klik login nah ditampilkannya bukan lagi dari next out-nya Tapi punya saya ui-nya gitu ya Nah sekarang tinggal saya ubah di bagian loginnya Nah kita masuk ke bagian login view-nya ya ada di out login page nah ini kita udah punya handle ya untuk login ini tinggal kita ubah-ubah aja sedikit ya di sini mungkin saya akan coba try aja ya Try ons rest sama dengan dengan await sign in dengan tipe credenials kemudian di sini redirect false lalu email event D target sor bukan event ya ternyata e ya e.target.email.vue kemudian ada password ya kita butuh password eh target dpassword.value dan juga callback url ya di sini kita butuhnya callback url nah callback url-nya mau ke mana ini akan saya set dulu misalnya ke dashboard ya slash dashboard sign in ini jangan lupa diimport ya Dari react ini saya akan coba Hapus yang p-nya kalau try itu harus berpasangan ya dia denganak catch nah try catch error kemudian di sini mungkin saya akan coba untuk console.log error dulu dan di sini akan saya cek ya If not rest. error akan saya coba untuk push ya push callback url-nya kita gunakan ke dashbo pus ini dia punyanya use router nah kita gunakan berarti di bagian sini cons push sama dengan use router ya Ini bukan dari next router tapi dari next navigation ya Nah seperti ini ini await harusnya berarti di sini ada asyronus asing nya oke kemudian ini saya tambahkan else console.logr error ya seperti ini aja dulu gitu ya kita coba sekarang saya coba Refresh dulu terus saya masukkan email saya ya avif
[email protected] kemudian password-nya 1 2 3 4 5 6 78 ya saya login Nah ya Bisa ya kita lihat ada session-nya ya di sini tandanya ada session ya kita bisa masuk ke dashboard dan juga log out oke ya Jadi itu kita sudah berhasil untuk melakukan login ya menggunakan next out ya tapi kita belum terhubung ke database Nah mungkin untuk itu di video berikutnya kita akan coba untuk menghubungkannya ke dalam database Jangan lupa untuk subscribe comment like dan share video ini kita ketemu lagi di video berikutnya