Autentikasi Firebase dengan React Native (Expo)
Memastikan keamanan data pengguna menjadi hal yang sangat penting. Seiring aplikasi mobile semakin mendominasi kehidupan sehari-hari kita, autentikasi pengguna yang kuat telah menjadi aspek fundamental dalam pengembangan aplikasi.
Artikel ini akan mengulas kombinasi antara Firebase Authentication dan React Native Expo, memberikan anda pengetahuan untuk menerapkan autentikasi pengguna yang aman dalam aplikasi mobile Anda dengan baik.
Saya akan menjelaskan secara bertahap (step by step) dalam pembuatan sistem autentikasi menggunakan firebase dan react native (expo). Hasil akhir dari aplikasi ini bisa kalian lihat pada video berikut :
Jadi mari kita langsung ke tahap pembuatan aplikasi tersebut.
Konten artikel :
· Install React Native & Package dependecies
· Konfigurasi firebase dan AsyncStorage
· Membuat fungsi login dan register
· Menampilkan data user dari document collection “users” firebase
· Membuat fungsi update profile user
· Membuat fungsi update email autentikasi
· Membuat fungsi update password autentikasi
· Membuat fungsi reset password autentikasi
Install React Native & Package dependecies
Pertama kita install terlebih dulu project react native yang akan dibuat dan package yang akan kita gunakan pada project ini. karena saya akan menggunakan expo dalam pembuatan project ini, maka kita akan menjalankan perintah berikut :
“npx create-expo-app firebase-auth-expo”
Tunggu hingga proses instalasi selesai. Setelah proses instalasi selesai buka folder project menggunkan code editor yang kalian gunakan disini saya menggunakan visual studio code.
Buka terminal dan ketikkan perintah berikut :
“npx expo start”
Pilih dimana kalian ingin menjalankan aplikasi tersebut android atau ios device selain kedua device tersebut kita juga bisa menampilkannya dalam browser web.
“ untuk menjalankan aplikasi langsung ke device baik android maupun ios pastikan kalian sudah melakukan instalasi expo go sebelumnya silahkan install dari playstore atau appstore dan untuk menjalankan aplikasi ke web browser install beberapa package dengan perintah berikut npx expo install react-dom react-native-web @expo/webpack-config ”.
Setelah berhasil menjalankan aplikasi pada device atau web browser sekarang kita kan melakukan instalasi beberapa dependecies package yang diperlukan.
Pertama kita install react navigation yang akan kita gunakan untuk berpindah antara layar satu dengan yang lain navigators yang akan kita gunakan nantinya yaitu Stack dan BottomTabs Navigators. Jalankan perintah berikut :
“npm install @react-navigation/native”
Setelahnya jalankan perintah berikut :
“npx expo install react-native-screens react-native-safe-area-context”
Silahkan cek link berikut untuk penjelasan lebih lengkapnya :
“https://reactnavigation.org/docs/getting-started”
Kita teruskan dengan melakukan instalasi Stack dan bottomTab navigator dengan perintah berikut :
“npm install @react-navigation/stack”
“npx expo install react-native-gesture-handler”
“npm install @react-navigation/bottom-tabs”
Install expo image image picker dan Async storage dengan perintah berikut :
“npx expo install expo-image”
“npx expo install expo-image-picker”
“npx expo install @react-native-async-storage/async-storage”.
Yang terakhir install firebase dan react native toast notification dengan command berikut :
“npm install firebase”
“npm i react-native-toast-notifications”
Selanjutnya kita akan membuat project baru pada firebase lalu menambahkan konfigurasi firebase pada project react native dan membuat konfigurasi async storage pada project tersebut
Konfigurasi firebase dan AsyncStorage
Untuk membuat project firebase kalian bisa ketikkan firebase pada search engine google lalu akses link berikut : https://console.firebase.google.com
Setelah itu Add project baru seperti gambar berikut
Lalu inputkan nama project seperti yang diinginkan
Klik tombol create project dan tunggu hingga prosesnya selesai
Setelah proses create project selesai, pada halaman dashboard project pilih icon “</>” seperti digambar
Copy konfigurasi dari firebase berikut karena konfigurasi ini yang akan kita gunakan untuk menghubungkan firebase dengan project react native.
Buat folder config pada folder src. Lalu tambahkan file firebase.js pada folder config dan paste konfigurasi firebase yang sudah di copy sebelumnya.
Sekarang kita akan menambahkan cloud firestore dan storage klik menu firestore pada panel build lalu klik tombol create firestore
Pilih lokasi dari cloud firestore seperti gamabar dibawah ini :
Pilih opsi Test Mode lalu klik enable dan tunggu hingga proses inisiasi selesai.
Setelah proses inisiasi firestore selesai pilih tab rules dan ubah datetimenya jika diperlukan lalu klik tombol publish
Sekarang tambahkan juga storage untuk menyimpan gambar yang akan kita gunakan Klik menu storage pada panel build lalu klik tombol get started.
Pilih opsi test mode kemudian klik next
Klik done dan tunggu hingga prosesnya selesai
Buka kembali file firebase.js yang ada di folder src/config ubah kodenya seperti kode dibawah ini karena kita akan menggunakan authentication, cloud firestore dan storagenya.
Buat file baru (localStorage.js) untuk konfigurasi asyncStorage pada folder src/config dan tambahkan kode seperti dibawah ini :
Buat file baru (getBlobFromUri.js) untuk mendapatkan source gambar yang kita upload dari smartphone lalu kita simpan di storage firebase seperti dibawah ini :
Tambahkan beberapa folder dan file pada folder src seperti berikut :
Folder components (file di dalam folder : Button.js, TextInput.js dan UploadImage.js)
Folder routes (file di dalam folder : index.js)
Untuk folder screens buat 2 folder lagi yaitu :
Folder auth (file di dalam folder : Login.js, Register.js, ResetPassword.js UpdateAuth.js)
Folder users (file di dalam folder : Home.js, updateEmail.js , UpdatePassword.js, UpdateProfile.js)
Tambahkan function component pada tiap file js tersebut untuk lebih mudah kalian bisa install extension react native pada visual studio code seperti berikut :
Jadi kita cukup mengetikkan kode berikut untuk membuat functional component :
Selanjutnya kita akan membuat fungsi login, register, dan update profile.
Membuat fungsi login dan register
Buka file App.js dan ubah kodenya seperti berikut :
Sekarang kita akan membuat komponen global yaitu untuk button dan input text yang nantinya akan kita gunakan pada screen login, register, reset password, update profile dan screen yang lainnya.
Buka file Button.js dan Input.js pada folder components kemudian tambahkan kode berikut :
Buka file route yang ada pada folder routes kemudian ubah kodenya seperti berikut :
Sekarang tambahkan kode pada screen Login, Register, dan Home :
Pastikan method firebase yang kita gunakan pada screen Login, Register, dan Home sudah di import dengan benar. Jika tidak ada error maka kita akan mendapatkan hasil seperti berikut :
Selanjutnya kita akan menampilkan data user yang login pada screen Home.
Menampilkan data user dari document collection “users” firebase
Untuk menampilkan data dari document yang ada pada collection users kita akan menggunakan method doc dari firebase/firestore untuk melihat seperti method yang akan kita gunakan silahkan cek dokumentasi dari firebase berikut : https://firebase.google.com/docs/firestore/query-data/get-data?authuser=0
Selain menampilkan data dari document yang ada pada collection kita juga akan menambahkan fungsi logout pada screen Home ini.
Sekarang ubah kode yang ada pada screen home seperti berikut :
Tampilan yang akan kita dapatkan akan terlihat seperti ini :
Setelah menampilkan data user yang login pada screen Home selanjutnya kita akan membuat screen untuk melakukan proses update profile user.
Membuat fungsi update profile user
Untuk membuat fungsi update profile pertama buat terlebih dahulu komponen untuk screen/halaman update profile pada folder screens/users disini saya memberi nama screen tersebut updateProfile.js.
Update lagi kode yang ada pada screen/halaman Home.js seperti berikut
lalu tambahkan kode berikut pada item menu untuk update profile seperti berikut :
Buka file UploadImage.js pada folder components lalu tambahkan kode berikut :
Sekarang untuk screen/halaman update profile ubah kodenya seperti berikut :
Maka hasil akhir yang akan kita dapatkan seperti berikut :
Selanjutnya kita akan membuat fungsi update email autentikasi.
Membuat fungsi update email autentikasi
Ubah kode UpdateEmail.js yang ada pada folder screens/users seperti berikut :
Jalankan server expo dengan command “npx expo run” pilih menu Update email & password auth lalu pilih tab Update Email sekarang coba lakukan proses update email auth dan jika berhasil hasilnya akan seperti berikut :
Selanjutnya kita akan menambahkan fungsi update password authentication.
Membuat fungsi update password autentikasi
Ubah kode UpdatePassword.js yang ada pada folder screens/users seperti berikut :
Jalankan server expo dengan command “npx expo run” pilih menu Update email & password auth lalu pilih tab Update password sekarang coba lakukan proses update password auth dan jika berhasil melakuan proses update password kita akan di redirect ke halaman login. Hasilnya akan seperti berikut :
Terakhir kita akan membuat fungsi reset password
Membuat fungsi reset password autentikasi
Sekarang kita akan membuat fungsi reset password buka file ResetPassword.js yang ada pada folder /src/screens/auth/ResetPassword.js
Ubah kode yang ada seperti berikut :
Akses screen ResetPassword tersebut dari halaman/screen Login jika proses ResetPassword berjalan dengan baik kita akan menerima email yang berisi link untuk melakukan reset password.
Sekian untuk tutorial Autentikasi firebase dengan React native expo ini jika mengalami kesulitan silahkan tulis komentar dibawah atau hubungi saya via DM Telegram (https://t.me/eripratama)
Source code (Github repo) : https://github.com/eripratama1/Firebase-auth-React-Native-Expo