Cara Membuat Authentikasi Dengan Firebase Part 5

Halo teman teman DUMET School. Kita lanjutkan kembali pembahasan tentang cara membuat authentikasi dengan firebase bagian ke lima dimana kali ini kita akan membuat proses logout.. Tapi sebelum kita masuk ke fungsi logout lakukan manipulasi DOM untuk menyembunyikan tombol login dan register. Jadi logikanya seperti ini ketika kita sudah melakukan signup maka kondisi users sekarang berhasil masuk begitupun datanya sudah didaftarkan berarti kita bisa memberi tahu tolong dong tampilkan tombol logoutnya. Untuk melakukan itu kita bisa referensikan button logoutnya karena strukturnya seperti ini

Maka kita harus tangkap parentElement dari link logoutnya sebagai berikut

Lalu disambung dengan metode classList dot remove artinya kita hapus class hiddennya

Yang dimana button logout defaultnya ada class hidden yang css display nya dikasih nilai none 

Sedangkan untuk tombol yang lainnya tambahkan class hidden dengan menuliskan classList dot add artinya tombol login dan register akan dihilangkan. Supaya lebih mudah kita tambahkan class hiddennya langsung di bagian form loginnya.

Nah kebalikannya pada saat kita logout kita mau sisipkan class hidden di tombol logout terus form login dan registernya di remove class hiddennya

Jadi logikanya tinggal dibalik saja. Karena tombol logout bentuknya link maka kita berikan object di fungsi callback untuk menuliskan preventDefault

Setelah itu baru jalankan metode signOut dari firebase authnya untuk melakukan proses logout

Tapi kita pun bisa menambahkan then promise ketika state nya berhasil diproses

Jika sudah kita coba clear semuanya seperti biasa masukkan data yang valid lalu klik login. Berikut ini hasil responsenya

dan yang paling penting tombol logoutnya sudah tersedia sedangkan kedua tombol yang lainnya dihilangkan

Tapi masalahnya kalo saya reload halaman class tersebut kembali ke awal. kenapa? karena kita belum mengecek state atau keadaan apakah kita dalam keadaan login atau belum. Untuk itu sebelum kita akhiri artikel kali ini saya wajib memberikan satu metode lagi yang namanya onAuthStateChanged 

Dimana fungsi ini selalu mengontrol dan melihat perubahan dari usernya yaitu apakah kondisi usersnya saat ini masih login atau tidak. Tentu parameternya berupa function yang menerima data user

Simplenya kita bisa cek apakah data usersnya ada? kalo ada, berarti dia berhasil login return response profile usernya tapi sebaliknya kalo usersnya kosong atau usersnya dalam keadaan logout 

Tampilkan saja pesan "silahkan login". Tidak hanya itu pada kasus ini yang mau kita lakukan bila berhasil login adalah menampilkan tombol logoutnya dan menghilang form login registernya 

Sedangkan kalo usernya kosong maka hilangkan tombol logoutnya dan menampilkan form login register

Disini kita bisa melakukan refactor kodenya yang dihandle disatu method dimana teman teman bisa buat function khusus untuk menghandle dom dalam hal menghilangkan dan memunculkan sebuah elemen. Jika kita buktikan sekarang kita simpan dulu semuanya teman teman boleh login dengan akun yang valid dan pastikan fungsi sebelumnya masih tetap berjalan. Jika berhasil dia masuk kebagian if menampilkan object user tapi klo saya logout maka masuk ke bagian elsenya yang mana form login akan kembali tampil. Cukup itu saja. Kita sudah mempelajari 4 method utama dalam melakukan basic authentifikasi. Terima kasih