Netflix Clone Menggunakan NextJs dan Tailwind | Part 8

Halo temen-temen, untuk implementasi dari custom hook yang sudah dibuat pada part 7 akan dibahas pada part ini, sudah siap untuk tempur ngoding lagi?

Langkah pertama, ubah file pages/_app.js agar bisa akses useAuth hooks. Ini memakai konsep HOC yang merupakan singkatan dari High Order Component. Tentunya konsep ini tidak akan dibahas disini, jika ingin dibahas boleh comment yaa..

Buka file pages/login.tsx lalu import useAuth dan seperti yang kita lihat, sekarang bisa akses semua function dari useAuth hooks
Lalu ubah seperti dibawah ini
Pastikan sudah jalankan npm run dev di console, dan akses login page, lalu login. Tentunya akan muncul alert error auth/configuration-not-found karena belum turn on authentication di firebase 
Masuk ke halaman Authentication di console.firebase dan klik Get Started
Klik email & password untuk metode login yang kita gunakan
Enable toggle email/password dan klik save
Pastikan status nya enable
Refresh login page, isi email dan password dan klik button Sign In. Sekarang alert error muncul dengan pesan auth/user-not-found, itu karena kita belum signUp
Saat ini kita masih belum bisa akses home page, karena akan redirect kembali ke halaman login. Agar bisa login, klik Sign up now, tunggu beberapa detik sampai muncul home page. Itu berarti proses signUp berhasil

Di firebase, ada 1 user terdaftar
Buka file components/Header.tsx, tambahkan code berikut untuk menggunakan fungsi logout
Comment tag Link dan tambahkan onClick logout
Refresh halaman, dan click icon yang ditunjuk tanda panah, muncul halaman login pertanda proses logout kita berhasil. Untuk melihat apa yang terjadi saat proses bisa buka Kembali file hooks/useAuth di function logout.

Boleh bangett untuk liat code lengkapnya di link ini netflix_auth

Good job!! fitur Sign In, Sign Up, dan Logout sudah berhasil dibuat.
Tunggu part selanjutnya yaa..










0 comments: