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

Cara-Membuat-Authentikasi-Dengan-Firebase-Part5-01

Maka kita harus tangkap parentElement dari link logoutnya sebagai berikut

Cara-Membuat-Authentikasi-Dengan-Firebase-Part5-02

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

Cara-Membuat-Authentikasi-Dengan-Firebase-Part5-03

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

Cara-Membuat-Authentikasi-Dengan-Firebase-Part5-04

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.

Cara-Membuat-Authentikasi-Dengan-Firebase-Part5-05

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

Cara-Membuat-Authentikasi-Dengan-Firebase-Part5-06

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

Cara-Membuat-Authentikasi-Dengan-Firebase-Part5-07

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

Cara-Membuat-Authentikasi-Dengan-Firebase-Part5-08

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

Cara-Membuat-Authentikasi-Dengan-Firebase-Part5-09

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

Cara-Membuat-Authentikasi-Dengan-Firebase-Part5-010

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

Cara-Membuat-Authentikasi-Dengan-Firebase-Part5-011

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 

Cara-Membuat-Authentikasi-Dengan-Firebase-Part5-012

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

Cara-Membuat-Authentikasi-Dengan-Firebase-Part5-013

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 

Cara-Membuat-Authentikasi-Dengan-Firebase-Part5-014

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 

Cara-Membuat-Authentikasi-Dengan-Firebase-Part5-015

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

Cara-Membuat-Authentikasi-Dengan-Firebase-Part5-016

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

5 Februari 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat