Apa saja yang akan dibahas?
Dari awal sampai dengan pembelajaran kita sebelumnya, kita fokusnya di dasar react dan konten saja bukan?
Nah, tapi, pada aplikasi yang umumnya dibuat, umumnya tidak seperti itu bukan?
Minimal pasti ada saja aplikasinya yang meminta kita untuk memasukkan "tanda pengenal" di dalam aplikasi yang digunakan
Nah proses seperti ini adalah sesuatu yang bernama otentikasi (Authentication)
Suatu proses untuk menentukan si seseorang itu benar benar seseorang atau bukan.
Umumnya untuk membuat Authentication ini, kita membutuhkan suatu server untuk membuat BackEnd (bagian belakang dari suatu aplikasi)
Serta segala macam teknologi dan infrastruktur di balik layarnya (e.g. NodeJS dengan ExpressJS + Database PostgreSQL + Logic tentang keamanan yang cukup baik agar tidak mudah dijebol)
Namun, Apa daya kita sebagai seorang FrontEnd-er ?
Masa harus belajar BackEnd dulu baru bisa membuat aplikasi dengan Authentication ini?
Tenang, Firebase datang menyelamatkan kita !
Firebase, kalau diterjemahkan harafiah, Basis Api, kalau disingkat... jadinya FB?
Oh ! Berarti ini adalah produk sosial media bikinan Meta?
Tentu saja, bukan !
Mari kita coba untuk buka dokumentasi sebuah produk yang bernama Firebase di sini yah !
Jadi sudah tau Firebase itu apa?
Ya, ini adalah produk buatan Mbah Google, yang dikhususkan untuk mempercepat developer / perusahaan dalam membuat aplikasi, baik berbasis web ataupun berbasis mobile.
Firebase ini sebenarnya adalah kumpulan dari produk-produk yang dikhususkan untuk merancang aplikasi
Beberapa produk yang dimaksud adalah:
Nah pada pembelajaran ini yang akan kita gunakan adalah Firebase Authentication:
Mari kita coba untuk membuka dari halaman produknya di sini
Jadi setelah melihat halaman dokumentasinya ini, kita akan mengetahui beberapa hal tentang Firebase Authentication
Pada pembelajaran ini kita akan mencoba untuk menggunakan:
Authentikasi berbasis email dan password dari Firebase Authentication SDK saja (tidak menggunakan Firebase Authentication UI)
DISCLAIMER: dalam aplikasi yang kita buat ini, kita juga akan menggunakan hooks tambahan yang didesain untuk mempermudah kita dalam menggunakan Firebase, yaitu react-firebase-hooks
Ini berisi kumpulan Hooks yang digunakan untuk memudahkan kita berbasis Firebase
Yang digunakan adalah sebuah hooks dengan nama useAuthState
Untuk dokumentasi dari react-firebase-hooks-nya dapat dibaca di sini yah
Dan untuk dokumentasi terhadap useAuthState dapat dibaca di sini yah
Sebelum kita memulai demo ini, kita harus melakukan inisialisasi dulu terhadap project Firebase yang akan digunakan
Langkah inisialisasi project Firebase adalah sebagai berikut
Yuk kita langsung demo menggunakan Firebase Authentication + React !
Untuk demo ini kita akan menggunakan referensi dari LogRocket dan dokumentasi Firebase Authentication-nya langsung yah !
Untuk langkah demonya adalah sebagai berikut:
Seluruh kode yang dituliskan sebelumnya, dapat dilihat pada link berikut yah
Sampai di titik ini kita sudah berhasil untuk membuat seluruh logic yang kita inginkan dengan baik
Tapi ada sesuatu yang cukup mengganjal:
Apabila nanti ingin menambah Component / Page lagi, useEffect yang dibuat harus dituliskan ulang lagi yah?
Mubazir sekali yah !
Bagaimana cara untuk menanggulangi hal ini?
Maka solusinya adalah menggunakan suatu logic yang dinamakan Protected Routes
Protected Routes adalah suatu cara yang memperbolehkan kita untuk memilih Component dari Rute mana yang harus kita lindungi dari suatu logic tertentu
Kebetulan, dalam React Router ini sendiri TIDAK disediakan suatu cara khusus untuk bisa menggunakan Protected Routes ini, sehingga kita harus membuatnya secara mandiri.
Jadi pada demo selanjutnya ini kita akan berusaha untuk membuat Protected Routes ini demi meringankan pekerjaan kita nantinya...
Langkah pengerjaannya adalah sebagai berikut:
Seluruh kode yang dituliskan di atas, dapat dilihat di sini yah