Cara Membuat Authentikasi Dengan Firebase Part 1

Halo semuanya sekarang kita akan masuk kebagian yang sangat menarik dari firebase yaitu authentikasi. Tentu ketika teman teman sedang membuat aplikasi mau itu website ataupun mobile pasti didalamnya terdapat fitur register users login, logout dan lain sebagainya nah itu semua akan diurus sama firebase. Pokoknya keren deh. jadi silahkan teman teman kunjungi halaman dashboardnya pilih bagian authentication

Tentu masih diproject yang sama yaitu firebasic. klo teman teman buka maka data awalnya masih kosong karena kita belum mempunyai user sama sekali. Silahkan kalian kebagian tab sign-in method. 

Disini ternyata ada beberapa provider yang bisa kalian gunakan tidak hanya email dan password 

Tapi kalian juga bisa melakukan authentikasi melalui social media seperti google gmail 

Atau facebook, twitter, githubnya dan masih banyak lagi yang firebase mudahkan diawal untuk melakukan authentikasi

Tentu setiap provider punya caranya masing masing. Nah untuk sekarang yang akan kita praktekkan adalah sign in dengan email dan passwordnya di klik saja untuk mengaktifkan provider email dan password

Setelah itu disimpan settingannya

Kalo seandainya statusnya masih disabled berarti teman teman akan mendapatkan error walaupun sudah menulis kodenya. Pastikan di enabled dulu kalo ingin memperbolehkan melakukan authentikasi dengan email dan password atau dengan provider yang lainnya. Tugas berikutnya dibagian tampilannya sangatlah sederhana saya sudah sediakan form untuk memasukkan email dan password 

Lalu bisa pilih register ataupun login 

dan ada satu tombol logout yang defaultnya tersembunyi setelah diberikan class hidden

Disini saya sudah siapkan semuanya silahkan download di link berikut

Download

Jadi siapkan dulu struktur templatenya supaya teman teman bisa mengikuti tutorial ini. kita buka yuk struktur htmlnya kebagian text editor. Saya akan jelaskan sedikit apa saja yang sudah saya lakukan disini. Pertama ada style css yang saya berikan margin 5% dan jenis tulisan sans serif

Lalu ada satu class hidden nilainya display none

Intinya dibagian strukturnya ada dua input text dengan id berbeda beda

dan dua tombol button yang salah satunya diberikan id namanya register-btn

Pastikan nama idnya unik. tentu semuanya dibungkus didalam sebuah form. Idenya sendiri pada saat users submit form login, terus users berhasil login maka form beserta tombol loginnya akan disembunyikan dengan diberikan class hidden. Nanti kita akan mainkan domnya tergantung kondisi dari usersnya.