Transcript for:
Membuat Aplikasi Login dan Register Sederhana

Halo teman-teman ketemu lagi dengan saya Fadli dari jevali programming bootcamp P hari ini kita akan membahas kita akan sama-sama belajar materi yang menurut saya cukup penting teman-teman jadi kali ini kita akan membuat sebuah aplikasi login register sederhana kita akan menggunakan react dan untuk menghandle usernya kita akan menggunakan teknologi dari Google yaitu Fire Oke seperti ini teman-teman desainnya jadi di sini kita punya login screen login ya atau patch login sini cukup sederhana oke lalu kita punya register ini juga kurang lebih sama ya di sini ada button register dan login dan di sini ada button juga Google login artinya user ini bisa memilih login menggunakan email password mereka atau login menggunakan Google nah ketika login Google dipilih maka dia akan membuka sebuah Tab baru untuk memilih akun yang digunakan untuk login ke aplikasi kita setelah berhasil maka akan muncul tampilan dashboard seperti ini dashboardnya cukup sederhana teman-teman kita hanya menampilkan avatarnya ini pun dapat dari Google gitu ya untuk yang login dengan email dan password ini tidak muncul avatarnya hanya emailnya aja Oke kurang lebih seperti ini aplikasinya Oke jadi kita bisa memilih login menggunakan Google Oke setelah berhasil kita akan masuk ke dashboard di sini akan muncul Avatar sesuai dengan Avatar kita di Google dan tentunya akan bisa menampilkan email Sebenarnya bukan hanya email ada banyak teman-teman sini ada juga display name nya Nah kalau teman-teman masukin nomor telepon juga biasanya akan muncul juga nah tapi yang fokus kita nih hanya kita tampilkan Avatar dan emailnya saja Oke ini bisa log out Nah tadi menggunakan Google aplikasi Kita juga bisa register menggunakan email pribadi gitu ya yang di luar dari Google Contohnya saya pakai tes aja ya aku add email.com passwordnya kita masukkan Oke kita coba register dan berhasil Nah teman-teman bisa lihat di sini ketika bukan menggunakan provider Google avatarnya ini tidak muncul hanya emailnya saja tapi datanya tetap ada nah ini kalau kita buka di fire base-nya ini maka akan masuk ya oke langsung saja kita mulai dan teman-teman Sebelum kita mulai yang pertama akan saya ingatkan kalau di komputer teman-teman harus ada yang namanya satu ya Ini adalah note us penting ini karena tidak mungkin kalau nggak ada note JS ini ya karena kita menggunakan library dari javascript dari note JS ini juga jadi Silahkan untuk teman-teman yang belum melakukan instalasi note JS silahkan diinstall dulu selanjutnya kita akan menggunakan sebuah kode editor dengan nama Visual Studio code ini juga boleh teman-teman silahkan install ya Jadi kita akan pakai ini karena banyak extension extension yang bisa membantu kita dalam membuat aplikasi kita ini yang ketiga adalah saya sarankan untuk teman-teman yang bener-bener baru masuk ke riak silahkan ditonton dulu aja video tutorial tutorial dari channel YouTube javaley yang lain karena memang ini setidaknya teman-teman sudah pernah melakukan code dengan riek setidaknya teman-teman sudah tahu apa itu yang namanya riekwok you state use Effect dan react router dong Bagi teman-teman yang mungkin masih belum familiar dengan hal-hal tadi saya sarankan untuk melihat dulu tutorial-tutorial dari dasar pengembangan aplikasi dengan react di channel javale programming bootcamp Oke sekarang kita akan coba untuk mendaftar fire base misalkan teman-teman Buka tab baru lalu cari aja yang namanya Fire Oke didukung oleh Google sedangkan teman-teman Klik di sini Nah jadi firebase ini memang sudah banyak yang pakai ya jadi memang karena fitur-fiturnya ini cukup banyak sini produk dan solusi yang dapat anda andalkan jadi build rilis dan pantau dan Engage ini ada integrasinya ada banyak ya okelah Siapa yang mau ngelawan Google jadi seperti inilah silahkan teman-teman kalau belum login silahkan coba aja free kayak gitu ya ini free nah aja nggak bayar-bayar mungkin gak bayar-bayar ya free tapi tentunya dengan ada limitnya di sini Silahkan teman-teman buka konsol Oke Nah di sini saya udah ada beberapa Project yang sudah pernah saya buat tapi kita akan buat lagi dari awal Nah di sini ada add Project silahkan teman-teman klik aja add Project kita buat aja YouTube belajar Oh nggak boleh ya nih gue YouTube Fire Atau gini aja deh kita left ya biar lebih simple Oke Langsung aja continue teman-teman Nah di sini ada Google analitiknya untuk Saran saya di sini dimatikan aja dulu kita belum butuh untuk si Google Analitik ini lalu langsung aja teman-teman create Project akan butuh sedikit waktu untuk mem build Project kita dan teman-teman bisa lihat di sini sudah berhasil ya Oke jadi diklik aja tombolnya silahkan teman-teman Klik tombol continue kita langsung dihadapkan ke dashboardnya ditampilkan dashboardnya Nah di sini ada beberapa fitur ya Ada banyak fitur dari fair base ini di sini ada build teman-teman ada banyak tuh ya jadi ada autentification dan lain-lain face Store ada Real Time nah untuk saat ini kita akan fokus ke autentification sini jadi Silahkan di klik dan langsung aja kita klik get started oke di sini ada outtentification page ya di sini pertama nih user nanti ketika user-user sudah masuk ke aplikasi kita teman-teman nanti datanya akan masuk di sini gitu ya tapi kita perlu melakukan beberapa set up yang pertama silahkan ke tab sign in method di sini dan kita akan menyalakan ya dua ya yang pertama dalam menggunakan email dan password dan selanjutnya pakai Google kalau pakai yang lainnya nanti bisa kita integrasikan di next ya tapi untuk fokus kita hari ini adalah di email teman-teman klik aja email klik yang email atau password lalu di sini teman-teman silakan centang di nable Oke dan ini pencet save aja ini nggak usah dibiarkan saja yang bagian atas saja teman-teman dan silahkan tekan save Oke kita sudah punya satu provider ini istilahnya provider ya dan kita akan menambahkan satu lagi silahkan tekan tombol yang ada di atas ini teman-teman dan kita pilih Google oke di sini ada keterangannya [Musik] dan ini silahkan teman-teman enable dan silahkan tambahkan Project support email sesuai dengan email teman-teman kalau sudah ini tekan save aja Nah teman-teman bisa lihat di sini Kita sudah punya dua sign in provider yang pertama ini menggunakan email dan password yang kedua menggunakan Google seperti ini sudah selanjutnya kita ke setting ini sudah nggak ada yang perlu diatur lagi ya sudah cukup seperti ini nah ini ada template buat balasan email tapi kita nggak pakai dulu Nah selanjutnya yang harus teman-teman perhatikan adalah di setting sini Silahkan teman-teman buka nih Arahkan aja mousenya ke project overview sebelahnya ini ada setting nih ketika teman-teman hover nih ada panah ke samping diklik aja silakan teman-teman buka Project setting Oke Nah di sini ada project setting teman-teman Oke kita ke bawah Nah di sini kita belum punya app-nya ya jadi dia bilang diaps in your Project Nah kita silahkan tambahkan nah kebetulan kita web Ya silakan klik yang Simbol ini tag ini tag penutup ini ya di klik aja lalu kita kasih nama app nya contohnya ada fire hosting kita nggak perlu langsung aja teman-teman Klik tombol register Nah di sini ada konfigurasi untuk Project firebase kita teman-teman Nah di sini kita bisa menggunakan NPM ya atau kita bisa menggunakan Script Nah jadi nanti kita harus buat dulu nih projectnya nanti kita bisa ambil dari sini Oke silahkan klik aja continue to console nanti ini kita akan bisa lihat kembali nanti kita continue ke konsol di sini Kita sudah punya ya sudah punya sebuah di sini ada cold ini belum ya integration dan service account proses konfigurasinya sudah cukup ya sekarang tinggal kita menjalankan chordnya Baik teman-teman saya menggunakan Mac OS jadi di sini saya buka sebuah aplikasi terminal pastikan teman-teman sudah memiliki note JS jadi silahkan cek dengan cara seperti ini ketik aja not spasi minus V kita akan lihat sini saya menggunakan note JS versi 14 langkah selanjutnya kita akan cek juga sebuah package Manager yang dimiliki sama note GS namanya NPM kita cek juga NPM versionnya di sini Saya mempunyai versi 6 .14.17 Nah jadi sudah lengkap semua untuk teman-teman yang belum ada Note gs-nya tentunya ini belum ada NPM nya juga silahkan install dulu note JS nya saya coba gedein dulu tampilan Terminal saya langkah selanjutnya teman-teman kita pakai NPM create Nah di sini kita kasih nama projectnya namanya seperti ini aja create JS fire base Di sini teman-teman diminta untuk memilih frameworknya kita akan menggunakan riek untuk frameworknya dan Silahkan teman-teman pilih JavaScript Oke ini sudah selesai kalau teman-teman coba LS sudah ada ya react JS kita akan langsung masuk saja ke dalam foldernya CD react JS Oke tadi untuk teman-teman yang menggunakan Windows ini LS ini bisa diganti dengan silakan di menggunakan dear Kalau di saya ini menggunakan LS Oke silahkan masuk ke dalam Project foldernya klik gsfire base dan silahkan teman-teman dear lagi atau LS ini harusnya sudah ada scape foldingnya ya atau file dan folder yang sudah disiapkan sama Fit Oke langkah berikutnya teman-teman kita akan menginstal beberapa package jadi ini langsung aja kita install beberapa package yang akan kita butuhkan pertama teman-teman langkah pertama kita akan jalankan NPM install ini aja nah ini akan menginstal yang sudah dirilis sama feed JS di dalam file dengan nama package Jason Nah jadi teman-teman jalankan NPM install dulu Ditunggu sampai proses instalasinya selesai Oke kita clear ya teman-teman bisa tekan cls Kalau di Windows Kalau di saya ini Clear sekarang kalau kita coba dear lagi atau LS kita akan lihat kalau sudah ada sebuah folder dengan nama not modulus di sini Artinya kita sudah siap nih aplikasi react dengan Fit kita ini sudah bisa dijalankan sebenarnya Tapi mumpung kita masih ada di terminal kita akan melakukan instalasi package lainnya Nah di sini kita akan butuh sebuah package jadi kita install seperti ini NPM install kita butuh react router dong Oke silahkan teman-teman enter dan Ditunggu sebentar Oke ini silahkan cls lagi atau clear biar layar dari terminal kita ini di clear Nah sekarang kita akan coba jalankan dulu apakah benar react kita ini sudah berjalan silahkan teman-teman jalankan dengan cara seperti ini ketik aja NPM Run oke di sini ada keterangan kalau aplikasi Real kita atau server front and nya ini sudah berjalan di port 5173 Silahkan teman-teman buka browser dan Langsung aja ketik localhost 5173 harusnya muncul tampilan seperti di layar saya ini langkah selanjutnya teman-teman kita akan menginstal telwing CSS ke read Project kita teman-teman Silahkan buka aja Browser dan ketik aja telling CSS ya langsung aja ke sini ke bagian get started Oke di bagian tengah teman-teman Silahkan pilih Framework guide dan kita akan memilih Fit di sini karena kita menggunakan fit ya teman-teman untuk langkah 1 ini kita lewatin karena memang kita sudah membuat sebuah Project Fit jadi teman-teman Silahkan ikuti dari langkah yang nomor 2 ini boleh kita copy kita kembali ke Terminal nah ini teman-teman harus di stop dulu servernya ya silahkan kita stop dengan cara tekan control C dan silahkan teman-teman tes di sini Klik Kanan paste dan enter kita akan melakukan instalasi telling CSS pos CSS dan Auto prefixer Oke dan langsung dibuatkan tell Win config cjs nya di sini Oke boleh teman-teman cls lagi atau clear Nah untuk selanjutnya langkah instalasi selanjutnya kita harus menambahkan atau kita melakukan config melakukan konfigurasi template Path kita di file tell win.confic.cjs nah silahkan temen-temen copy aja dulu ini dan kita kembali ke Terminal kita akan buka vs Code dari sini silahkan kita akan ketik dengan cara kode spasi titik di sini kita akan cari file dengan nama tell Win config cjs dan kita akan control A dan delete lalu kita akan paste dari hasil copy di dalwin dokumentasi ini di dokumentasi tauin yang tadi kita baca ini teman-teman ya jadi di copy seperti ini langkah selanjutnya kita harus mengcopy juga directive tell Win Ini ya ke CSS yang kita punya silahkan tekan copy di sini dan kita kembali ke VSCO teman-teman Buka folder src dan index CSS ini akan kita hapus dulu semua ya ini cssnya dan kita ganti dengan hasil copy dari telling tadi selanjutnya teman-teman kita akan melakukan sedikit konfigurasi di file yang sudah dibuat ini oleh tell Win pertama teman-teman hapus aja file app CSS ini kita akan hapus dengan cara Klik Kanan dan delete Oke ini boleh di close ini juga boleh di close dan di fjsx silvin ini sudah membuatkan kita sebuah struktur Project sederhana ini kita akan hapus saja kita akan melakukan proses pembuatan komponen F di sini Saran saya teman-teman silahkan install sebuah extension Visual Studio code dengan ketik aja ya gitu ya di sini saya menggunakan sebuah extension dengan nama is7 + reach ini yang dibuat dengan nama dszr nih Silahkan di install aja Nah jadi kalau teman-teman sudah melakukan instalasi extension ini kita gampang banget nih untuk membuat sebuah komponen teman-teman silakan ketik aja rfc lalu enter nah extension kita tadi langsung membuatkan struktur Project untuk Komponen F kita kita akan mengatur create routerdomnya teman-teman silakan kita ke main gas X di sini teman-teman bisa import dulu import [Musik] yang kita import adalah browser router Nah si browser router ini akan kita Panggil di sini teman-teman Oke dan penutupnya ini silahkan teman-teman Cut dan Letakkan untuk membungkus komponen F yang sudah kita punya Silahkan di save ini boleh di close Oke kita akan kembali ke fjsx di sini teman-teman kita akan import lagi dari rekrutmen sebuah komponen dengan nama Roads Deep ini akan kita hapus aja ya jadi cuman ngetes aja di sini teman-teman silakan buat route-nya ini dan di dalamnya kita akan buat sebuah komponen road ya dia self closing tag dulu nih gimana dia punya dua props utama ya Yang pertama adalah Path ini adalah url gimana user itu bisa mengakses aplikasi kita ketika user mengakses atau ke default url aplikasi kita kita bisa menambahkan elemen di sini contohnya teman-teman bikin aja sebuah elemen H1 di sini kasih aja login page seperti ini kita akan coba tambahkan beberapa routs kedua di sini kita punya register ya dan selanjutnya di sini kita punya dashboard [Musik] seperti ini dan ini silahkan teman-teman ganti-ganti sini register yang satu lagi adalah dashboard Oke sudah lengkap di rootnya oke indexnya udah ada Surya index CSS nya udah ada fjs nya juga udah kita tambahkan Roads dan di Main GSX nya kita sudah tambahkan browser router sebagai pembungkus komponen F kita oke silahkan teman-teman kembali ke Terminal dan kita akan coba jalankan kembali kita akan coba jalankan kembali local server pria kita dengan cara NPM Run Dev oke di sini ada warning ya No utility class Where the text in your source file dicuekin dulu aja kita sekarang buka sini harusnya sudah muncul login page kalau teman-teman ke slash register ya muncul register page kalau kita ke dashboard akan ke dashboard page nanti h1h1 ini kita akan ganti dengan komponen terpisah jadi kita akan coba dulu membuat sebuah login page kita akan buat sebuah folder di sini teman-teman nama foldernya adalah kita akan bikin beberapa file di dalam folder pages ini yang pertama kita bikin login dot jsx lalu Klik Kanan new file lagi bikin lagi register.jsx dan Klik Kanan di page lagi kita tambahkan dashboard Jadi sekarang kita sudah punya 3 file di dalam folder page kita kita akan fokus ke login page dulu teman-teman Silahkan buka login GSX yang ada di folder page di sini kita akan jalankan rfc Oke kita akan pakai elemen main ini boleh Diantar aja Nah kita tahu kita sudah menggunakan talwing CSS jadi telloween itu utility base kita bisa langsung menggunakan class name yang sudah dibuatkan dalwin untuk kita pertama saya akan buat kuenya ini menjadi screen [Musik] intinya ukurannya selebar layar ya lalu - H second atur screen juga Oke Nah di sini saya punya Flag saya tambahkan fleks dan flexnya akan saya tambahkan Flex call seperti ini Nah kalau teman-teman bingung kok di tempat saya ini bisa ada snipednya ya jadi saya menggunakan sebuah extension juga teman-teman kita bisa menginstalnya silahkan teman-teman ke extension dan cari aja tell Win Silahkan di install extension thin yang dibuat sama telling lab ini ini sangat membantu sekali ketika kita menggunakan seperti ini di sini saya tambahkan lagi gradient to TR artinya gradient to top right ke atas kanan ya ini from saya kasih warna blue 800 to blue 500 Oke seperti ini Sorry tadi lupa ya ini masih belum selesai teman-teman nah jadi kita akan tambahkan juga make suitnya karena kita akan fokus ke pengembangan mobile dulu ya ke tampilan mobile maksud saya jadi kita kasih make suit ini di sini saya kasih simbol breket Artinya kita akan memberikan custom value ke match pixel seperti ini lalu saya tambahkan MX ini artinya margin secara sumbu x saya kasih Auto di bagian bawah ini teman-teman kita kasih aja sebuah elemen H1 nih Tulis aja login page seperti ini ya sudah selesai untuk login pagenya belum sih nanti kita masih harus membuat sebuah elemen form tapi kita coba dulu silahkan teman-teman kembali ke fjsx di bagian ini [Musik] kita akan ganti dengan login nih saya muncul ya snipernya saya Enter aja nah biasanya dia akan melakukan auto import dan ini silahkan teman-teman tutup oke Nah sekarang kita lihat pastikan server kita masih berjalan kita coba ke browser kita ke slash dan teman-teman sudah melihat kalau twinnya ini sudah berjalan ya artinya tampilannya memang kita buat maksimum withnya adalah 500px karena kita akan membuat desain atau tampilan atau tampilan front end yang mobile dulu jadi kita alangkah lebih baiknya teman-teman inspect dan silahkan gunakan Google device toolbar ini ada di Chrome Ya udah langsung ada dan Saya biasanya menggunakan dimension pixel 5 Oke tampilannya seperti ini kita akan kembali ke vsco-nya teman-teman di sini kita tahu kalau kita lihat dari desain ya Ada sebuah form yang ada dua input ini password sama ada beberapa button di sini ya kita kembali ke desain di sini kita akan membuat sebuah elemen form actionnya silakan dihapus aja terlebih dahulu disini kita akan pergunakan kelas name yang pertama saya kasih W ini full lalu saya kasih back oke selanjutnya saya kasih dia displaynya flight dan Flight Direction nya like kolom dan saya kasih gap sebanyak 4 saya tambahkan juga shadow LG dan roundednya ini saya pakai LG oke di sini saya kasih MT atau margin top sebanyak 8 Oh ya teman-teman tadi saya lupa di sini kita belum ada padding ya jadi Silahkan teman-teman kasih padding sebanyak 10 dulu coba Nah kalau kegedean tinggal dikurangi selanjutnya di bawah sini di dalam form kita akan bikin sebuah gift silahkan dikasih kelas 6 lagi ini Flex flights dan gapnya saya kasih 2 sini ada label for email labelnya ini isinya email yang kita punya sebuah elemen input tipenya teks id-nya email Sorry tipenya bisa kita ganti email ya teman-teman lalu di sini saya styling juga menggunakan kelas name pertama tingginya saya bikin 10 Oke dan PX ini saya kasih 3 roundednya nih saya kasih MD oke border ini saya pakai custom size 1 Pixel dan kita kasih border colornya ini menjadi 3 00 seperti ini ini boleh teman-teman copy aja ya silakan di copy ini saya ganti menjadi password huruf kapital depannya Dan kita punya beberapa button yang harus kita siapkan jadi di sini teman-teman kita buat Deep lagi aja nih margin topnya saya coba kasih 4 flags flags dan gapnya saya kasih sebanyak dua di dalam sini kita punya beberapa button teman-teman jadi dibikin aja button yang pertama ini login saya kasih kelas 6 juga hanya 10 yang pertama nih BG apa ya BG blue ya BG blue 500 teksnya adalah White dan rounded kita kasih LG kopi aja teman-teman ganti aja warnanya kalau ini saya kasih yellow aja kali ini saya kasih slide seperti ini Oke kita coba lihat dulu tampilannya seperti apa teman-teman ya Oke ini masih kurang bagus ya karena kita lupa ngasih padding di formnya ini teman-teman kasih padding aja sebanyak 6 misalkan kita lihat [Musik] jadi ya Oke di formnya ini juga saya akan tambahkan autocompletenya ini off sekarang jadi seperti ini tulis aja Google login atau using Google gitu ya atau gunakan aja deh pakai bahasa Indonesia dan di sini yang bawah ini adalah register jadi kita sudah punya tampilan yang seperti ini Tapi nampaknya kita lupa sesuatu kalau dari desain ini ada teks ya login di atas ini nih Boleh aja kita tambahkan silakan teman-teman ke sini buat aja elemen H1 dengan tulisan login kita kasih kelas name teks 4xl lalu teks blue 500 text Center kita bisa lihat ya sudah tambah di sini login walaupun font-nya teman-teman kalau dilihat nih kita belum menggunakan font yang sesuai dengan desain tapi nggak masalah ya ini tampilannya seperti ini dulu baik loginnya sudah selesai teman-teman tinggal kita buat register register sebenarnya gampang aja teman-teman kita tinggal copy semua tinggal ada beberapa yang kita rubah sedikit silahkan kembali ke chord ini di copy semua aja kontrol a copy dan kita buka register di sini kita paste yang harus teman-teman rubah pertama adalah komponennya bukan login ya tapi register ya di sini lalu di sini ini juga bukan login tapi register oke nah untuk passwordnya kita ada dua jadi Silahkan teman-teman copy ini kasih aja for password 2 tipenya tepat tetep password dan id-nya password 2 di sini bisa teman-teman tulis ulangi password Nah di sini ini kembali ke login Oke jadi seperti ini untuk register tapi kalau kita lihat kayaknya warnanya kita bikin beda ya kalau didesain ya teman-teman perhatikan di desain dia pakai orange ke orange muda gitu ya kita akan coba di sini Jadi fromnya ini bluenya akan kita ganti semua nih teman-teman silahkan klik dua kali aja bluenya atau di select seperti ini lalu tekan aja control ddd cari semua warna blue kita akan Ubah menjadi orange langkah selanjutnya tentunya kita akan ke APP GSX Disini di register kita akan ganti dengan komponen register nih muncul snipednya dan di enter aja pastikan di bagian atas sudah auto import dan kita akan tutup seperti ini Sekarang kita coba buka slash register warnanya sudah berubah antara login dan register ini login ini register kita punya satu page lagi yang harus kita buat front nya ini nggak usah ya kalau ini nanti dari Google ini jadi di sini mudah aja ya Ada welcome terus ada gambar bentuknya lingkaran sini ada emailnya DNA ada tombol logout Langsung aja kita ke code silahkan teman-teman Buka patch dashboard langsung jalankan rfc saya enter ya ini pakai main ini kayaknya bisa kita culik nih culik Ya dari sini kopi aja lah biar cepet untuk bulunya kita akan ganti menjadi warna red seperti ini oke dan kita akan bikin sebuah Deep lagi kayaknya full teman-teman BG kita pakai white sama kayak tadi ya paddingnya nih sama kayak form sebenarnya LG ini kita kasih flags dan gapnya kita kasih 4 oke di sini ada H1 Tuliskan welcome kita kasih kelas teks 4 XL dan teks 5 00 sini kita punya image image-nya sementara kita ambil aja dulu teman-teman dari website pixels ini website favorit kita ya DJ Valley ini sering pakai pixel kita coba cari aja men Oke ini ada teman-teman silahkan Klik Kanan dan copy image address kita akan masukkan ke source ini kita styling dulu si image ini ya W nya kita kasih aja berapa ya 80 pixel cukup nggak Coba aja ya ini teman-teman tahu ya kalau saya menggunakan bracket seperti ini berarti saya menggunakan custom size atau ukuran yang bisa Kita sesuaikan sendiri di sini kita kasih rounded full dan objek cover oke di sini ada sebuah kita pakai aja H3 ya email email seperti ini selanjutnya kita punya button log out hanya kita kasih 10 BG Black dan teksnya White tertulis aja log out seperti itu dan di sini kita kasih rounded LG Oke kalau sudah jadi seperti ini teman-teman kita coba dulu masukin ke di sini teman-teman tinggal panggil aja dashboard ini muncul ya snipednya sini kita tutup jangan lupa setelah ini teman-teman silakan langsung buka aja browser kembali dan kita ganti menjadi dashboard Oke muncul seperti ini tadi saya lupa ya kalau dia semuanya di tengah oke di sini teman-teman bisa tambahkan kembali ke dashboard ya ini Flex flightscall tapi kita belum kasih yang namanya Justice Center oke Oh sorry items center karena ini flexnya Flex call jadi kembali Nah karena dia center temen-temen ini si button ini jadi ngikut ya si button ini berarti harus kita kasih wave seperti ini udah mungkin si gif ini boleh kita kasih rounded LG biar manis ya nggak terlalu sulit Oke jadi kita udah punya login kita sudah punya register dan kita sudah punya dashboard selanjutnya kita akan mengatur routingnya dulu teman-teman antara ke login ini dengan register oke silakan kembali ke code pertama teman-teman di sini di login ya di sini ada tombol yang harusnya menuju ke register sebenarnya di riak routerdom dia ada sebuah komponen jadi kita bisa import di sini teman-teman from sebuah komponen dengan nama link nah link ini pengganti tag e teman-teman di ketika kita menggunakan react router dong Oke Nah si button yang di bawah sini ini kita akan ini akan kita ganti menjadi sebuah komponen Link nah link itu butuh sebuah props dengan nama to Oke ini kita isi tipe data string dan kita kasih ke slash register biar rapi saya buat seperti ini [Musik] oke nah begitupun di register sama Ya silakan buka file register GSX di sini dan kita akan import from sebuah komponen dengan nama link eh sorry ini bukan makanya nggak ada ya yang akan kita import komponen Link sini pun kita akan ganti dengan Link kita taruh toolnya ke Slash Oke kita coba kita buka ya Nah ini kenapa begini jadi ngaco nanti kita benerin ya intinya nih kalau ditekan ini sudah bisa mengarahkan ke Path yang dituju baik kita benerin sedikit stylingnya karena dia sudah tidak lagi menjadi elemen button di sini teman-teman kita harus kasih flags device center dan items Center begitupun yang ada di login di sini kita kasih Flag center dan items ya sekarang kita lihat kembali ke browser kita dan kita lihat di sini sudah sesuai selanjutnya teman-teman tentunya kita harus [Musik] menginstall package dari Fire silahkan teman-teman kembali ke Terminal kita silahkan distop aja dulu servernya kita akan lakukan instalasi fire base silahkan jalankan seperti ini NPM install file Silahkan ditunggu sebentar instalasinya mungkin memakan waktu baik kita lihat di sini instalasinya sudah selesai Nah teman-teman untuk menggunakan File base ini kita butuh konfigurasi dari Project fire base kita silahkan kita buka file yang tadi sudah kita register teman-teman silakan ke setting dan pilih Project setting di sini teman-teman silahkan Scroll ke bawah karena kita sudah mendaftarkan tadi sudah mendaftarkan aplikasi web app ya ini teman-teman boleh copy aja ya di sini silahkan di klik copy kita akan kembali ke project kita di sini kita akan tambahkan di dalam src ini teman-teman sebuah file dengan nama file base dot JS m berbeda-beda antara punya saya dengan teman-teman ini boleh dihapus aja jadi di sini kita akan import lagi itu sebuah function dengan nama get out Oke di bawah sini kita bikin sebuah variabel dengan nama out dimana akan menjalankan get out dan masukkan variabel app yang ada di atas ini oke di sini kita coba export aja temen-temen ya export aja out dari get out ini langkah selanjutnya teman-teman silahkan kita ke apps hack di sini kita akan import from titik Slash [Musik] langkah selanjutnya kita akan import dulu kita cek dulu apakah out-nya ini sudah berhasil silakan teman-teman di sini import use effect ini merupakan life cycle ya Kita akan menggunakan website di sini teman-teman kita Panggil use effect dia ada dua ya punya dua parameter yang pertama adalah callback functionnya yang kedua adalah kita buat dari array kosong aja Sekarang kita coba konsol info kita akan kembali ke Terminal kita teman-teman karena tadi setelah menginstal Fire kita belum menjalankannya kembali jadi pastikan kita sudah menjalankan kembali server lokal kita dengan cara NPM dan setelah ini kita akan coba ke browser dan kita refresh di sini sudah muncul banyak objek dari first out selanjutnya kita kembali ke chord kita ini Boleh dihapus saja teman-teman tadi hanya untuk pengecekan aja Apakah sudah berhasil terkonek ke file base kita selanjutnya teman-teman kita kembali ke login di sini kita akan buat sebuah function handle Google login dimana saya akan menggunakan arrow function teman-teman tapi sebelum itu kita akan import beberapa package dari Fire lalu silahkan tekan koma dan kita butuh lagi Sign In With pop up dan kita butuh yang namanya Google out provider oke di sini kita bikin sebuah variabel out dimana dia akan memanggil function get out kita akan bikin lagi providernya gimana kita akan Panggil new Google Aut provider terakhir Kita tinggal panggil aja Sign In With pop up dimana kita Masukin dulu out lalu kita masukin provider Oke jadi Sign In With pop up ini merupakan sebuah promise function jadi dia ada bisa kita tambahkan DNN sini Kita masukin aja risol dan di sini Kita masukin call back function lagi di sini ada error ketika result kita coba dulu console.info Resort 3 error console kita Panggil error di sini Oke kita sudah punya functionnya teman-teman nah function ini kita akan masukin ke sebuah event listener yang ada di button yang ada di sini teman-teman ya yang pertama teman-teman harus kasih di sini dikasih typenya dulu ya ini pastikan typenya ini button selanjutnya dikasih sebuah event listener on Click dimana kita akan Panggil handle Google login Jadi saya buat seperti ini biar rapih ya di sini kasih type button lalu kasih on Click ini boleh dibawa Sebenarnya teman-teman biar rapi aja ya ini [Musik] kelas 6 juga deh oke jadi seperti ini Gunakan Google akan memanggil sebuah handle Google login ini Silahkan buka Browser ini bukan di register ya karena tadi kita masih naruhnya di login silahkan kita kembali ke login dan teman-teman tekan aja Gunakan Google karena tadi kita meletakkan buttonnya tuh di sini Sorry meletakkan functionnya tuh di gunakan Google ini Silahkan di klik lihat ya di sini akan muncul pilih akun boleh teman-teman pilih akun yang teregister ke sini dan kita lihat di sini kita nampilin konsolnya di sini banyak sekali ya Ada out ada Meta data provider di sini juga ada phone number nggak ada tapi di sini sudah ada display name email dan juga foto url yang gini sebenarnya teman-teman sudah berhasil melakukan login dengan Google baik teman-teman ini untuk loginnya sudah berhasil jadi tadi kita sudah coba nah sekarang silahkan teman-teman kembali ke code nya oke yang pertama kita lakukan teman-teman ini di fair base ini sebenarnya nggak usah di export ya Ini tadi kita lakukan hanya untuk melihat apakah si Aut ini sudah jalan tapi harusnya ini udah nggak perlu lagi dan kita kembali ke fjs di sini Nggak perlu impor seperti ini langsung aja jalankan seperti ini jadi langsung aja import.fire login dengan Google button itu juga ada di register jadi kita ke register dulu di sini akan kita lakukan hal yang sama jadi di bagian atas ini teman-teman import dulu ya dari fire base flash out sama seperti tadi kita butuh namanya get out lalu kita butuh Sign In With up ini function yang membuat tadi ya yang muncul pop up tadi teman-teman lalu sekarang kita butuh Google out provider di bagian ini pun kita akan memanggil functionnya kita akan membuat function kita buat dulu variabel out-nya dimana dia akan memanggil get out function yang sudah kita import di atas dan kita buat dulu providernya mana ini kita kasih new Dan tambahkan Google Aut provider jangan lupa simbol parentisnya di sini teman-teman dan langsung aja kita akan jalankan Sign In With pop up Nah teman-teman lihat di sini ada informasinya ya yang pertama kita butuh variabel out-nya ini masukin aja selanjutnya di sini ada providernya Kita masukin juga provider dan ini merupakan sebuah promise jadi kita ada dan ada di dalam dan teman-teman kita akan tambahkan sebuah arrow function yang di dalamnya ada result di dalam cache sama di sini dalamnya ada R Coba kita konsol info dulu ya teman-teman ini harusnya tadi saya menggunakan konsol error Kalau yang di login tadi salah saya ya harusnya konsol error jangan konsol info dua-duanya selanjutnya ini sudah jadi functionnya tinggal kita letakkan di Gunakan Google di sini jangan lupa ini penting teman-teman typenya tipenya harus kita kasih button Kenapa karena kalau enggak dia akan mengeksekusi formnya dan di sini kita kasih on Click handle Google register seperti ini teman-teman sekarang kita coba langsung aja kita ke register dan tekan Gunakan Google ya info ini sama akan muncul ya Nah kalau ini tadi kita di bagian sini resort.user Artinya kita ingin melihat usernya aja kita refresh kita coba lagi oke di sini yang muncul hanya objek usernya aja baik teman-teman sekarang kita coba cek ke file basenya apakah sudah ada user masuk Nah Lihat Ya silahkan teman-teman ke autentification dan ke tab user ini harusnya sudah ada satu email masuk di sini ya seperti itu artinya kita sudah berhasil melakukan sign in dengan pop up menggunakan Google provider Nah selanjutnya tentunya kita di sini aplikasi kita masih belum bener ya karena begitu udah berhasil sign in screen-nya masih di sini Harusnya kita ubah screennya ke dashboard dan nanti di dashboard kita akan coba dapatkan data dari user yang sudah Sign in ke Google maksud saya yang sudah sign in menggunakan Google provider silahkan kita kembali ke chord kita teman-teman Sekarang kita coba di login dulu ya di sini tadi ketika kita sudah berhasil menggunakan sign in with pop up ini ini kita hanya Baru melakukan console info dari result usernya ini nah Seharusnya di sini kita harus mengganti screen nya itu ke screen dashboard Oke silahkan teman-teman di bagian atas ini kita akan import dari proyek routerdom sebuah function dengan nama use navigate di bagian sini kita akan bikin variabel dengan nama navigate gimana ini kan memanggil function use navigate selanjutnya di sini kita tulis saja navigate ke slash dashboard Sekarang kita coba teman-teman ke browser kita lihat ke browser ya kita lakukan Gunakan Google kita akan login menggunakan Google di klik aja oke di sini Kita sudah lihat kalau setelah login tadi screen Akan berpindah ke dashboard akan tetapi teman-teman data di sini itu masih menggunakan Static data maksudnya apa teman-teman kita lihat di dashboard ini kita masih ngetik sendiri nih emailnya di sini pun emailnya salah ya harusnya ya karena sebenarnya Harusnya itu emailnya adalah jemblongan Vale tapi di sini masih Fadly sales karena apa Karena di sini kita masih menggunakan Static data Sekarang kita coba untuk menyesuaikan data-data ini sesuai dengan user yang sudah login menggunakan Google provider silahkan teman-teman kembali ke login Oke tadi di sini kita hanya melempar aja ya ke dashboard Nah untuk saat ini kita akan gunakan dulu yang namanya local storage Nah karena kita belum belajar yang namanya Global state jadi kita menggunakan aja dulu local storage pertama teman-teman di sini kita akan simpan jadi ketika user berhasil login berhasil login menggunakan Google provider di sini kita akan simpan data resultnya ini result usernya ini ke local storage caranya seperti apa mudah aja teman-teman silahkan jalankan seperti ini set item oke di sini akan kita kasih nama aja user lalu parameter kedua ini kita isi dengan Jason dot string WiFi karena kita sama-sama tahu kalau local storage itu hanya bisa menyimpan data berupa string jadi di sini kita rubah dulu Resort usernya ini dengan Jason Sky sedangkan teman-teman masukkan risol baik kita coba buka browser kita kembali ya ini kita coba aja ke Slice dulu teman-teman di sini Sekarang kita coba Gunakan Google untuk login [Musik] Oke sudah berhasil terlempar di sini ke dashboard ya Nah sekarang teman-teman silakan cek di application lalu ke local storage di sini sudah ada sebuah kisah dan ada valuenya nih diklik aja valuenya ini kita sudah dapat nih detail dari user yang sudah login menggunakan Google provider jadi nanti data di sini Kita akan ambil dari local storage yang sudah kita punya Sekarang kita coba kembali lagi ke VSCO teman-teman Nah sekarang kita ke file dashboard di sini sebelumnya kita akan import di dalam objek teman-teman ini yang kita import adalah use State dan use effect untuk teman-teman yang belum tahu mengenai efek Saran saya silahkan buka video javale mengenai komponen life cycle dan Hook oke nah pertama di sini kita akan buat stepnya dulu saya buat stepnya nih user set user di sini saya akan Panggil used yang saya isi kosong aja dulu dan di sini kita akan Panggil komponen life cycle ya use effect biosafect ini ada dua parameter yang harus kita isi teman-teman yang pertama adalah efek callbacknya dan danpendency List di dalam efek allback ini kita akan set user oke yang kita ambil dari local storage get item user nah tapi kita tahu kalau local storage item ini merupakan sebuah string sedangkan kita butuh objek javascript nah Oleh karena itu di sini teman-teman kita Cut dulu kita jalankan dulu yang namanya ini function parts ini baru langsung aja kita masukin local storage get item user selanjutnya kita ke bagian bawah kita tahu kalau data di bawah sini ini masih menggunakan Static data Nah kita coba ganti si email ini sekarang kita panggil aja step user dan kita ambil emailnya akan tetapi kalau seperti ini teman-teman ini bisa aja menyebabkan error karena bisa jadi user ini masih merupakan sebuah nol ya atau datanya belum ada atau datanya belum diisi Nah ini teman-teman bisa kasih tanda tanya seperti ini artinya ketika user sudah masuk datanya atau dia true ya kalau udah ada datanya kan berarti true ya maka ambil sebuah properti email tapi kalau belum ada ya udah nggak usah diambil nah begitupun di source ini teman-teman di source ini kita akan ambil user tanda tanya titik dan foto URL seperti ini Oke sekarang kita coba lihat kita akan coba ke browser kembali dan teman-teman lihat di sini sudah masuk ya Sesuai dengan data di local storage kita emailnya ngambil dari email lalu di sini ada foto url nya ini akan diambil dan diletakkan di Image ini selanjutnya function yang belum kita buat adalah log out teman-teman di sini jadi kita buat dulu mumpung kita masih ada di dashboard silahkan kita kembali untuk logout teman-teman kita akan melakukan import sama ya dari fire base out kita butuh get out dan sign out Oke di bagian sini kita tulis aja no out function kita akan bikin sebuah function dengan nama handle logout saya menggunakan arrow function ya teman-teman Nah di sini kita akan deklarasikan dulu sebuah variabel dengan nama out dimana kita isi dengan get out function selanjutnya kita tinggal panggil aja sign out Nah di sini Butuh out ya kita masukkan aja ini juga sama promise jadi kita kasih dan di sini dan ada masukin aja resortnya Nah di sini ketika user sudah melakukan log out Ini pertama yang akan kita lakukan adalah melakukan local storage.clear karena di dalam local storage kita tadi ada data user jadi harus kita clear terlebih dahulu teman-teman selanjutnya kita harus pindahkan screen nya lagi ke login atau ke register Nah di sini kita butuh use navigate dari reclutter Dome ini nah di atas ini kita deklarasikan dulu aja seperti ini teman-teman Nah kita kembali ke dan yang result ini Kita tinggal panggil aja navigate lalu kita masukkan ke Slash ketika ada error kita akan panggil lagi callback konsol error masukkan variabel R Oke jadi functionnya sudah selesai kita buat dan function handle ini akan kita letakkan di sebuah button logout yang ada di bawah sini Misalkan teman-teman tambahkan sebuah event lestener on Click dan masukkan di dalamnya handle seperti ini function untuk handle Sekarang kita coba buka browser kita ini lihat ya kita masih ada di application Di sini masih ada data user di local storage harusnya ketika kita tekan logout ini ini akan ke clear ke destroy hilang dan screen yang akan dipindahkan ke slash kita coba lihat Nah teman-teman bisa lihat di sini sudah tidak ada data user di local storage dan screen-nya ini dikembalikan ke Slash akan tetapi teman-teman kalau kita perhatikan ini masih ada baknya ya artinya ketika misalkan user langsung ke dashboard ini bisa walaupun image sama emailnya ini belum muncul tapi ini masih ada bug di sini Jadi kita akan Benerin dulu baknya dengan menggunakan conditional rendering di Roads kita silahkan teman-teman kembali ke Visual Studio code kita dan kita akan buka sebuah file dengan nama fjs di sini ya Nah di sini teman-teman pastikan kita akan mengimport ya Yang pertama adalah used dan yang kedua adalah use effect kita akan gunakan dua yang pertama used dan yang kedua ini adalah use effect selanjutnya di sini kita akan buat stepnya pertama ini adalah state untuk is login set is login dan ini kita akan kasih used dengan inisial step false jadi defaultnya adalah false berikutnya kita buat juga yang namanya loading selanjutnya set loading kalau ini sama pakai juga cuman inisial stepnya adalah truk selanjutnya di sini kita akan Panggil use effect ini dengan dua parameter parameter pertama adalah efek callbacknya dan ini Rey kosong ya ini disebut Dependency list oke Nah di sini teman-teman ya bisa kita bilang ini adalah komponen life cycle ya gimana [Musik] begitu si komponen-komponen ini ke load kita akan lakukan pengecekan apa yang kita cek yang kita cek adalah current user atau user yang sudah terdaftar di aplikasi kita Nah ini bisa kita cek ini kita akan impor ya dari fire out dimana disini kita akan import yang pertama adalah get out selanjutnya On out state change silahkan teman-teman import 2 ini dari file oke di usafect ini teman-teman kita akan deklarasikan dulu sebuah variabel Aut dimana kita isi dengan function yang sudah kita import tadi bernama get out di sini kita akan panggil aja On Stage Ini pertama kita butuh out-nya Ya udah masukin aja lalu koma ini di sini kita kasih sebuah callback yang di dalamnya ini ada result kita coba dulu konsol info si Resort Oke jadi seperti ini teman-teman kita coba cek di Browser di sini ada dua ini nol ya nol karena ini nggak ada usernya nggak ada datanya Nah coba kalau sekarang kita login dengan Google Oke Nah di sini akan muncul Resort ini kita bisa ambil di sini teman-teman akan muncul di sini kita cek lagi ya Ini bener ini nggak Mas Coba aja di sini teman-teman kasih aja Resort gitu ya lalu koma kita save dan kita cek lihat ya kita clear lagi coba kita ke flash tetap dia akan muncul ketika user sudah login sebenarnya di result ini udah ada datanya ini ada email ada akses token gitu ya Ada foto url dan lain-lain jadi dari result Inilah kita bisa cek Apakah user ini sudah login apa belum kalau belum Kan tadi resortnya adalah nol Ya coba kita logout dulu tuh kalau user belum login di sini reselletnya 0 teman-teman Nah berarti ini bisa kita jadikan conditional rendering di sini kita bisa tulis if result jika ini Resort ini ada datanya ya atau bukan 0 gitu maka kita kasih set kiss login kita ganti menjadi true Oke ini bisa kita Return Nah di sini juga kita Tambahkan lagi nih set loading kita ganti menjadi false Ini untuk apa nih Mas nanti loading ini kita akan peruntukan untuk membuat sebuah screen loading dulu ya Tapi nggak papa di sini ditulis dulu aja nanti kita akan implementasikan oke di sini kita tambahkan set Yes login kita kasih false selanjutnya set loading kita tutup nanti menjadi false loading ini harus selalu dijadikan false biar screen loadingnya nanti itu ke destroy Nah selanjutnya kita akan buat conditional rendering pertama untuk si loading ini ya silahkan di sini teman-teman [Musik] if loading maka silahkan return sebuah Deep ini langsung aja di sini saya kasih aja gini loading di sini saya kasih class name pertama ini ada white screen dan H screen itemnya kita kasih senter juga Oke ini loading Ini pertama untuk screen loadingnya teman-teman ya atau ini boleh di cut dulu dikasih parentis aja biar lebih rapi seperti ini jadi ketika loading ini nilainya adalah true maka dia akan selalu meritten gif ini teman-teman oke nah ketika sudah false maka akan ke sini kita coba lihat ya refresh tuh jadi cepet ya tuh Nah sekarang nih untuk bisa ngelihatnya kita kasih trotting aja nih ke Network di sini teman-teman bisa ngasih bisa ngasih yang namanya trotting Nah di sini kita gunakan slow 3G kita Coba refresh menjadi pelan loadingnya jadi pelan tuh lihat ya dia akan menampilkan loading dulu baru menampilkan si screen login ini kita kembalikan menjadi 0 crotting crot crot Link gitu ya Tapi tetap kelihatan walaupun sebentar oke di sini Kita sudah berhasil menambahkan screen loading teman-teman Nah selanjutnya kita butuh conditional rendering lagi di root ini artinya untuk user-user yang belum login itu nggak boleh kita kasih ke dashboard berarti teman-teman di sini kita coba Cut dulu Oke Nah di sini kita kasih sebuah fragment karena kita tahu kalau reak itu hanya bisa melakukan return ke sebuah parent komponen artinya dia nggak boleh ada dua parent komponen makanya kita kasih fragmen seperti ini aja dulu di sini teman-teman kita kasih logic untuk pengecekan Apakah user sudah login atau belum Oke di bawah sini kita kembali jika is login gitu ya oke kita kasih tanda tanya seperti ini ini artinya jika is login atau jika is login ini nilainya true maka render Elemen Ke dalam sini tapi jika false maka render Elemen Ke dalam sini ya ini boleh di enter disini saya paste yang tadi saya cut begitupun di bagian bawah nih teman-teman saya Enter dan saya paste sama aja nggak papa udah dua-duanya sama Mas nggak papa ntar dulu ya oke berarti kita punya dua di sini punya pengkodean ya ketika login nah ketika login ini teman-teman yang boleh diakses user yang mana aja ketika sudah login harusnya login screen dan register screen ini nggak perlu ya Jadi kita delete ini nah tapi ini kan falsenya di sini ya ketika belum login yang gak boleh adalah dashboard Silahkan di delete yang root ke dashboard seperti ini nah tapi ini belum lengkap teman-teman Nah kita lengkapi dengan cara ini bagian atas di copy aja ini petnya silahkan diganti dengan bintang jadi apapun Path yang user masukan atau URL yang user masukan dia akan tetap ke sebuah komponen page dengan nama dashboard begitupun di bagian bawah ini kita akan bikin apapun url yang user masukan ini akan masuk ke register selain dari root atau Path yang sudah kita tentukan gitu ya ini ditambahkan [Musik] ini dikasih Bintang Nah sekarang kita lihat teman-teman ke halamannya lihat ya di sini belum login ya kan makanya dia masih di halaman ini register bisa sekarang kalau kita coba ke Arahkan ke dashboard ya dia akan tetap ke page register karena apa Karena tidak diperbolehkan ketika user belum login dia tidak diperbolehkan untuk mengakses dashboard ini gitu ya Nah sekarang kita coba login dengan Google tentunya di klik tunggu sebentar login dan kita masuk ke dashboard data dari user di sini sudah ditampilkan semua Sekarang kita coba lagi Bisa nggak nih kalau ke login nggak bisa atau ke flash nggak bisa ke register juga nggak bisa karena apa Karena user sudah login teman-teman Kalau user sudah login dia tidak diperbolehkan lagi mengakses register page atau login page tapi kalau kita tekan logout di sini ini bisa yang nggak bisa sekarang adalah dashboard seperti itu kurang lebih logicnya teman-teman untuk login menggunakan fire base atau menggunakan Google provider ya walaupun Sebenarnya ada satu lagi yang bisa kita gunakan sebenarnya kita di sini tadi sudah nambahkan sign in methodnya itu juga dengan menggunakan email dan password itu ya tapi di sini kita sudah bisa menggunakan Google untuk login ke aplikasi kita [Musik] baik teman-teman silakan kita kembali ke chord Kita sekarang kita akan fokus ke register jsx Silahkan buka register jsx ini ada di page ya page lalu register CSX ini saya sembunyikan dulu Nah di sini kita tahu kita hanya baru punya sebuah function handle Google register di sini nah ini dikoneksikan ke Gunakan Google ini Ini sama kayak yang seperti di login ya teman-teman Oke ini sebenarnya nama functionnya salah nih harusnya handle Google login ini saya ganti aja ya cuman ada dua saya ganti menjadi handle Google login nah pastikan ini yang di bagian bawah sini juga kita ganti karena memang dia login bukan register nah sekarang yang mau kita buat baru sebuah function dengan nama handle Google register Nah di sini teman-teman kita akan mengimport sebuah function dari Google dengan nama sign in with email and password jadi Silahkan teman-teman import sama ya dari fire base out ini sebuah function dengan nama Sign In With email and password Oke Nah di sini kita buat functionnya Google register Nah karena ini akan dijalankan dari event listener submit dari sebuah form di sini saya masukin parameter e aja ya atau event ya yang pertama kita perlu stop preven default ya atau stok dari default dari si foam ini di mana dia akan mereload page jadi kita tulis seperti ini edot prevent default selanjutnya kita perlu menangkap beberapa value dari elemen-elemen input yang ada di form kita pertama kita akan nangkep nih kita kasih aja nama variabelnya email dimana dia akan nangkap dari Edo target.email.value ini kita copy aja selanjutnya di sini kita ganti dengan password dan yang di bagian bawah ini kita ganti dengan password 2 Oke selanjutnya di sini kita kasih validasi sederhana aja teman-teman if jika not email or not password or not password 2 maka kita akan Return silahkan lengkap seperti itu password tidak sama dengan password 2 maka kita akan Return password harus sama oke satu lagi mungkin if password .elang ini lebih kecil dari 6 misalnya gitu teman-teman ya password harus lebih besar paspor harus lebih dari karakter dan ketika semua validasi ini lengkap sebenarnya nanti kita bisa pakai package ya buat hal-hal semacam ini yaitu punya yang namanya reform ada fork dan lain-lain Ya tapi ini basic aja kita pakai yang basic aja dulu seperti ini Nah selanjutnya kalau sudah di sini kita akan bikin sebuah variabel lagi variabel out teman-teman dan di sini langsung aja kita Panggil Sign In With email and password sini Butuh out ya selanjutnya ini email Kita masukin variabel email selanjutnya kita masukin variabel password Oke dia sama merupakan sebuah promise jadi kita kasih dan dan Cage di sini ketika DM kita kasih sebuah follback function Kita masukin aja di sini user ke error Kita masukin juga ke dalam callback function Kita masukin aja ke dalam variabel Nah di sini sama teman-teman ketika usernya ini akan meritten data user di sini kita coba aja dulu ya console .info user oke nah ketika error konsol masukin aja variabel Nah kita lihat functionnya sudah kita buat tapi ini belum dijalankan ya dijalankannya Di mana silahkan teman-teman Scroll ke bawah di sini ada form kita kasih sebuah eventliner on submit lalu kita Panggil sebuah function handle Google register kita save dan kita coba lihat ke tampilan Browser sini teman-teman register saya menggunakan sebuah extension ya ini data dummy ya jadi saya tinggal masukin aja oke lalu kita Tulisannya masih login ini ada error silahkan kita kembali sedikit ke bawah Nah di sini juga lupa teman-teman oke pertama nih masih ada error ya di sini harusnya register dan teman-teman di sini buttonnya ini dikasih aja tipenya adalah tipe submit ya ininya register dan Ini tipenya tipe submit kita kembali ke sini kita isi dengan email password kita coba dulu ya coba dulu nggak lengkapi dia bilang silahkan lengkapi data Oke sekarang kita lengkapi tapi passwordnya cuman 2 password harus sama ini nggak Sama ya sekarang sama nih sama tapi passwordnya cuman dua password harus lebih dari 6 karakter berarti validasi ala-ala kita tadi udah jalan ya sekarang kita isi yang benar di sini sekarang kita register dan kita lihat ya Ini ada dua error user not found Aduh ini saya salah teman-teman harusnya bukan sign in tapi create usert with email and password sign in ini nanti akan kita pakai di login di login ya bukan di sini kalau di sini yang kita gunakan adalah create user with email and password di sini berarti kita ganti nih di bagian bawah bukan Sign In With email and password tapi create user with email and password Oke sorry ya kebalik-balik Sekarang kita coba lagi ini kita Refresh dulu Kita masukin data baru kita coba register Nah info Nah lihat ya Ini sudah masuk kita sudah diarahkan ke dashboard tapi memang karena kita belum lempar apa-apa di sini teman-teman ya di sini baru user doang di sini dan sebenarnya usernya Ini udah masuk tapi yang kita belum lakukan adalah menambahkan ke local storage di user ini kita baru konsol doang nih ya kita baru konsol doang di sini usernya udah masuk sebenarnya Tapi karena nggak ada ya di lokal storage coba aja cek di lokal storage belum ada jadi dia nggak dianggap di sini datanya nggak muncul gitu ya jadi ini masih ada yang harus kita benerin oke nah sekarang di sini kita coba tambahin local storage dan ini Harusnya bukan user ya karena dia biasanya Coba deh [Musik] ini juga ganti Resort .irshot ini ada nih Nah sekarang kita tambahkan ke local storage set item namanya harus sama ya teman-teman yaitu user dan di sini kita tambahkan Jason seperti ini contoh konsolnya Boleh dihapus aja lah biar nggak kebanyakan konsol Oke Nah selanjutnya kita coba log out dulu Sekarang kita akan ke register dan kita Masukin Email Sekarang kita coba jalankan register harusnya lokal Sore sudah menyimpan data user ini coba ya oke masuk emailnya masuk nah tapi teman-teman ketika kita melakukan create user dengan email dan password ini Dia tidak punya Avatar gitu ya Dia tidak punya Avatar jadi dia nggak muncul gambarnya di sini gitu teman-teman tapi ini kita sudah berhasil Coba aja kita lihat ke file base kita ini di refresh lihat ya sudah ada dua email yang masuk seperti itu Nah sekarang tinggal kita buat fungsi untuk login ini kurang lebih sama ya kita akan ke login di sini handle Google login kita akan buat lagi sebuah function [Musik] Tapi sebelumnya nih biar nggak lupa ya kita import dulu ya jadi sign in email and password di sini Once handle email password login kita akan bikin sebuah function ini sama karena ini dari sebuah form kita tambahkan sebuah event sini kita kasih sama e.prise selanjutnya kita akan tangkap close = target.email.com Langsung aja kita Panggil Sign In With email and password di sini kita butuh out lalu koma [Musik] masukin emailnya lama lagi masukin passwordnya dia juga merupakan sebuah promise ini media terjadi kesalahan garis ini sama kurang lebih seperti ini ya bisa teman-teman copy nih dari yang handle with handle Google login ini bisa dicopy aja dari atas ya Sama persis bedanya adalah metode sign apa sign in nya yang berbeda kalau di sini kita menggunakan sign in with email and password kalau di atas Sign In With Sign In With pop up Oke seperti ini Kita masukin functionnya ini dulu ke form on submit handle email password login oke ini sekarang kita kembali ke login nih di logout dulu aja sekarang kita register dulu kalau tadi saya nggak tahu passwordnya nih passwordnya apa dia nggak tahu ya kita bikin password dulu aja coba register Oke sudah masuk ke sini usernya udah ada ya ini bawah oke lalu kita coba logout kita login Emailnya apa lagi tadi ini saya copy di sini udah masuk ya kita copy lagi ke sini passwordnya pakai password kita tadi kita coba login dan berhasil jadi seperti itu teman-teman kita sudah bisa menghandle dua jenis login login yang pertama kita menggunakan provider Google jadi menggunakan Google provider dan yang kedua ini kita menggunakan email dan password silahkan teman-teman cek otentication yang di user nih ini sudah ada Jadi kalau yang simbolnya simbol email doang Ya ini menggunakan email aja sama password tapi kalau yang simbolnya Google ini dia menggunakan sign in web pop up dan menggunakan provider Google Oke jadi seperti itu cuman kekurangannya di sini tidak ada Avatar ya atau tidak ada foto url ketika kita menggunakan sign in dengan email dan password seperti itu teman-teman aplikasi sederhana kita tadi kita sudah buat dengan react JS dan fire base untuk meng-handle user kita Saya rasa materi ini sangat bermanfaat karena kalau teman-teman perhatikan hampir semua aplikasi sekarang sudah menggunakan metode seperti ini tidak lagi user data itu harus kita yang handle kurang lebih seperti itu teman-teman materi untuk hari ini silahkan diimplementasikan ke aplikasi yang sudah teman-teman miliki Saya rasa materi ini sangat bermanfaat jadi Silahkan di share dan ketika misalkan teman-teman ada pertanyaan silahkan menghubungi aja nomor yang saya sertakan di kolom komentar untuk linknya juga saya sertakan jadi ada beberapa Link yang saya sertakan di kolom komentar pertama adalah link YouTubenya pastinya selanjutnya ada link desainnya dan saya juga sertakan link nomor telepon jadi ketika teman-teman ada pertanyaan Feel Free aja untuk mengkonteks saya untuk menanyakan terkait materi kita hari ini Oke saya ucapkan terima kasih sudah menyaksikan channel YouTube javaley jangan lupa share subscribe dan Nyalakan loncengnya jangan lupa komen juga sampai ketemu di materi-materi yang tentunya akan sangat menarik nantinya dan saya ucapkan Akhir kata terima kasih selamat malam